Components

Alert(React)

Vibrant alert messages used as page banners or within forms.

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

Deprecated

This component is deprecated. Use AlertBanner instead.

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

<BannerAlert theme="bad">
    <p>An Alert!</p>
</BannerAlert>

<BannerAlert theme="bad">
    <p>An Alert!</p>
</BannerAlert>

<BannerAlert theme="good">
    <p>An Alert!</p>
</BannerAlert>

<BannerAlert theme="good">
    <p>An Alert!</p>
</BannerAlert>

<BannerAlert theme="warning">
    <p>A Warning!</p>
</BannerAlert>

<BannerAlert theme="warning">
    <p>A Warning!</p>
</BannerAlert>

<BannerAlert theme="info">
    <p>An Alert!</p>
</BannerAlert>

<BannerAlert theme="info">
    <p>An Alert!</p>
</BannerAlert>

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.

<InPageAlert theme="bad">
    <p>
        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>.
    </p>
</InPageAlert>

<InPageAlert theme="bad">
    <p>
        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>.
    </p>
</InPageAlert>

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

<InPageAlert theme="good">
    <p>
        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>.
    </p>
</InPageAlert>

<InPageAlert theme="good">
    <p>
        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>.
    </p>
</InPageAlert>

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

<InPageAlert theme="warning">
    <p>
        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>.
    </p>
</InPageAlert>

<InPageAlert theme="warning">
    <p>
        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>.
    </p>
</InPageAlert>

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

<InPageAlert theme="info">
    <p>
        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>.
    </p>
</InPageAlert>

<InPageAlert theme="info">
    <p>
        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>.
    </p>
</InPageAlert>

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

Alert(React)

Banner alerts

In-page alerts

Props

BannerAlert

InPageAlert