Components / content
Callout
Margin-Note Aside - ※ / Bracket Glyphs, Tone-Colored
01 Preview
02 Usage
Margin-note aside for prose. Uses ※ / bracket glyphs and tone color - not a rounded accent-bar card.
<Callout tone="note">This project shipped before the API stabilized.</Callout>
<Callout tone="warn" title="Deprecated">Use v2 of the endpoint.</Callout>Tones: note | info | warn | err. Keep to one or two per article.
title defaults to the tone's own label; pass title="" to suppress it and keep only the
glyph. tone is visual — it emits no ARIA, so add your own role/aria-live for a live
status message.
03 Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| tone | 'note' | 'info' | 'warn' | 'err' |
note |
Visual tone: sets the glyph, the label and the accent colour. It emits no ARIA — a callout is static prose, and a standing `role="alert"` would interrupt a screen reader on every render. For a live status message, pass your own `role`/`aria-live`. |
| title | React.ReactNode |
— | Header label. Defaults to the tone's name (Note / Info / Caution / Warning). |
| children | React.ReactNode |
— | — |
Also accepts every attribute of Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.
04 Import
import { Callout } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';