Alert

An inline status banner. Warnings and errors announce with role=alert; info and success are passive status.

Examples

Tones

info
Something you should know about.
success
Something you should know about.
Show code
<Alert tone="success" title="Saved">Your changes have been saved.</Alert>

Props

PropTypeDefaultDescription
tone"info" | "success" | "warning" | "danger""info"Tone of the banner. Warnings and errors announce with role=alert; info and success use role=status.
titlestring—Optional bold heading above the message.

Any other attribute is spread onto the container. Override the role by passing role.