Callout
calloutHighlights supporting guidance or warnings within document content.
Usage
Basic usage
Long text inline tip: left accent vertical edge + very light background color, title tone color, body text remains foreground readable.
Tip
Different from Alert (whole-dyed notification banner), Callout is specially designed for "pits/correct answers/tips" in articles/documents.
tsx
<Callout title="Tip" tone="tip">
Different from Alert (whole-dyed notification banner), Callout is specially designed for "pits/correct answers/tips" in articles/documents.
</Callout>Semantic Hue
tip / info / warning / success / danger Five kinds of tone, only dye accent edges and titles.
Pit
If you directly change the style in node_modules, it will be lost in the next installation.
Correct answer
Use pnpm patch to persist the patch alongside the lockfile.
Danger
This operation will clear the database, so be sure to back it up first.
tsx
<>
<Callout tone="warning" title="Pit">If you directly change the style in node_modules, it will be lost in the next installation.</Callout>
<Callout tone="success" title="Correct answer">Use pnpm patch to persist the patch alongside the lockfile.</Callout>
<Callout tone="danger" title="Danger">This operation will clear the database, so be sure to back it up first. </Callout>
</>Custom icon
The icon slot comes with any ReactNode, the same color as the title.
Tips
showcase file shape can be copied directly from score-ring.showcase.tsx.
tsx
<Callout tone="tip" title="Tips" icon={<LightbulbIcon />}>
showcase file shape can be copied directly from score-ring.showcase.tsx.
</Callout>When to use
Use Callout to emphasize a tip, pitfall, correct approach, or warning within long-form documentation. Only the title and icon take the tone color; foreground body copy remains readable beside an accent border and very light tone background. Use Alert when the whole notification should carry the tone. Callout is deliberately restrained for the reading flow.
Import
ts
import { Callout } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| tone | "tip"|"info"|"warning"|"success"|"danger" | "tip" | Tip/info use the primary color; warning, success, and danger use their semantic tones. |
| className | string | — | Forwarded to the root container. |
Slots
| Slot | Type | Description |
|---|---|---|
| icon | ReactNode | Caller-provided emoji or SVG; the design system does not bind an icon library. |
| title | ReactNode | Tone-colored title. |
| children | ReactNode | Readable foreground body content. |
Example
tsx
<Callout tone="warning" icon="⚠️" title="Caution">
This step rewrites existing data. Create a backup first.
</Callout>
<Callout tone="danger" title="Pitfall">
A bare <code>var(--primary)</code> value does not resolve in SVG fill; include the --color- prefix.
</Callout>Usage guidelines
- Callout is presentational and consumes semantic tokens, including success, warning, and danger. Change theme tokens instead of applying inline color overrides.
- When both
titleandiconare absent, only the body renders, which suits a single understated note.
Related
—
Playground
Tip
The text content remains foreground readable, only the title and accent are colored tone.
<Callout tone="tip" title="Tip">Text content</Callout>