Components
Alert
Static, inline contextual feedback displayed within page content
AlertV2 is a static, non-interactive banner that communicates contextual messages. The theme prop sets the background, icon, and icon color to convey severity.
Themes
Neutral
<AlertV2 theme="neutral"> 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> . </AlertV2>
Info
<AlertV2 theme="info"> You haven’t finished setting up. Add 3 reviews and turn on targeting.{' '} <a href="https://example.com/"> Finish setup </a> </AlertV2>
Caution
<AlertV2 theme="caution"> Your pre-paid credits are running low. Purchase new credits before you run out.{' '} <a href="https://example.com/"> Purchase credits </a> </AlertV2>
Alert
<AlertV2 theme="alert"> Oops. Your payment failed! Update your payment details to continue using Thumbtack.{' '} <a href="https://example.com/"> Update payment </a> </AlertV2>
Success
<AlertV2 theme="success"> Your payment was successful. Your account is now up to date.{' '} <a href="https://example.com/"> View receipt </a> </AlertV2>
Props
BannerAlert
childrenText within the alert
TypeReact.ReactNodeDefaultnullthemeDefines the style of the alert
Type'good' | 'bad' | 'warning' | 'info'Default'info'dataTestIdA selector to hook into the React component for use in automated testing environments.
TypestringdataTestdeprecatedA selector to hook into the React component for use in automated testing environments.
Note:Deprecated in favor of the
dataTestIdpropTypestringaccessibilityLabelAccessible label for the alert. Only needed if non-textual children are provided (e.g., images, emojis). Not necessary if textual children are provided.
Typestring
InPageAlert
childrenText within the alert
TypeReact.ReactNodeDefaultnullthemeDefines the style of the alert
Type'good' | 'bad' | 'warning' | 'info'Default'info'dataTestIdA selector to hook into the React component for use in automated testing environments.
TypestringdataTestdeprecatedA selector to hook into the React component for use in automated testing environments.
Note:Deprecated in favor of the
dataTestIdpropTypestringaccessibilityLabelAccessible label for the alert. Only needed if non-textual children are provided (e.g., images, emojis). Not necessary if textual children are provided.
Typestring