Components
Alert
A callout for information, success, warning or an error, with an icon.
Server componentNo state or handlers. Safe to render in a Server Component.
import { Alert, AlertTitle, AlertDescription, AlertIcon, alertVariants } from "@glob-ui/alert"Preview
Heads up
Your trial ends in 3 days.
Examples
Variants
info, success, warning and danger. Warning and danger are announced at once.
Info
A new version is available.
Saved
Your changes are live.
Storage almost full
92% of your quota is used.
Upload failed
The file is larger than 10 MB.
API
Props are generated from the TypeScript types in the package source.
AlertProps
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| default, info, success | role="status": announced politely, after the current speech. |
| warning, danger | role="alert": announced at once. |
| Icon | Decorative. It is hidden from assistive technology, so the title carries the meaning. |
ARIA. Do not rely on colour alone: the icon and the title say what happened.