BlatUI

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>