Alert

Alert Component

The Alert component displays contextual messages with optional icons, titles, and dismiss functionality. It supports different alert types like info, success, warning, and error, each with distinct colors. You can also add tooltips and custom dismiss icons.

Example Usage

<x-alert type="error" tooltip="This is an error alert" dismissible>
    This is an error alert message.
</x-alert>

Props

• title (string|null)
  Optional title text displayed prominently at the top of the alert.

• message (string|null)
  Optional message text shown below the title or alone if no title is given.

• icon (string|null)
  CSS class for an icon to display at the start of the alert (e.g., "icon-warning").

• type (string, default: "info")
  Defines the alert style and colors. Supported values: info, success, warning, error.

• tooltip (string|null)
  Adds a tooltip shown on hover over the alert container.

• dismissible (bool, default: false)
  If true, renders a close button that allows the alert to be dismissed.

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

Overview

This Alert component provides a flexible and accessible way to show status messages and notifications in your UI. It adapts its colors based on the type of message, supports icons and tooltips, and optionally allows users to dismiss it interactively.