Copy page

General

Callout

A callout component to draw attention to important information.

Writing Markdown? Use the admonitions shorthand (:::tip) instead of the component directly.

Import

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

Note

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

Info

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

Tip

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

Danger

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

Caution

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

Sparkles

Code
<Callout type="sparkles" title="What's new">
  Highlight new features or AI-powered functionality.
</Callout>

Rocket

Code
<Callout type="rocket" title="Getting started">
  Spin up your first project in minutes.
</Callout>

Settings

Code
<Callout type="settings" title="Configuration">
  Tweak these options to match your workflow.
</Callout>

Zap

Code
<Callout type="zap" title="Performance">
  Use this pattern when latency matters.
</Callout>

Lock

Code
<Callout type="lock" title="Authentication required">
  This endpoint needs a valid API key.
</Callout>

Megaphone

Code
<Callout type="megaphone" title="Announcement">
  We've just shipped a breaking change to the v2 API.
</Callout>

Variations

Callouts can be customized by omitting the title or icon:

Or pass any React node as the icon to override the default for the chosen type:

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

<Callout type="tip" icon={<FileHeartIcon />} title="Made with love">
  The icon inherits the type's accent color.
</Callout>

Customize colors

Each callout type is driven by a single CSS variable that determines the icon, border tint, and background tint via color-mix. Override any of them in your theme's customCss to recolor a type globally:

zudoku.config.ts
export default {
  theme: {
    customCss: `
      :root {
        --callout-tip: oklch(0.65 0.18 160);
        --callout-sparkles: oklch(0.6 0.22 320);
      }
      .dark {
        --callout-tip: oklch(0.78 0.18 160);
        --callout-sparkles: oklch(0.75 0.2 320);
      }
    `,
  },
};

All available variables:

Code
--callout-note
--callout-tip
--callout-info
--callout-caution
--callout-danger
--callout-sparkles
--callout-rocket
--callout-settings
--callout-zap
--callout-lock
--callout-megaphone