Callout
There's no <callout> element, ARIA live-region roles are the correct tool for exactly this gap. danger/warning interrupt (role="alert", assertive);info/success wait their turn (role="status", polite).
Heads up
This is announced politely (role="status"), it won't interrupt anything in progress.
Something went wrong
This is announced immediately (role="alert").
Playground
Toggle every adjustable prop and watch the component — and the code — update live.
Payment failed
Update your card details to keep your subscription active.
variant
Usage
<Callout variant="info" title="Payment failed">Update your card details to keep your subscription active.</Callout><kernel-callout variant="info"><span slot="title">Payment failed</span>Update your card details to keep your subscription active.</kernel-callout>Props
| Prop | Type | Default |
|---|---|---|
variant | "info" | "success" | "warning" | "danger" | "info" |
title | ReactNode | — |