Zudoku
General

Callout

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

Import

tsxCode
import { Callout } from "zudoku/ui/Callout";

Component Properties

The properties of the component.

type
required
"note" | "tip" | "info" | "caution" | "danger"
title
string
className
string
icon
boolean

Hot tip

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

Note

Hey, listen!

This draws attention to important information.

tsxCode
<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.

tsxCode
<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.

tsxCode
<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.

tsxCode
<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.

tsxCode
<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

tsxCode
<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