Thumbprint logo

Alert Banner

Important account information displayed at the top of a screen

Themes

Caution

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

Info

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

Warning

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

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