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
| Prop | Type | Default |
|---|---|---|
title | string | none |
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.
| Token | Used For |
|---|---|
--pl-info, --pl-info-ink, --pl-info-soft | Default note palette |
--pl-success, --pl-success-ink, --pl-success-soft | Default tip palette |
--pl-warning, --pl-warning-ink, --pl-warning-soft | Default warning palette |
--pl-danger, --pl-danger-ink, --pl-danger-soft | Default 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