React Alert

Page- and section-level messages in the house severity system — the same colored left-rail the Toast uses, so feedback reads consistently everywhere. Every variant pairs an icon with the title (state is never color alone), warnings and errors announce via role="alert", and an optional action slot carries the follow-up link or button.

Scheduled maintenance

The design portal will be read-only on Saturday 02:00–06:00 UTC while we migrate the license servers.

Regression passed

smoke_axi4 completed — 128/128 tests passed, functional coverage 94.7%.

Rev C characterization in progress

Corner data for −40 °C will be added to the datasheet in the next revision.

Installation

npx shadcn@latest add alert.json

Usage

Loading...

Props

PropTypeDefaultDescription
variant'info' \'success' \'warning' \
titlestringBold first line
childrenReact.ReactNodeDescription body
actionReact.ReactNodeFollow-up link/button under the body
dismissiblebooleanfalseShows the dismiss button
onDismiss() => voidCalled when dismissed
iconReact.ReactNodeOverride the variant icon