Components

Alert(React)

Vibrant alert messages used as page banners or within forms.

Version:10.1.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { BannerAlert, InPageAlert } from '@thumbtack/thumbprint-react';

Banner alerts

These alerts should be used at the very top of a page.

An Alert!

An Alert!

A Warning!

An Alert!

In-page alerts

These alerts should be used inside other page elements, e.g. forms.

Your credit card is about to expire. To keep quoting on job requests please update your credit card now.

Your credit card is about to expire. To keep quoting on job requests please update your credit card now.

Your credit card is about to expire. To keep quoting on job requests please update your credit card now.

Your credit card is about to expire. To keep quoting on job requests please update your credit card now.

Props

BannerAlert

  • children

    Text within the alert

    Type
    React.ReactNode
    Default
    null
  • theme

    Defines the style of the alert

    Type

    This prop can be one of the following 4 types:

    • 'good'
    • 'bad'
    • 'warning'
    • 'info'
    Default
    'info'
  • dataTest

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

    Type
    string

InPageAlert

  • children

    Text within the alert

    Type
    React.ReactNode
    Default
    null
  • theme

    Defines the style of the alert

    Type

    This prop can be one of the following 4 types:

    • 'good'
    • 'bad'
    • 'warning'
    • 'info'
    Default
    'info'
  • dataTest

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

    Type
    string