Components

Alert Banner(React)

Important account information displayed at the top of a screen

Version:14.18.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { AlertBanner } from '@thumbtack/thumbprint-react';

Themes

Caution

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

Info

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

Warning

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

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'
  • 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