Components
Callout
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; icon?: boolean; };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
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
<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>tsx