Callout

A callout to add eye-catching context to your content.

Usage

Use the default slot to display a callout component with full markdown support.

This is a callout with full markdown support. It can be used to link to another page.
This is a callout with full markdown support. It can be used to link to another page.

Icon

You can add an icon prop to display an icon on the left of the callout:

This suggests a helpful tip.
This suggests a helpful tip.

Color

You can use the color prop to change the color of the callout:

This raises a warning to watch out for.
This raises a warning to watch out for.

You can add a to prop to make it a link, an external icon will be displayed when the link is external:

Check out this documentation.
Check out this documentation.

Props

icon
string
undefined
color
string
"primary"
to
string
undefined
target
string
undefined
ui
any
{}