` |
| Typical use | Documentation tips, deprecation notices, feature announcements | Form errors, success confirmations, warnings |
## Width & Layout
Callouts are block-level elements that fill their parent width. Control the width with Tailwind classes directly on the component:
```blade
Keep callouts short and actionable.
```
## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `string` | `'info'` | `primary` \| `info` \| `success` \| `warning` \| `danger` \| `neutral`. `primary` is a visual synonym of `info`. See [Variants & Intents](../variants-and-intents.md) for the cross-component reference. |
| `intent` | `string\|null` | `null` | Canonical name for the color axis — the same spelling Button and Badge use. Falls back to `variant` when omitted, and wins over it when both are given. |
| `icon` | `bool` | `true` | Show variant icon |
| `bordered` | `bool` | `true` | Show the surrounding 4-sided border |
| `stripe` | `bool` | `false` | Show an opt-in one-sided accent bar (off by default) |
| `animateIn` | string\|null | `null` | Entrance-reveal preset (e.g. `'fade'`, `'slide-up'`, `'scale-in'`) — inline alternative to wrapping in `
`. See [docs/animations.md](../animations.md) for the full preset list. Respects `prefers-reduced-motion: reduce`. |
| `scope` | `string` | `null` | Scoped personalization key |
## Slots
| Slot | Description |
| --- | --- |
| Default | Body text content |
| `title` | Bold heading above the body |
| `actions` | Action buttons/links below the body |
| `iconSlot` | Custom icon that overrides the variant-derived default icon |
## Accessibility
- Rendered as a plain ``: no landmark, and no live region.
A landmark would be wrong twice over. `complementary` is reserved for a self-contained
section significant to the page, and a note in the flow of the text is not that — and a
page usually already has one in its sidebar, so a second with no distinguishing name is
an accessibility failure that gets reported against the sidebar rather than against the
callout.
A live region (`role="status"`, `role="alert"`) would be wrong for the opposite reason.
This component is persistent content that is already present when the page loads, so a
live region says nothing at that moment — and then re-announces the entire callout every
time the element re-renders, though nothing about it changed. For content that genuinely
arrives and asks for attention, use [Alert](./alert.md).
- Decorative icons are `aria-hidden="true"`.
- The opt-in accent stripe, when shown, is `aria-hidden="true"`.
- No interactive elements require keyboard handling (callouts are static).
## Keyboard Interaction
This component is purely presentational and does not respond to keyboard input.
## Pitfalls
- **Don't use a callout for a single sentence — `` is the right tool.** Callouts are for multi-paragraph context that lives in flow with the page; alerts are for state announcements that interrupt.
## Design Tokens
| Token | Usage |
| --- | --- |
| `--color-wk-accent` | Info variant color |
| `--color-wk-success` | Success variant |
| `--color-wk-warning` | Warning variant |
| `--color-wk-danger` | Danger variant |
| `--padding-wk-x-lg` / `--padding-wk-y-lg` | Callout padding |
| `--radius-wk-lg` | Corner radius |
| `--border-wk-width` | Border width |
| `--font-wk-sans` | Font family |
| `--font-wk-heading-weight` | Title weight |
## Usage & Conventions
> **Prop conventions** — this component uses one or more of the shared semantic prop names (`intent` / `variant` / `tone` / `surface`). See [Prop naming conventions](/extending/prop-naming-conventions) for the canonical vocabulary, alias matrix, and decision tree.