Callout

Highlight notes, tips, warnings, and destructive guidance inside documentation.

Use Callout when a paragraph needs more attention than normal prose but should still stay inside the reading flow.

For Markdown directive syntax such as :::tip, see Admonitions.

Import

When title is omitted, the callout renders as a compact inline message with an icon and body content.

When using a hosted coding plan, follow the tutorial before configuring a dedicated endpoint.

Add title when the message needs a short heading. The icon and title share the first row, while the content appears below.

Document the default behavior

The note variant is a safe default for implementation details, caveats, and editorial guidance.

Use type to match the intent of the message.

Note

Use notes for neutral context, implementation details, and caveats that do not require immediate action.

Tip

Use tips for recommended workflows, shortcuts, or patterns that help readers complete a task more smoothly.

Warning

Use warnings when a choice can cause confusing behavior, broken output, or additional setup work.

Danger

Use danger callouts for destructive actions, security-sensitive steps, or irreversible changes.

Callouts accept normal MDX content.

Keep examples actionable

Include the smallest working command first:

pnpm add @prosefly/astro-components

Then explain optional configuration after the command.

Prop	Type	Default	Notes
`title`	`string`	none	Optional heading shown above the body content.
`type`	`'note' \| 'tip' \| 'warning' \| 'danger'`	`'note'`	Changes the icon, color, border, and background treatment.

Callouts are static content containers. They do not collapse, dismiss, or add client-side behavior.

Last updated Aug 12, 2026