Feedback
Alert
Alert is a persistent inline feedback block for contextual status tied to page content — not auto-dismissing.
Type (Info/Success/Warning/Error) — 4 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.3.0-beta
Known open questions
- Optional action slot semantics pending Figma confirmation for primary action placement.
Live preview
Persistent inline feedback tied to page content.
Information / Success / Warning / Error
Heads up
Documentation previews are Beta.
Saved
Your preferences were updated.
Review required
Some tokens remain temporary.
Upload failed
Try again or contact support.
Actions and dismissal
Dismissible / With action
Beta component
APIs may change while Figma parity gaps remain open.
Temporary tokens in use
Progress and feedback spacing values are marked temporary.
Purpose
A prominent, inline message block communicating status directly within page content (not floating above it).
Anatomy
Alert = status icon + title + description + optional action + optional dismiss.
Variants and states
info · success · warning · error
When to use
Persistent, contextual messages tied to the content on the page.
When not to use
Transient, auto-dismissing notifications not tied to page content — use Toast.
Accessibility
role="alert" (Error/Warning) or role="status" (Info/Success) so screen readers announce it appropriately.
Keyboard behavior
Dismiss and action controls follow native button keyboard behavior. Alert container is not focusable by default.
Common mistakes
Using Alert for something that should auto-dismiss.
Properties
Type as variants. Title (text), Description (text), Show close (boolean).
What is the difference between Alert and Toast?
Alert stays in page content for persistent contextual messages. Toast floats temporarily above the page for transient confirmations.
Tokens used
semantic/feedback/infosemantic/feedback/successsemantic/feedback/warningsemantic/action/danger
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "info" | "success" | "warning" | "error" | "info" | Status variant. |
| title | string | — | Optional alert title. |
| announce | "off" | "polite" | "assertive" | "off" | Live region behavior. |
| dismissible | boolean | false | Shows dismiss control. |
| onDismiss | () => void | — | Called when dismissed. |
React example
Copy React example
import { Alert } from "@/components/ui/Alert";
export function Example() {
return (
<Alert
type="warning"
title="Beta component"
description="APIs may change while Figma parity gaps remain open."
/>
);
}