Hakumi :: Rails ViewComponents

Basic

A simple alert with default info styling.

This is a simple informational alert.

Code

<%= render Hakumi::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 Hakumi::Alert::Component.new(
  type: :success,
  message: "Success Tips",
  description: "Detailed description of the alert and how to resolve it.",
  show_icon: true
) %>

Custom Icon

Provide a custom icon to match your message.

Warning

Custom icon and description example.

Code

<%= render Hakumi::Alert::Component.new(
  type: :warning,
  message: "Warning",
  description: "Custom icon and description example.",
  icon: :smile,
  show_icon: true
) %>

Closable

Users can dismiss an alert when closable is enabled.

Error

Click close to dismiss this alert.

Code

<%= render Hakumi::Alert::Component.new(
  type: :error,
  message: "Error",
  description: "Click close to dismiss this alert.",
  closable: true,
  show_icon: true
) %>

Programmatic Creation

Create alerts dynamically via JavaScript using <code>HakumiComponents.renderComponent</code>.

Code

<%= render(Hakumi::Space::Component.new) do %>
  <%= render(Hakumi::Button::Component.new(id: "prog-alert-success", type: :primary, style: "background-color: #52c41a; border-color: #52c41a;")) { "Success" } %>
  <%= render(Hakumi::Button::Component.new(id: "prog-alert-info", type: :primary, style: "background-color: #1677ff;")) { "Info" } %>
  <%= render(Hakumi::Button::Component.new(id: "prog-alert-warning", type: :primary, style: "background-color: #faad14; border-color: #faad14;")) { "Warning" } %>
  <%= render(Hakumi::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>

Alert API

Prop	Type	Default	Description
`type`	`Symbol`	`:info`	Alert style (:success, :info, :warning, :error).
`message`	`String`	`-`	Message content when not using the default slot.
`description`	`String or ViewComponent`	`-`	Additional description text shown below the message.
`show_icon`	`Boolean`	`false`	Whether to display the leading icon.
`icon`	`Symbol or ViewComponent`	`-`	Custom icon rendered when show_icon is true.
`closable`	`Boolean`	`false`	Whether the alert can be closed.
`close_text`	`String`	`-`	Custom close button text. Automatically enables closable when provided.
`banner`	`Boolean`	`false`	Render in banner style without rounded corners.
`action`	`String or ViewComponent`	`-`	Additional action area rendered on the right.
`content slot`	`Slot`	`-`	Message content when provided as a block.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the wrapper div.

JavaScript API

Methods available on the DOM element via <code>element.hakumiAlert</code>.

Prop	Type	Default	Description
`close()`	`Function`	`-`	Closes the alert. Triggers <code>hakumi--alert:hidden</code> event.