Callouts are used to highlight important information, tips, warnings, or notes inline within content. Unlike Alerts, which provide feedback in response to user actions, Callouts are static editorial annotations that draw attention to relevant context within a page.
When to Use
- To highlight important notes, tips, or warnings within documentation or content pages.
- For editorial annotations that should always be visible and not dismissible.
- When content requires contextual emphasis without interrupting the reading flow.
When Not to Use / Alternatives
- For feedback after user actions (form submission, errors, etc.) — use Alert instead.
- For temporary, dismissible messages — use Alert with
dismissible. - For brief status notifications — use Toast.
Variants
Info
Success
Warning
Danger
Primary
Secondary
Light
Dark
Without Title
Without Icon
Custom Icon
All Variants Overview
Props
| Prop | Type | Default | Description |
|---|
variant | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "info" | Color variant |
title | string | undefined | Optional heading text |
icon | string | boolean | true | Icon class, true for auto-mapped icon, false to hide |
Slots
| Slot | Description |
|---|
default | Main content of the callout |
icon | Custom icon content (overrides icon prop) |
Accessibility
- Uses
role="note" for semantic meaning - Color is never the only indicator — border position and icon reinforce the variant
- Content is always visible and not dismissible
- Works with screen readers via semantic structure (
role, heading, paragraph)