- Components
- callout
Callout
Attention-grabbing box for tips, warnings, or notes.
Demo
This component require JS. By default we're using our own Interactive Component Library
<x-ui.callout>
This component require JS. By default we're using our own Interactive Component Library
</x-ui.callout>Installation
Shell
php artisan flexi:add calloutAPI
| Prop | Description |
|---|---|
type
(default|update|note|warning|important)
|
Defines semantic tone and default icon/intent mapping.
|
intent
(string)
|
Overrides default type intent when custom coloring is needed.
|
variant
(solid|soft|subtle|outline|default)
|
Visual style inherited from alert primitives.
|
size
(xs|sm|default|lg)
|
Controls spacing and typography density.
|
title
/ message
|
Quick title/message API when not using slot composition.
|
icon
(boolean)
|
Controls leading icon visibility. Default: true
|
iconWrapper
(string)
|
Additional classes for icon container customization.
|
Examples
Message
The data export you requested is ready!
<x-ui.callout type="note" variant="outline" intent="gray">
<x-ui.callout.description>The data export you requested is ready!</x-ui.callout.description>
<div>
<x-ui.button intent="gray" size="sm" aria-label="View data in modal">
View the Data
</x-ui.button>
</div>
</x-ui.callout>
With Title
There was a problem with your submission
Must include at least 1 number
Must include at least 2 uppercase letters
<x-ui.callout variant="soft" type="important" radius="none" class="border-l-2 border-danger">
<x-ui.callout.title text="There was a problem with your submission"/>
<x-ui.callout.description>
<p>
Must include at least 1 number
</p>
<p>
Must include at least 2 uppercase letters
</p>
</x-ui.callout.description>
<div class="pt-1">
<x-ui.button variant="outline" intent="gray" size="sm">
<span class="iconify ph--arrows-clockwise mr-2"></span>
Try again
</x-ui.button>
</div>
</x-ui.callout>