Banner Component

The Banner component displays important announcements, promotions, or messages at the top of your page. It supports countdown timers, action buttons, and dismissible functionality.

Usage

The simplest way to use the banner component:

<x-banner>
    This is an important announcement.
</x-banner>

Variants

The banner component supports six color variants:

<x-banner variant="default">Default banner</x-banner>
<x-banner variant="primary">Primary banner</x-banner>
<x-banner variant="info">Info banner</x-banner>
<x-banner variant="success">Success banner</x-banner>
<x-banner variant="warning">Warning banner</x-banner>
<x-banner variant="danger">Danger banner</x-banner>

Dismissible Banners

Make banners dismissible by setting the isDismissible prop to true:

<x-banner :isDismissible="true" variant="info">
    You can close this banner.
</x-banner>

With Action Button

Add an action button using the button and href props:

<x-banner variant="primary" button="Learn More" href="/features">
    Check out our new features!
</x-banner>

With Livewire Action

Use Livewire directives for dynamic actions:

<x-banner variant="warning" button="Verify Now" wire:click="verifyEmail">
    Please verify your email address.
</x-banner>

With Countdown Timer

Add a countdown timer using the endDate prop. The banner will automatically hide when the timer expires:

<x-banner 
    variant="success" 
    button="Shop Now" 
    href="/pricing"
    endDate="2025-12-31T23:59:59Z">
    🎉 Special offer! Save 50% - Limited time only!
</x-banner>

Combined Features

You can combine timer, button, and dismissible features:

<x-banner 
    variant="primary" 
    :isDismissible="true"
    button="Get Started" 
    href="/register"
    endDate="2025-12-25T00:00:00Z">
    🎄 Holiday sale! Register now and save 30%!
</x-banner>

Props Reference

Prop	Type	Default	Description
variant	string	default	Visual style variant. Options: default, primary, info, success, warning, danger
isDismissible	bool	false	Whether the banner can be dismissed by the user. Adds a close button.
button	string|null	null	Text label for an optional action button. Combine with href for links, or pass wire:click directly for Livewire actions.
href	string|null	null	Optional URL for the button. When provided, the button renders as a link.
endDate	string|null	null	Optional countdown timer end date in ISO 8601 format (e.g., 2025-12-31T23:59:59Z). The banner will automatically hide when the timer expires. Shows days, hours, minutes, and seconds.
wire:click	string	-	Pass Livewire directives directly to the component. When button is provided without href, wire directives will be applied to the button. Supports wire:click, wire:target, wire:loading, and wire:confirm.

Slots

Slot	Description
Default slot	Banner message content. Supports text, HTML, and icons.

Countdown Timer

The countdown timer feature provides:

• Desktop view: Shows separate boxes for days, hours, minutes, and seconds
• Mobile view: Shows a condensed format with days and hours only
• Auto-hide: Banner automatically hides when the countdown reaches zero
• Format: Use ISO 8601 date format (e.g., 2025-12-31T23:59:59Z)

References

Category	Path / Name	Description
Component	resources/views/components/banner.blade.php	Banner component file

For the detailed documentation, please visit the Penguin UI Banners.