Astro Components
Type to search documentation.

Callout

Highlight information readers should not miss.

Use Callout when a reader needs to notice something before continuing: requirements, safe defaults, limits, destructive actions, or shortcuts. Keep callouts short enough to scan without breaking the page flow.

Import

import { Callout } from '@prosefly/astro-components';

Write A Useful Callout

<Callout type="note" title="Document the default behavior">
Notes are a safe default for implementation details, caveats, and extra
context.
</Callout>

Choose The Right Type

<Callout type="note" title="Note">
Use `note` for neutral context, defaults, and implementation details.
</Callout>
<Callout type="tip" title="Tip">
Use `tip` for recommended workflows, shortcuts, and better ways to complete
the same task.
</Callout>
<Callout type="warning" title="Warning">
Use `warning` when a choice can cause broken output, confusing behavior, or
extra setup work.
</Callout>
<Callout type="danger" title="Danger">
Use `danger` for destructive commands, security-sensitive steps, and
irreversible changes.
</Callout>

With Rich Content

<Callout type="tip" title="Put the action first">
Give the reader the command or decision before the explanation.
```sh
pnpm add @prosefly/astro-components
```
Add caveats only after the action is clear.
</Callout>

Props

PropTypeDefault
titlestringnone
type'note' | 'tip' | 'warning' | 'danger''note'

CSS Variables

Each callout type maps to the shared semantic palette first: note uses --pl-info-*, tip uses --pl-success-*, warning uses --pl-warning-*, and danger uses --pl-danger-*. Override the type-specific callout tokens only when callouts need to differ from badges and other components.

TokenUsed For
--pl-info, --pl-info-ink, --pl-info-softDefault note palette
--pl-success, --pl-success-ink, --pl-success-softDefault tip palette
--pl-warning, --pl-warning-ink, --pl-warning-softDefault warning palette
--pl-danger, --pl-danger-ink, --pl-danger-softDefault danger palette
--pl-callout-note-{color|ink|bg}Note-only overrides
--pl-callout-tip-{color|ink|bg}Tip-only overrides
--pl-callout-warning-{color|ink|bg}Warning-only overrides
--pl-callout-danger-{color|ink|bg}Danger-only overrides

Last updated Jul 18, 2026