Components

Callout

This is a callout component that can be used to draw attention to important information.

Props

Code
 
type CalloutProps = {
  type: "note" | "info" | "tip" | "danger" | "caution";
  children: ReactNode;
  title?: string;
  className?: string;
  icon?: boolean;
};

Note

Code
 
<Callout type="note" title="Hey, listen!">
  This draws attention to important information.
</Callout>

Info

Code
 
<Callout type="info" title="It's safe to use the info">
  This adds info to your content.
</Callout>

Tip

Code
 
<Callout type="tip" title="You'll be successful">
  If you choose to be.
</Callout>

Danger

Code
 
<Callout type="danger" title="But some things are dangerous">
  It's dangerous to go alone, take this.
</Callout>

Caution

Code
 
<Callout type="caution" title="So, better show a warning">
  This raises a warning to watch out for.
</Callout>

Variations

Callouts can be customized by omitting the title or icon:

Code
 
<Callout type="note">
  Without a title
</Callout>

<Callout type="note" icon={false} title="Without an icon">
  You can hide the icon while keeping the title
</Callout>

<Callout type="note" icon={false}>
  Or have neither title nor icon
</Callout>