# Callout

Use `Callout` for notes, warnings, and destructive or irreversible actions. The default callout uses regular Basecoat alert styling and has no icon. Warning and destructive callouts use variant colors.

## Usage

Use the component directly in MDX. ReallySimpleDocs components are available by default, so no import is required.

```tsx
<Callout title="Good to know">
  Keep normal docs pages as Markdown. Use MDX when you need components.
</Callout>
```

Set a custom Lucide icon with `icon` when the message benefits from one:

```tsx
<Callout icon="sparkles" title="Custom icon">
  Use any Lucide icon name in camelCase or kebab-case.
</Callout>
```

## Options

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `type` | `"warning"` \| `"destructive"` | `undefined` | Optional severity variant. |
| `title` | `string` | `"Note"` | Heading displayed in the alert. |
| `icon` | `string` | `undefined` | Optional Lucide icon name or custom SVG. |
| `action` | `{ label: string; href: string }` | `undefined` | Optional callout action link. |
| `class` | `string` | `""` | Extra classes applied to the alert root. |

## Examples

### Neutral

```mdx
<Callout title="Neutral">
  Use a callout when the surrounding paragraph is not enough.
</Callout>
```

### Custom icon

```mdx
<Callout icon="lightbulb" title="Custom icon">
  Add a Lucide icon when it helps explain the message.
</Callout>
```

### Action

```mdx
<Callout title="Template macros available" icon="code" action={{ label: "More", href: "#" }}>
  This component ships an optional action link for related documentation.
</Callout>
```

### Warning

```mdx
<Callout type="warning" title="Warning">
  Avoid putting app-only imports in reusable documentation examples.
</Callout>
```

### Destructive

```mdx
<Callout type="destructive" title="Destructive">
  This variant is for irreversible actions, security risks, or migration warnings.
</Callout>
```