Feedback
Alert
A status message. Color and an icon flag success, a warning, or an error.
ReactVueWeb Components
View in Storybook Playground
Examples
<Alert status="success" title="Saved">Your changes are stored.</Alert>
<Alert status="danger" role="alert" onClose={dismiss}>Something failed.</Alert>Props
| Name | Type | Default | Description |
|---|---|---|---|
status | AlertStatus | primary | Semantic color/intent. @default 'primary' |
title | ReactNode | — | Optional bold title shown above the body. |
icon | ReactNode | — | Optional leading icon. |
onClose | () => void | — | Show a dismiss button; called when clicked. |
closeLabel | string | Close | Accessible label for the dismiss button. @default 'Close' |
role | 'alert' | 'status' | status | ARIA live semantics. Use `'alert'` (assertive) for errors that need immediate attention, `'status'` (polite) for non-critical messages. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.