---
title: Callout
description: A note inside the content, tinted by how much it matters.
---

```tsx
import { Callout } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function CalloutBasic() {
  return (
    <Preview block={true}>
      <Callout.Root>
        <Callout.Title>Neutral</Callout.Title>
        Description
      </Callout.Root>
      <Callout.Root tone="warning">
        <Callout.Title>Warning</Callout.Title>
        Description
      </Callout.Root>
      <Callout.Root tone="danger">
        <Callout.Title>Danger</Callout.Title>
        Description
      </Callout.Root>
    </Preview>
  );
}
```

- `danger` for a failure the reader is looking at, `warning` for something to fix, `neutral` for context.
- Never put a callout above a whole page; it belongs next to the thing it explains.
- `Callout.Title` is optional and takes the tone's colour.
- `danger` sets `role="alert"`, so screen readers announce it.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `tone?` | `"neutral" \| "warning" \| "danger"` | `"neutral"` | |

Parts: `Root`, `Title`. Other props go to the native element: `div` for `Root`, `p` for `Title`.