Alert
Inline callout for statuses and problems — four tones, dismiss button, icon overrides.
Alert is a static, inline callout: it communicates without interrupting
(unlike Toast or Dialog). Four tones map to the semantic tokens, and
warning/destructive tones announce as role="alert".
Installation
import { Alert } from "@iammikz/srui";
Usage
Scheduled maintenance Sunday 02:00–03:00 UTC.
Build 128 is live on all regions.
85% of the monthly build minutes are used.
Update your card to avoid suspension.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "success" | "warning" | "destructive" | "info" | Tone + icon + role |
title | ReactNode | — | Bold first line |
children | ReactNode | — | Body copy |
icon | LucideIcon | null | variant default | Override or disable the icon |
onDismiss | () => void | — | Renders a dismiss button |
The body can also be composed from subcomponents — equivalent to the
title prop + children shorthand:
85% of the monthly build minutes are used.
| Export | Notes |
|---|---|
AlertTitle | Bold first line |
AlertDescription | Body copy |
Accessibility
info/success render role="status" (polite); warning/destructive
render role="alert" (assertive). The dismiss button is labelled, and the
icon is decorative (aria-hidden).
Upgrades over the PRUI original: a dismiss affordance and icon override.