ONONC

Alert

Semantic callouts for info, success, warning, and errors.

feedbacka11y

Styled with ONONC's design tokens — shadcn add installs them for you.

Payment received

Your invoice has been paid in full.

Customize

Variant
Title
Body
Dismissible

Props

PropTypeDefaultDescription
variant"info" | "success" | "warning" | "danger""info"Semantic style + icon; danger announces assertively.
titleReactNode—Bold heading line.
childrenReactNode—Body content.
dismissiblebooleanfalseRender a close button that animates the alert out.
onDismiss() => void—Called after the alert is dismissed.
classNamestring—Extra classes.