components / callout
callout.
inline notice attached to the thing it's about — the counterpart to toast, which interrupts from a corner and leaves. aria role follows severity: danger asserts, warn and success announce politely, a plain note stays silent.
times are shown in your zone
we detected america/los_angeles. change it below if that's wrong.
booked
wednesday, august 5 at 9:30 am. the invite is on its way.
this slot is tight
you have another meeting ending 15 minutes before this one.
that slot just went away
someone booked it while this page was open.
installation
bunx @justin06lee/chrome@latest add calloutprops
| name | type | default | description |
|---|---|---|---|
| variant | 'note' | 'success' | 'warn' | 'danger' | 'note' | tone. only warn and danger spend colour; the rest stay on the opacity ladder. |
| title | ReactNode | - | bold first line. omit for a single-line callout. |
| children | ReactNode | - | body copy. |
| icon | LucideIcon | null | - | replaces the variant's default icon; null drops it entirely. |
| onDismiss | () => void | - | adds a close button. presentational — the caller owns visibility. |
| action | ReactNode | - | trailing slot under the copy, e.g. a retry button. |
| className | string | - |