Components

Alert Banner(React)

Important account information displayed at the top of a screen

Version:	`14.4.1` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { AlertBanner } from '@thumbtack/thumbprint-react';`

Usage

AlertBanner should be used as a banner at the very top of the page.

Call-to-actions (e.g. <a> tags in the children prop) should be the last item in the children.

Themes

Caution

Your pre-paid credits are running low. Purchase new credits before you run out. Purchase credits

<AlertBanner theme="caution">
    Your pre-paid credits are running low. Purchase new credits before you run out.{' '}
    <a href="https://example.com/">Purchase credits</a>
</AlertBanner>

<AlertBanner theme="caution">
    Your pre-paid credits are running low. Purchase new credits before you run out.{' '}
    <a href="https://example.com/">Purchase credits</a>
</AlertBanner>

Info

You haven’t finish setting up. Add 3 reviews and turn on targeting. Finish setup

<AlertBanner theme="info">
    You haven’t finish setting up. Add 3 reviews and turn on targeting.{' '}
    <a href="https://example.com/">Finish setup</a>
</AlertBanner>

<AlertBanner theme="info">
    You haven’t finish setting up. Add 3 reviews and turn on targeting.{' '}
    <a href="https://example.com/">Finish setup</a>
</AlertBanner>

Warning

Oops. Your payment failed! Update your payment details to continue using Thumbtack. Update payment

<AlertBanner theme="warning">
    Oops. Your payment failed! Update your payment details to continue using Thumbtack.{' '}
    <a href="https://example.com/">Update payment</a>
</AlertBanner>

<AlertBanner theme="warning">
    Oops. Your payment failed! Update your payment details to continue using Thumbtack.{' '}
    <a href="https://example.com/">Update payment</a>
</AlertBanner>

Props

AlertBanner

children
required
Text within the alert
Type
React.ReactNode
theme
required
Determines the background color and text color of the component
Type
This prop can be one of the following 3 types:
'info'
'warning'
'caution'
dataTestId
A selector to hook into the React component for use in automated testing environments.
Type
string
dataTest
deprecated
A selector to hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
Type
string