Fluxon.Components.Alert (Fluxon v2.0.0)

A versatile alert component for displaying status messages, notifications, and interactive feedback. Built with accessibility and flexibility in mind, it provides a comprehensive solution for communicating important information through visually distinct and accessible alerts.

Flash Messages

The alert component is not intended to replace Phoenix's flash messages. For a similar aesthetic in flash messages, it's recommended to apply the alert component's styles to the original <.flash /> component.

Usage

The component can be used with simple text content for straightforward messages:

<.alert>Simple alert message</.alert>

Visual Colors

The component supports different visual styles through the color attribute, each designed for specific types of messages:

<.alert color="info" title="Update Available">
  A new version of the application is ready to install.
</.alert>

<.alert color="success" title="Order Confirmed">
  Your order has been successfully processed.
</.alert>

<.alert color="warning" title="Session Expiring">
  Your session will expire in 5 minutes.
</.alert>

<.alert color="danger" title="Connection Lost">
  Unable to connect to the server.
</.alert>

Each color comes with its own color scheme and icon, optimized for both light and dark modes:

  • primary: Primary styling for general messages
  • info: Blue accents for informational messages
  • success: Green accents for success messages
  • warning: Amber accents for warning messages
  • danger: Red accents for error messages

Content Structure

Alerts can display content in multiple ways to match your messaging needs:

Simple Text

For basic messages without additional context:

<.alert>Your changes have been saved.</.alert>

With Title

For messages that need a clear heading:

<.alert title="Profile Updated">
  Your profile changes have been saved successfully.
</.alert>

With Title and Subtitle

For complex messages that need additional context:

<.alert
  title="Scheduled Maintenance"
  subtitle="System Update"
  color="info">
  The system will be unavailable on Saturday from 2 AM to 4 AM.
</.alert>

Interactive Features

Dismissible Alerts

By default, alerts include a close button. This behavior can be customized:

<!-- Non-dismissible alert -->
<.alert hide_close>
  This alert cannot be dismissed
</.alert>

<!-- Custom close behavior -->
<.alert on_close={JS.push("handle_alert_close", value: %{id: @alert_id})}>
  This alert triggers a custom event when closed
</.alert>

Custom Actions

Alerts can include interactive elements for user actions:

<.alert
  color="warning"
  title="Unsaved Changes"
  on_close={JS.push("dismiss_warning")}>
  You have unsaved changes that will be lost.

  <div class="mt-4 flex space-x-2">
    <.button size="xs">Save Changes</.button>
    <.button size="xs" color="ghost">Discard</.button>
  </div>
</.alert>

Icon Customization

The component provides flexibility in how icons are displayed:

<!-- No icon -->
<.alert hide_icon>
  Message without icon
</.alert>

<!-- Custom icon -->
<.alert>
  <:icon>
    <.icon name="hero-bell" class="size-5" />
  </:icon>
  Custom notification icon
</.alert>

Summary

Components

alert(assigns)

Renders an alert component with support for various visual styles and interactive elements.

Components

alert(assigns)

Renders an alert component with support for various visual styles and interactive elements.

Attributes

  • id (:string) - The unique identifier for the alert element. If not provided, a random ID will be generated.

  • class (:any) - Additional CSS classes to apply to the alert element. These are merged with the component's base classes and color-specific styles.

    Defaults to nil.

  • title (:string) - The main heading text of the alert. When provided, creates a title section styled according to the chosen color's color scheme.

    Defaults to nil.

  • subtitle (:string) - Secondary text displayed alongside the title. Only rendered when either title or subtitle is present.

    Defaults to nil.

  • color (:string) - The visual style color of the alert. Affects the entire component's appearance:

    • default: White background with default accents
    • primary: Light gray background with primary accents
    • danger: Light red background with danger accents
    • success: Light green background with success accents
    • info: Light blue background with info accents
    • warning: Light amber background with warning accents

    Defaults to "default".

  • hide_icon (:boolean) - When true, hides the alert's status icon. Defaults to false.

  • hide_close (:boolean) - When true, hides the alert's close button. Defaults to false.

  • on_close (Phoenix.LiveView.JS) - LiveView JS commands to execute when the alert is closed. Defaults to %Phoenix.LiveView.JS{ops: []}.

Slots

  • inner_block - The main content to be displayed in the alert body. Renders with color-specific text colors.
  • icon - Optional custom icon to replace the default status icon. If not provided and hide_icon is false, a default icon based on the variant will be shown.