Callout
Inline alert block rendered in flow, unlike Banner, which frames a whole page region.
Component behavior
Callout displays guidance beside the content it applies to. It remains in document flow and does not interrupt reading. Use another notification mechanism for time-sensitive messages.
Use cases
- Explaining a constraint on the section or form containing it.
- Warnings tied to a specific choice the user is about to make.
- Notes within documentation or a form.
Alternatives
Banner: the condition is page-wide rather than local.
Toast: it is feedback on an action that recently completed.
ValidationMessage: it is a field-level validation error.
Props
Callout extends HTMLAttributes<HTMLDivElement> (minus title).
| Prop | Type | Default | Description |
|---|---|---|---|
tone | CalloutTone | "info" | "info" | "ok" | "warn" | "err". |
title | ReactNode | — | Bold heading above the body text. |
icon | ReactNode | — | Override the tone-default icon. |
actions | ReactNode | — | Action row under the body (small buttons/links). |
children | ReactNode | — | Body text or content. |
Examples
Tones
With title
Without title
With actions
import { Callout } from "@solarius/onset";
import type { CalloutTone } from "@solarius/onset";
<Callout tone="warn" title="Storage alert">
Your workspace has used 92% of its allocated storage.
</Callout>;