Callouts

Highlight notes, warnings, and other important information

Use a named callout for short information that should stand out. <Success> is an alias for <Check>.

​

Usage

<Note>Useful context.</Note>
<Info>Neutral information.</Info>
<Tip>A helpful suggestion.</Tip>
<Warning>Something needs attention.</Warning>
<Check>Something worked.</Check>
<Danger>A risky action.</Danger>

<Callout icon="sparkles" color="#8B5CF6">
  A custom callout.
</Callout>

Named callouts also accept emoji and type. <Callout> accepts icon, iconType, and color.

​

Example

Useful context.

Neutral information.

A helpful suggestion.

Something needs attention.

Something worked.

A risky action.

A custom callout.