Thumbprint logo

Alert

Vibrant alert messages used as page banners or within forms

Banner alerts

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="good">
  <p>
    An Alert!
  </p>
</BannerAlert>

<BannerAlert theme="warning">
  <p>
    A Warning!
  </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.
<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="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="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="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
    '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
  • accessibilityLabel
    Accessible label for the alert. Only needed if non-textual children are provided
(e.g., images, emojis). Not necessary if textual children are provided.
    

    Type
    string
InPageAlert
  • children
    Text within the alert
    

    Type
    React.ReactNode
    Default
    null
  • theme
    Defines the style of the alert
    

    Type
    '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
  • accessibilityLabel
    Accessible label for the alert. Only needed if non-textual children are provided
(e.g., images, emojis). Not necessary if textual children are provided.
    

    Type
    string