Callout | Radiant Docs

Use callouts to pull key notes out of regular paragraph flow.

<Callout type="warning" title="Check before you travel">  Confirm passport validity and visa requirements before booking.</Callout>

Choose a callout type

Use type to match the intent of the message. Each type sets the default title, icon, and color.

<Callout type="info">The library closes at 7:00 PM on weekdays.</Callout> <Callout type="tip">Freeze fresh herbs in olive oil to preserve flavor.</Callout> <Callout type="warning">  Ceramic containers can crack when moved from freezer to oven.</Callout> <Callout type="danger">Do not mix bleach with ammonia.</Callout> <Callout type="success">Your reservation has been confirmed.</Callout>

Built-in presets

Each type includes a default title, icon, and color when you do not override them.

Type	Title	Icon	Color
`info`	`Info`	`fluent:info-16-filled`	`#5589C5`
`tip`	`Tip`	`fluent:lightbulb-filament-24-filled`	`#FFB400`
`warning`	`Warning`	`fluent:warning-16-filled`	`#FF990A`
`danger`	`Danger`	`fluent:diamond-dismiss-24-filled`	`#E5484D`
`success`	`Success`	`fluent:checkmark-starburst-24-filled`	`#46A758`

Default behavior

If you omit type, Callout uses the info style.

<Callout>  This callout uses the default `info` type.</Callout>

Control the header

Set a custom title and icon

Use title and icon when the default label or icon is not specific enough. The icon prop accepts an Iconify name or an image URL.

<Callout type="tip" title="Quick prep trick" icon="lucide:sparkles">  Slice fruit the night before and store it in airtight containers.</Callout>

Hide the icon

Set icon={false} when the title and accent bar are enough.

<Callout type="info" icon={false}>  This callout keeps the default title but removes the icon.</Callout>

Hide the title

Set title={false} when the callout body should sit directly beside the icon. If you also hide the icon, the callout renders only the body content and optional accent strip.

<Callout type="warning" title={false}>  This warning keeps the icon and accent bar, but removes the header title.</Callout>

Hide the accent

Set accent={false} when you want a quieter callout without the vertical accent strip.

<Callout type="tip" accent={false}>  This callout keeps the icon and title, but removes the left accent strip.</Callout>

Set a custom color

Use color to override both the icon color and the accent strip color.

<Callout  type="info"  title="Seasonal note"  icon="lucide:leaf"  color="#0ea5e9">  Early spring seedlings need steady light and moderate watering.</Callout>

If accent={false} is set, color still applies to the icon.

<Callout  type="success"  title="Approved"  accent={false}  color="#16a34a">  The icon keeps the custom color even without the left accent strip.</Callout>

Use Markdown and components

Callout body content supports Markdown and other docs components.

<Callout type="tip" title="Before publishing">  <Columns columns={2}>    <Column>    - Review links    - Check headings    </Column>    <Column>    - Run a local preview    - Confirm navigation    </Column>  </Columns></Callout>

Props

Prop	Description	Type	Default
`type`	Visual preset for the default title, icon, and color.	`"warning"`, `"info"`, `"tip"`, `"danger"`, or `"success"`	`"info"`
`title`	Header text shown above the callout body, or `false` to hide it.	`string` or `false`	Type-based default title
`icon`	Icon name to replace the default type icon, or `false` to hide it.	`string` or `false`	Type-based default icon
`accent`	Whether to show the vertical accent strip.	`boolean`	`true`
`color`	Custom color for the icon and accent strip.	`string`	Type-based default color
children	Callout body content. Supports Markdown.	`Markdown`