Callouts

Semantic callout boxes — Aside plus 7 friendly aliases (Note, Tip, Info, Check, Warning, Caution, Danger). Two APIs, one visual.

Callouts draw a reader’s eye to sidebar-worthy information — something they should act on, avoid, or double-check. Publier ships two APIs that produce the same four semantic variants:

1. Directive shorthand — :::note, :::tip, :::caution, :::danger in MDX (no import).
2. Component import — explicit <Aside> or one of the friendly aliases.

All four variants at a glance

Directive shorthand (recommended)

No import, no props — just a Markdown fence:

:::note
A standard note callout.
:::

:::tip
A helpful tip.
:::

:::caution
Proceed with care.
:::

:::danger
This action is destructive.
:::

<Aside> component

Import once for explicit usage or conditional rendering. Live examples:

import { Aside } from '@publier/shell/components';

<Aside type="note" title="Custom title">
  Use the `title` prop to replace the default header text.
</Aside>

<Aside type="tip">
  Default titles are the capitalized variant name — no `title` needed.
</Aside>

<Aside type="danger" title="Never do this">
  Deleting the production database without a snapshot.
</Aside>

Friendly aliases

Seven aliases wrap <Aside> with common names — useful for migrating from other docs platforms or for more descriptive markup:

import { Note, Info, Tip, Check, Warning, Caution, Danger } from '@publier/shell/components';

<Note>Neutral blue note.</Note>
<Tip>Green tip callout.</Tip>
<Warning>Amber warning (non-destructive).</Warning>
<Danger>Red, destructive or irreversible.</Danger>

All aliases accept an optional title prop to override the default header.

Props

<Aside>

Body content is passed as children.

Alias default titles

Behaviour

• Renders as <aside aria-label="{title}"> with a variant-specific icon and color.
• Colors pull from semantic theme tokens (--color-info, --color-success, --color-warning, --color-error) — every callout adapts to your active theme (maple, aspen, ruby, etc.).
• Zero JavaScript — pure CSS.

Related

• Full-color pattern reference → Badge.
• Larger structural alternatives → Panels, Card.