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.

The banner variant lays out the title, message, and actions in a single row. For a banner with square corners that spans the full width of the page, use the full-width banner variant.

Alerts with longer messages should not use the banner variant.

#Full-width banner

Use the fullWidthBanner variant for a banner pinned to the top of a page. It has square corners, spans the full width of its container, and keeps only a bottom border. In this demo, each bordered frame stands in for a page.

Choose the type by intent, as with other alerts: subtle for a neutral state the user doesn't need to act on, and info, warning, or error when the banner needs more attention.

#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" | "fullWidthBanner"fullWidthBanner drops the rounded corners and side borders and spans the full width of its container, keeping only a bottom border. Use it for a banner pinned to the top of a page.
contextMessage	—	ReactNodeAdditional 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	—	ReactNodeShort summary of the message, ideally several words.
message	—	ReactNodeExtended explanation of the alert.
icon	—	keyof typeof IconMapIcon to display in the alert.
actions	—	ReactNodeCall-to-action buttons or links.
onDismiss	—	() => voidCallback to execute when alert is dismissed.