Component · Feedback · 17
Alert
Alert = a page-level banner that pairs an icon with one message and one action; it sits above the content, not inside it.
Scheduled maintenanceExports pause Sunday 02:00–03:00 UTC.
Connection failedThe workspace token expired — reconnect to continue.
What is a Alert?
An alert interrupts the page, not the flow. Name where it sits, which severity it carries, and how it is dismissed.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- A positive confirmation toast (saved, sent, copied).
- Name this type explicitly in the prompt.
- The invalid state — red border, message, and usually a blocked submit.
- Give a value, not a vibe word.
- A button whose content is a single glyph with no text label. Always give it an aria-label.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Banner
- 02 Icon
- 03 Title
- 04 Message
- 05 Action
- 06 Dismiss
When to use
- System-wide notices — outage, maintenance, quota
- Form-level errors that block submission
- Confirmations that need one follow-up action
Avoid when
- The message belongs inside an article — use Callout
- The user must stop and decide — use Dialog
- It fires on every page load and is never actionable
Alerts sit above the content and push it down — reserve that for messages the whole page needs to see.
See also
Create an alert component.
STYLE
- full-width banner, 12px radius, 14px padding, 1px tinted border
- four severities: info #0071E3, success #248A3D, warning #FF9F0A, error #FF3B30
- each uses a 16px glyph, a 14px 600 title and a 13px body
- one text action on the right, dismiss cross on the far right
STATES
- default, dismissible with a 150ms fade, sticky variant pinned to the top
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui