# Callout

> A docs aside for the one thing a reader must not miss: a note, a tip, a warning or a danger, tinted lightly in its kind's colour and opened by the kind's icon and label.

```ts
import { Callout } from "@sdxc/ui/docs";
```

Renders the aside: a 6% tint with a 30% border of the kind's colour, a small radius,
and a heading line led by the glyph in the kind's colour. Text keeps the page's ink in
both themes, so a long callout reads like the prose around it.

## Examples

```tsx
<Callout kind="warning" label={t("callout.warning")}>Rotate the key before you deploy.</Callout>
```

```tsx
<Callout kind="tip" label={t("callout.tip")} title="Faster local runs">Pass `--watch`.</Callout>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `kind` | `"note" \| "tip" \| "warning" \| "danger"` |  |
| `label` | `string` | The kind's name in the reader's language ("Note", "Warning"). It is the aside's accessible name and its visible heading when no `title` is given. |
| `title?` | `string` | A specific heading that replaces the label on screen; the accessible name keeps both. |
| `children` | `RemixNode` |  |

Also accepts everything in `Omit<TagProps<"aside">, "title">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Kind` | `"note" \| "tip" \| "warning" \| "danger"` | How serious the aside is, from adding context to warning of loss. |