Thumbprint logo

Components

Alert

Static, inline contextual feedback displayed within page content

AlertV2 is a static, non-interactive banner that communicates contextual messages. The theme prop sets the background, icon, and icon color to convey severity.

Themes

Neutral

<AlertV2 theme="neutral">
  Your credit card is about to expire. To keep quoting on job requests please{' '}
  <a href="https://example.com/">
    update your credit card now
  </a>
  .
</AlertV2>

Info

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

Caution

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

Alert

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

Success

<AlertV2 theme="success">
  Your payment was successful. Your account is now up to date.{' '}
  <a href="https://example.com/">
    View receipt
  </a>
</AlertV2>

Props

BannerAlert

  • children

    Text within the alert

    Type
    React.ReactNode
    Default
    null
  • theme

    Defines the style of the alert

    Type
    'good' | 'bad' | 'warning' | 'info'
    Default
    'info'
  • 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
  • accessibilityLabel

    Accessible label for the alert. Only needed if non-textual children are provided (e.g., images, emojis). Not necessary if textual children are provided.

    Type
    string

InPageAlert

  • children

    Text within the alert

    Type
    React.ReactNode
    Default
    null
  • theme

    Defines the style of the alert

    Type
    'good' | 'bad' | 'warning' | 'info'
    Default
    'info'
  • 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
  • accessibilityLabel

    Accessible label for the alert. Only needed if non-textual children are provided (e.g., images, emojis). Not necessary if textual children are provided.

    Type
    string