A callout surfaces a notice next to your prose. Each type maps to a semantic token (--cpd-info, --cpd-warning, …) that drives the accent bar, the color-mix background tint and the default icon.

Variants

All five types

Note

Additional context that helps the reader.

Warning

Something needs attention before you continue.

Error

The operation failed. Retry after fixing the cause.

Success

The operation completed successfully.

Idea

A cleaner way to approach this.

callout('Additional context that helps the reader.', { type: 'info', title: 'Note' });
callout('Something needs attention before you continue.', { type: 'warning', title: 'Warning' });
callout('The operation failed. Retry after fixing the cause.', { type: 'error', title: 'Error' });
callout('The operation completed successfully.', { type: 'success', title: 'Success' });
callout('A cleaner way to approach this.', { type: 'idea', title: 'Idea' });

With and without title

Title vs. no title

A titled callout — the bold heading sits above the body.

A bare callout with no title, default info type.

callout('A titled callout — the bold heading sits above the body.', { title: 'Heads up' });
callout(`A bare callout with no title, default ${code('info')} type.`);

Custom icon

Replaced icon

Custom icon

The default icon is replaced by a custom SVG.

callout('The default icon is replaced by a custom SVG.', {
  type: 'warning',
  title: 'Custom icon',
  icon: '<svg …>…</svg>', // any inline SVG string
});

Props

Option	Type	Default	Description
content	string	—	Body text (required, first argument).
type	'info' | 'warning' | 'error' | 'success' | 'idea'	'info'	Semantic variant — drives accent bar, tint and icon.
title	string	''	Optional bold title above the body.
icon	string	auto	Raw SVG string replacing the default icon.

Notes

• Markdown passed inside content is escaped; use plain text or pre-built HTML.
• The tint uses color-mix(in oklab, var(--cpd-<type>) 10%, transparent) — one semantic token per variant, matching Plumest.