Alert Banner
Important account information displayed at the top of a screen
Themes
Caution
<h theme="caution"> Your pre-paid credits are running low. Purchase new credits before you run out.{' '} <a href="https://example.com/"> Purchase credits </a> </h>
Info
<h theme="info"> You haven’t finish setting up. Add 3 reviews and turn on targeting.{' '} <a href="https://example.com/"> Finish setup </a> </h>
Warning
<h theme="warning"> Oops. Your payment failed! Update your payment details to continue using Thumbtack.{' '} <a href="https://example.com/"> Update payment </a> </h>
Props
AlertBanner
children
requiredText within the alert
TypeReact.ReactNode
theme
requiredDetermines the background color and text color of the component
Type'info' | 'warning' | 'caution'
icon
A React component such as
<MyCustomIcon />
to render as the icon.TypeReact.ReactNode
dataTestId
A selector to hook into the React component for use in automated testing environments.
Typestring
dataTest
deprecatedA selector to hook into the React component for use in automated testing environments.
Note:
Deprecated in favor of the
dataTestId
propTypestring