Zuplo

​Callout

This documentation is for the preview version of the Dev Portal. If you are not part of the preview program, please refer to the current Dev Portal docs.

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

Hot tip

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;
};
ts

​Note

Hey, listen!

This draws attention to important information.

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

​Info

It's safe to use the info

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

​Tip

You'll be successful

If you choose to be.

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

​Danger

But some things are dangerous

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

​Caution

So, better show a warning

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