Alert
Alerts (opens in a new tab) notify a user of a time-sensitive update, such as the success (or failure) of an action they just took, or an application update to be aware of. Alerts usually trigger instant screen reader feedback (opens in a new tab).
An Alert can appear inline on the page, or floating. The floating variant is may be referred to as a Toast (opens in a new tab).
Error!
Usage
✅ Good uses of Alerts include:
- An API call completed (successfully or unsuccessfully)
- A form submitted (successfully or unsuccessfully)
❌ Bad uses of Alerts would be:
- Page callouts (this should just be stylized differently, not an alert)
- Popups (that should be a Dialog)
Props
| Name | Type | Description |
|---|---|---|
variant | string | negative, neutral, positive, or warning |
Severity
Alerts can take a variant of negative, neutral, positive, or warning.
Negative alert
Neutral alert
Positive alert
Warning alert