InlineAlert
React inline alert for in-page messages: info, success, warning, and error types, a title, actions, and a dismiss button. Announced through live regions.
InlineAlert highlights a message without leaving the page. Set type for the meaning, pass a title, and add onClose to make it dismissible.
When to use
Use InlineAlert to explain something about the content next to it. Examples: a validation summary above a form, a maintenance notice, or a success confirmation after saving. Set type to match the meaning and keep the text to one or two sentences.
For a page-wide system message, use Notification. For a transient confirmation, use NotificationToast.
Examples
Props
Props declared by InlineAlert. Native attributes of the underlying element pass through.
<InlineAlert>
| Prop | Type | Default | Description |
|---|---|---|---|
type | "destructive" | "neutral" | "success" | "warning" | "info" | ||
appearance | "color" | "white" | ||
titlerequired | react.ReactNode | Lead text, shown semibold - the alert's headline. | |
icon | react.ReactNode | Featured leading icon. Pass false to hide it. Defaults to the SDGA glyph
for the type (help-circle for neutral/info/destructive, triangle for warning,
check for success). | |
actions | react.ReactNode | Action buttons row - pass InlineAlertActions. On narrow widths they stack
full-width and the first one renders as the filled primary. | |
onClose | () => void | Provide to render the trailing close button and make the alert dismissible. | |
open | boolean | Controlled visibility. Pair with onClose to own the state yourself. | |
closeLabel | string | Localized close-button label. Defaults to "Dismiss". | |
live | "polite" | "assertive" | Wire the alert into the a11y tree as a live region. polite (role=status)
announces gracefully; assertive (role=alert) interrupts. Omit for static banners. |
<InlineAlertAction>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | Render as the single child (e.g. a router <Link>) instead of a <button>. |
Accessibility
Error and warning alerts render role="alert" so they interrupt, and info and success alerts render role="status" so they are announced politely. The icon is decorative; the type is also carried by the title and text.
The dismiss button has an accessible name. Place the alert near the content it describes so the reading order makes sense.