Callout

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A message box with border-style variants. Uses different border styles to differentiate severity levels.

Import

import { Callout } from "~lib/feedback/callout";

Name	Type	Required	Default	Description
`children`	`ReactNode`	Yes	N/A	Callout message body
`title`	`string`	No	N/A	Callout heading, kept to one line
`variant`	`"info" \| "tip" \| "warning" \| "error"`	No	`"info"`	Visual style
`size`	`"sm" \| "md"`	No	`"md"`	Padding and text size

Variant border styles: info = solid, tip = double, warning = dashed, error = thick solid.

Use size="sm" in short widgets. It trims the padding and sets the title and message in smaller text, so the callout takes far less height.

The title always stays on one line. When it is too long for the callout it ends in "…" instead of wrapping onto a second line.