Callout
Highlight important information or guide users toward key actions
Basic Usage
Basic callout with icon, heading and text:
Upcoming maintenance
Our servers will be undergoing scheduled maintenance this Sunday from 2 AM - 5 AM UTC. Some services may be temporarily unavailable.
Learn more
<neura::callout icon="clock">
<neura::callout.heading>Upcoming maintenance</neura::callout.heading>
<neura::callout.text>
Our servers will be undergoing scheduled maintenance...
<neura::callout.link href="#">Learn more</neura::callout.link>
</neura::callout.text>
</neura::callout>Icon Inside Heading
For a more compact layout, place the icon inside the heading:
Policy update
We've updated our Terms of Service and Privacy Policy. Please review them to stay informed.
<neura::callout>
<neura::callout.heading icon="newspaper">Policy update</neura::callout.heading>
<neura::callout.text>We've updated our Terms of Service...</neura::callout.text>
</neura::callout>With Actions
Add action buttons to provide users with clear next steps:
Subscription expiring soon
Your current plan will expire in 3 days. Renew now to avoid service interruption and continue accessing premium features.
<neura::callout icon="clock">
<neura::callout.heading>Subscription expiring soon</neura::callout.heading>
<neura::callout.text>Your current plan will expire...</neura::callout.text>
<x-slot name="actions">
<neura::button>Renew now</neura::button>
<neura::button variant="ghost">View plans</neura::button>
</x-slot>
</neura::callout>Inline Actions
Use the inline prop to display actions inline with the callout:
Your package is delayed
Payment issue detected
Your last payment attempt failed. Update your billing details to prevent service interruption.
<neura::callout icon="cube" variant="secondary" inline>
<neura::callout.heading>Your package is delayed</neura::callout.heading>
<x-slot name="actions">
<neura::button>Track order</neura::button>
</x-slot>
</neura::callout>Variants
Different color variants for different contexts:
Primary variant
This is the default primary variant. Adapts to your configured primary color.
Secondary variant
Use for general information or notifications.
Info variant
Use for informational messages or tips.
Success variant
Use to indicate successful operations.
Warning variant
Use to warn users about potential issues.
Danger variant
Use for critical errors or important warnings.
Dismissible
Add a close button using the controls slot:
Upcoming meeting at 10:00 AM
Unusual login attempt
We detected a login from a new device. If this wasn't you, secure your account immediately.
<neura::callout icon="bell" inline x-data="{ visible: true }" x-show="visible">
<neura::callout.heading>Upcoming meeting</neura::callout.heading>
<x-slot name="controls">
<neura::button icon="x-mark" variant="ghost" x-on:click="visible = false" />
</x-slot>
</neura::callout>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | string | null | Icon name to display at the start of the callout |
| variant | string | primary | Color variant (primary, secondary, info, success, warning, danger). Colors adapt to your theme configuration. |
| inline | boolean | false | Display content and actions inline |
Slots
| Slot | Description |
|---|---|
| default | Main content (heading and text) |
| actions | Action buttons |
| controls | Control buttons (like close button) |