Alert - Hakumi Components

Basic

A simple alert with default info styling.

This is a simple informational alert.

Code

<%= render HakumiComponents::Alert::Component.new do %>
  This is a simple informational alert.
<% end %>

With Description

Alerts can include a description block and icon.

Success Tips

Detailed description of the alert and how to resolve it.

Code

<%= render(HakumiComponents::Alert::Component.new(
  type: :success,
  show_icon: true
)) do |alert| %>
  <% alert.with_message { "Success Tips" } %>
  <% alert.with_description { "Detailed description of the alert and how to resolve it." } %>
<% end %>

Custom Icon

Provide a custom icon to match your message.

Warning

Custom icon and description example.

Code

<%= render(HakumiComponents::Alert::Component.new(
  type: :warning,
  show_icon: true
)) do |alert| %>
  <% alert.with_icon do %>
    <%= render(HakumiComponents::Icon::Component.new(name: :smile)) %>
  <% end %>
  <% alert.with_message { "Warning" } %>
  <% alert.with_description { "Custom icon and description example." } %>
<% end %>

Closable

Users can dismiss an alert when closable is enabled.

Error

Click close to dismiss this alert.

Code

<%= render(HakumiComponents::Alert::Component.new(
  type: :error,
  closable: true,
  show_icon: true
)) do |alert| %>
  <% alert.with_message { "Error" } %>
  <% alert.with_description { "Click close to dismiss this alert." } %>
<% end %>

Programmatic Creation

Create alerts dynamically via JavaScript using HakumiComponents.renderComponent.

Code

<%= render(HakumiComponents::Space::Component.new) do %>
  <%= render(HakumiComponents::Button::Component.new(id: "prog-alert-success", type: :primary, style: "background-color: #52c41a; border-color: #52c41a;")) { "Success" } %>
  <%= render(HakumiComponents::Button::Component.new(id: "prog-alert-info", type: :primary, style: "background-color: #1677ff;")) { "Info" } %>
  <%= render(HakumiComponents::Button::Component.new(id: "prog-alert-warning", type: :primary, style: "background-color: #faad14; border-color: #faad14;")) { "Warning" } %>
  <%= render(HakumiComponents::Button::Component.new(id: "prog-alert-error", type: :primary, danger: true)) { "Error" } %>
<% end %>

<div id="programmatic-alert-target" style="margin-top: 16px; display: flex; flex-direction: column; gap: 8px;"></div>

<script>
  (() => {
    const buttons = ["success", "info", "warning", "error"]

    const wire = () => {
      if (!window.HakumiComponents?.renderComponent) return false

      const createAlert = (type) => {
        window.HakumiComponents.renderComponent("alert", {
          params: {
            type,
            message: `${type.charAt(0).toUpperCase() + type.slice(1)} Alert`,
            description: `Created dynamically at ${new Date().toLocaleTimeString()}`,
            show_icon: true,
            closable: true
          },
          target: "#programmatic-alert-target",
          mode: "destroy_on_close"
        })
      }

      buttons.forEach((type) => {
        document.getElementById(`prog-alert-${type}`)?.addEventListener("click", () => createAlert(type))
      })

      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)
  })()
</script>

Props

Prop	Type	Default	Description
`type`	`Symbol`	`:info`	Visual style of the alert
`show_icon`	`Boolean`	`nil`	Display the leading icon (defaults to true when banner is true, false otherwise)
`closable`	`Boolean`	`false`	Enable the close button
`banner`	`Boolean`	`false`	Render in banner style without rounded corners

Slots

Prop	Type	Default	Description
`icon`	`Slot`	`nil`	Custom icon element (defaults to type-based icon if show_icon is true)
`message`	`Slot`	`nil`	Main alert message (falls back to block content if not provided)
`description`	`Slot`	`nil`	Additional description text shown below the message
`action`	`Slot`	`nil`	Action button or link rendered on the right side
`close_icon`	`Slot`	`nil`	Custom close icon (only displayed when closable is true)
`content`	`Slot`	`nil`	Default slot for message content when message slot is not provided

HTML Options

Prop	Type	Default	Description
`**html_options`	`Keyword args`	`{}`	Additional HTML attributes merged into the wrapper element

JavaScript API

Access via element.hakumiComponent.api

Prop	Type	Default	Description
`close()`	`Method`	`-`	Close and remove the alert from the DOM
`setMessage(text)`	`Method`	`-`	Update the alert message text
`setDescription(text)`	`Method`	`-`	Update the alert description text
`getMessage()`	`Method`	`-`	Get the current message text
`getDescription()`	`Method`	`-`	Get the current description text