Zuplo
Components

Callout

This documentation is for the preview version of the Dev Portal. If you are using the legacy developer portal, please refer to the 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

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

Note

Hey, listen!

This draws attention to important information.

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

Info

It's safe to use the info

This adds info to your content.

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

Tip

You'll be successful

If you choose to be.

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

Danger

But some things are dangerous

It's dangerous to go alone, take this.

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

Caution

So, better show a warning

This raises a warning to watch out for.

Code(tsx)
 
<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:

Without a title

Without an icon

You can hide the icon while keeping the title

Or have neither title nor icon

Code(tsx)
 
<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>
Last modified on
TypographyIcons