Components

Alert(React)

Vibrant alert messages used as page banners or within forms.

Version:14.18.2 •View source•Changelog•Report issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { BannerAlert, InPageAlert } from '@thumbtack/thumbprint-react';

Banner alerts

Deprecated

This component is deprecated. Use AlertBanner instead.

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

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