Components
Banner
A full-width, dismissible announcement bar with semantic tones.
php artisan blatui:add banner
🎉 BlatUI 1.7.0 is out — range datetime, semantic tones, and more.
Read the changelog
<x-ui.banner tone="primary" class="rounded-lg">
<span>🎉 BlatUI 1.7.0 is out — range datetime, semantic tones, and more.</span>
<a href="#" class="font-medium underline underline-offset-2">Read the changelog</a>
</x-ui.banner>Tones
Heads up — scheduled maintenance tonight at 2am UTC.
Your plan was upgraded to Pro.
Your trial ends in 3 days.
Payment failed — please update your method.
<div class="flex w-full flex-col gap-2">
<x-ui.banner tone="info" class="rounded-md border">Heads up — scheduled maintenance tonight at 2am UTC.</x-ui.banner>
<x-ui.banner tone="success" class="rounded-md border">Your plan was upgraded to Pro.</x-ui.banner>
<x-ui.banner tone="warning" class="rounded-md border">Your trial ends in 3 days.</x-ui.banner>
<x-ui.banner tone="danger" class="rounded-md border">Payment failed — please update your method.</x-ui.banner>
</div>API Reference
Props, slots and exposed methods for
<x-ui.banner>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone |
string
|
'default'
|
Semantic colour of the announcement bar.
default
primary
info
success
warning
danger
|
dismissible |
bool
|
true
|
Show a close button that hides the banner. |
id |
string
|
— | Stable identifier used as the localStorage key when persist is enabled. Required for persistence to work. |
persist |
bool
|
false
|
Remember the dismissal in localStorage so the banner stays closed on return. Requires id. |
Slots
| Slot | Description |
|---|---|
default |
The announcement content, centered in the bar — e.g. a message and a link or button. |
Methods
Available on the component's Alpine scope — call them from markup in the slot
(e.g. @click="…").
| Method | Description |
|---|---|
dismiss() |
Hides the banner and, when persist + id are set, records the dismissal in localStorage. |