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
AlertV2
childrenrequiredText within the alert
TypeReact.ReactNodethemerequiredDetermines the background color, icon, and icon color of the component
Type'neutral' | 'info' | 'caution' | 'alert' | 'success'iconA React component such as
<MyCustomIcon />to render as the icon. When omitted, the default icon for the giventhemeis rendered.TypeReact.ReactNodedataTestIdA 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
dataTestIdpropTypestring