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.

#Centered

Centered alerts are shorter than their left justified counterparts. Content in centered alerts should be kept to a minimum so it does not wrap.

#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.

Banner variants with longer messages should use the default inline layout.

#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