Alert

Alerts communicate state that affects a form, feature or a page.

#Usage

#Info

Use the info type for messages that are neutral in tone.

#Subtle

Use the subtle type for neutral messages when a blue theme may feel too loud.

#Error

Use the error type to show a critical error that needs to be immediately addressed.

#Warning

Use the warning type to show a potential issue that may need to be addressed soon.

#Success

Use the success type to show positive results or messaging.

#Upsell

Use the upsell type to display billing plans or unlockable product features.

#Dismissible

All alerts should be dismissible, unless it's critical to show them at all times.

#Context message

Show contextual info, such as timeframe, in the context. Be brief.

#Actionable

If possible, add action(s) to the alert to offer user a quick way to resolve it. Use the secondary button variant if there is only one action.

Actions can also be links to external URLs.

#Title only

#Banner

Use the banner variant when an entire workflow, object, or page is impacted by an external event or condition that the user should be aware of.

Banner variant spans the full width of the parent container and has a grey bottom border.

Alerts with longer messages should not use the banner variant.

#Icon

An icon may be provided when it pertains to the product where the alert is being shown. The icon will inherit the color of the variant.

#Guidelines

#When to use

• Bring user's attention to issues, which may need to be resolved by them.
• Announce new or unused feature.
• When entire form couldn't be successfully submitted and there isn't a specific field that caused the failure.
• Banner specific: When an entire workflow, object, or page is impacted by an external event or condition that the user should be aware of.

#When not to use

• If you are immediately confirming a user's action while they remain in the same view, use a toast instead.

#Content

• Use sentence case everywhere.
• Keep title to a few words.
• Don't add a dot at the end to title and action text.
• Always end a message with a dot.

#Props

Inherits margin props.

Name	Default	Description
variant	—	"inline" | "banner"
contextMessage	—	ReactNode Variant remains optional in this caseAdditional details, such as timeframe, to show in the corner.
type	—	"info" | "success" | "warning" | "error" | "subtle" | "upsell" Determines color scheme of the alert, based on the intent.
title	—	ReactNode Short summary of the message, ideally several words.
message	—	ReactNode Extended explanation of the alert.
icon	—	keyof typeof IconMap Icon to display in the alert.
actions	—	ReactNode Call-to-action buttons or links.
onDismiss	—	() => void Callback to execute when alert is dismissed.