Components

Alert Banner(React)

Important account information displayed at the top of a screen

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

Usage

AlertBanner should be used as a banner at the very top of the page.

Call-to-actions (e.g. <a> tags in the children prop) should be the last item in the children.

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

    A selector to hook into the React component for use in automated testing environments.

    Type
    string
Was this page helpful?

We use this feedback to improve the quality of our documentation.