Banner

Banner Component

The Banner component displays a prominent message bar that can be optionally sticky at the top of the page and dismissible by the user. It supports multiple color themes and a customizable dismiss icon.

Example Usage

<x-banner :sticky="true" dismissible="true">
    <p>This is an important banner message.</p>
</x-banner>

Props

• sticky (bool, default: false)
  Makes the banner fixed at the top of the viewport, staying visible on scroll.

• dismissible (bool, default: false)
  Enables a close button that allows the user to dismiss the banner.

• dismissIcon (string, default: "icon-x")
  CSS class for the dismiss button icon.

• color (string, default: "default")
  Sets the background and text colors of the banner. Options: inverse, primary, secondary, info, success, warning, danger, default.

Overview

This Banner component is ideal for displaying important site-wide messages or alerts. It supports sticky positioning for persistent visibility, dismiss functionality for user control, and a variety of color themes to match different contexts or branding.