Alert

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

#Usage

#Success

Success variant informs user of a successful result of an action they took.

#Error

Error variant informs user of a critical error that needs to be immediately addressed.

#Warning

Warning variant informs user of a potential issue that may need to be addressed soon.

#Info

The info variant is a default one for alerts, used for messages that are neutral in tone.

#Dismissible

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

#Actionable

If possible, add an action to the alert to offer user a quick way to resolve it.

Actions can also be links to external URLs.

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

#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
isDismissible	—	boolean Determines whether alert can be dismissed.
variant	—	"info" | "success" | "warning" | "error" Determines color scheme of the alert, based on the intent.
title	—	string Short summary of the message, ideally several words.
message	—	ReactNode Extended explanation of the alert.
actionText	—	string If present, show a button below the message with this text. Use with `onAction` to detect when user clicks it.
actionUrl	—	string Pass a URL to render a link instead of a button. URL will be opened in a new tab.
onAction	—	() => void Callback to execute when user clicks on the action button.
onDismiss	—	() => void Callback to execute when alert is dismissed.