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

AlertV2

  • children
    required

    Text within the alert

    Type
    React.ReactNode
  • theme
    required

    Determines the background color, icon, and icon color of the component

    Type
    'neutral' | 'info' | 'caution' | 'alert' | 'success'
  • icon

    A React component such as <MyCustomIcon /> to render as the icon. When omitted, the default icon for the given theme is rendered.

    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