Components

#Callout

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

There's a shortcut to use callout components in Markdown files: Admonitions.

#Props

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

This draws attention to important information.

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

tsx

This adds info to your content.

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

tsx

If you choose to be.

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

tsx

It's dangerous to go alone, take this.

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

tsx

This raises a warning to watch out for.

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

tsx