# Callout

Highlight information readers should not miss.

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

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

```mdx
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>

```mdx
<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>

```mdx
<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>

````mdx
<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 |