# Callout

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

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

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](/docs/essentials/admonitions/).

## Import

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

## Basic Usage

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

```mdx
<Callout type="warning">
  When using a hosted coding plan, follow the tutorial before configuring a
  dedicated endpoint.
</Callout>
```

<Callout type="warning">
  When using a hosted coding plan, follow the tutorial before configuring a
  dedicated endpoint.
</Callout>

## With Title

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

```mdx
<Callout type="note" title="Document the default behavior">
  The note variant is a safe default for implementation details, caveats, and
  editorial guidance.
</Callout>
```

<Callout type="note" title="Document the default behavior">
  The note variant is a safe default for implementation details, caveats, and
  editorial guidance.
</Callout>

## Variants

Use `type` to match the intent of the message.

<Callout type="note" title="Note">
  Use notes for neutral context, implementation details, and caveats that do not
  require immediate action.
</Callout>

<Callout type="tip" title="Tip">
  Use tips for recommended workflows, shortcuts, or patterns that help readers
  complete a task more smoothly.
</Callout>

<Callout type="warning" title="Warning">
  Use warnings when a choice can cause confusing behavior, broken output, or
  additional setup work.
</Callout>

<Callout type="danger" title="Danger">
  Use danger callouts for destructive actions, security-sensitive steps, or
  irreversible changes.
</Callout>

## Rich Content

Callouts accept normal MDX content.

<Callout type="tip" title="Keep examples actionable">
  Include the smallest working command first:

  ```sh
  pnpm add @prosefly/astro-components
  ```

  Then explain optional configuration after the command.
</Callout>

## Props

| 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. |

## Behavior

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