# Callout

Inline note / hint / warning / important block. Lighter than an Alert — used inside page bodies for disclaimers, agent-targeted hints, deprecation notes, and similar asides.

[View examples](https://marsam.rahhal.app/components/callout) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/callout`

**Category:** `feedback`

## Variants

| variant | purpose |
| --- | --- |
| note (default) | neutral aside / disclaimer |
| hint | tip / agent-targeted nudge |
| warning | soft caution — not an action failure |
| important | must-read constraint or breaking change |

## Props

| prop | type | purpose |
| --- | --- | --- |
| variant | note | hint | warning | important | color + tone |
| label | ReactNode | leading badge text — pass null to omit |
| labelVariant | Badge variant | override auto-picked badge style |
| icon | ReactNode | optional leading icon before the label |

## When to use

Use `Callout` for asides *inside* page bodies (docs, settings, catalog hints). Use `Alert` for status *of an action* (success, failure). Use `Toast` for transient feedback. The three are intentionally separate.