Callout

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.

<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 titles

Each type includes a default title when you do not set title.

Type	Default title
`info`	`Info`
`tip`	`Tip`
`warning`	`Warning`
`danger`	`Danger`
`success`	`Success`

Default behavior

If you omit type, Callout uses the info style.

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

Customize the header

Set a custom title and icon

Use title and icon when the default label or icon is not specific enough.

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

Set a custom accent color

Use color to override the accent color.

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

Props

Prop	Description	Type	Default
`type`	Visual style preset for title, icon, and accent color.	`"warning" \| "info" \| "tip" \| "danger" \| "success"`	`"info"`
`title`	Header text shown above the callout body.	`string`	Type-based default title
`icon`	Icon name to replace the default type icon.	`string`	Type-based default icon
`color`	Custom accent color value.	`string`	Type-based default color