docs / core / callout
Callout
a note that sits in the flow and stays there. a toast leaves on its own and an Announcement links somewhere. this one waits to be read.
intensity · recedesrsc · client
provenance
authored in usvalayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
an error summary at the top of a form, or a warning on a docs pageone action on the end, when there is something to do about itnot for a transient confirmation. that is a toastdanger for anything you would not interrupt a screen reader fornever stack four in a row. that is a page with no hierarchya11y
role="status" on the calm tones, so a change is announced politely · role="alert" only on danger, because alert cuts a screen reader off mid sentence · the tone icon is aria-hidden, so tone is never the only carrierjest-axelive demo · try it out
A note
Nothing is wrong. This is just context that has to stay on the page.
customize
toneneutral says nothing, danger interrupts
titleoptional. the body can stand alone
bodywhat the reader has to know
actionone button on the end of the block
dismissibleadds a close button. off by default
usage
import { Callout } from "@usva-ui/react/primitives/callout";
<Callout title="A note">
Nothing is wrong. This is just context that has to stay on the page.
</Callout>props
| prop | type | default | notes |
|---|---|---|---|
| tone | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | picks the tint, the icon and the dot. neutral gets none of the three. |
| title | ReactNode | — | optional heading above the body. the body can stand alone. |
| action | ReactNode | — | one control on the end of the block. more than one belongs on the page. |
| icon | ReactNode | false | — | swaps the tone icon, or false drops it. |
| dismissible | boolean | false | adds a close button. off by default, because a callout that leaves is a toast. |
| onDismiss | () => void | — | fires after the close button removes the callout. |
| dismissLabel | string | "Dismiss" | accessible name on the close button. |
| role | "status" | "alert" | — | status on the calm tones, alert on danger. pass it to override. |
get it
bun add @usva-ui/reactusage
import { Callout } from "@usva-ui/react/primitives/callout";
<Callout title="A note">Nothing is wrong. This is just context.</Callout>
<Callout tone="warning" title="Rate limit reached">
You have used 4,900 of your 5,000 requests this hour.
</Callout>
<Callout tone="danger" title="Upload failed" dismissible>
The file was larger than the 25 MB limit.
</Callout>