Callout

A boxed note for inline asides next to body text.

Anatomy

A box with an icon on the left and content on the right. Use it for short context that belongs near the prose but should not read as a regular paragraph, like a behavioral note, a heads-up, or a caveat.

Tone tints the icon and the ring. The same parts cover an info note, a warning, or a destructive alert.

API

Reference for each part of the component, including its available props and behavior.

Callout

The root. Sets data-tone on the element so the icon picks up the tone color through a group selector. Tone is the only visual variant; the rest of the styling is the same across tones, so the same children render in any tone.

CalloutIcon

The icon slot. Sizes the icon and aligns it with the first line of content. Reads the tone from the root, so the color matches the tone without extra props.

CalloutContent

The text content. A flex column that grows to fill the box.