Alert & Notification
A short message about something that happened or needs attention, in one of four intents. It sits inline as an alert beside the thing it is about, or arrives as a toast in a corner and leaves on its own.
Preview
Your trial ends in 3 days
Add a payment method to keep your projects and history.
When to use
- Inline, to report on a section or form: a save failed, a setting has a side effect, a trial ends soon.
- As a toast, to confirm an action the person just took: Link copied, Invite sent.
- In the error intent, to say what went wrong and what to do next, in one or two sentences.
Reach for something else
- For a message about the whole product or account that should stay at the top of the page: that is a Banner.
- For a choice that must be made before anything else can happen: that is a Modal.
Anatomy
- 1
Container
A soft wash of the intent's colour with a hairline ring in a deeper shade.
- 2
Icon
One glyph per intent, so the meaning never rests on colour alone.
- 3
Title
Medium weight, one line: what happened.
- 4
Description
Optional. What it means, or what to do about it.
- 5
Action
Optional link button: Retry, View details, Undo.
- 6
Dismiss
Optional compact button that closes the alert.
States
Success
Green. Something finished as intended.
Info
Blue. Neutral context worth knowing.
Warning
Amber. Something may go wrong if nothing changes.
Error
Red. Something failed and needs a response.
Dismissed
Removed from the page; focus moves to a sensible neighbour, not the top of the page.
Accessibility
- An alert that appears after an action uses role="status" for success and info, and role="alert" for errors, so screen readers announce it without moving focus.
- An alert that is present when the page loads needs no live role: it is read in order like any other content.
- Toasts stay long enough to read, pause while hovered or focused, and never carry the only way to reach an action.
- The dismiss control is a <button> with an aria-label such as Dismiss.
Source
The Alert & Notification is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block