Alert Banner

Important account information displayed at the top of a screen

Themes

Caution

<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

<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

<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
'info' | 'warning' | 'caution'
icon
A React component such as <MyCustomIcon /> to render as the icon.

Type
React.ReactNode
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