Hakumi :: Rails ViewComponents

Basic Float Buttons

Default and square styles.

Code

<%= render Hakumi::FloatButton::Component.new(icon: :plus, placement: :bottom_right) %>
<%= render Hakumi::FloatButton::Component.new(icon: :edit, shape: :square, placement: :bottom_left) %>

Tooltip + Badge

Descriptions with tooltips and badge counts.

Code

<%= render Hakumi::FloatButton::Component.new(
      icon: :question,
      description: "Help",
      tooltip: "Need help?",
      badge: { count: 8 },
      shape: :square,
      placement: :bottom_right
    ) %>

<%= render Hakumi::FloatButton::Component.new(
      icon: :bell,
      description: "Alerts",
      tooltip: "Latest alerts",
      type: :primary,
      shape: :square,
      placement: :bottom_left
    ) %>

Placements

All four presets rendered within inline cards.

Code

<%= render Hakumi::FloatButton::Component.new(icon: :compass, tooltip: "Top left", placement: :top_left) %>
<%= render Hakumi::FloatButton::Component.new(icon: :compass, tooltip: "Top right", placement: :top_right) %>
<%= render Hakumi::FloatButton::Component.new(icon: :compass, tooltip: "Bottom left", placement: :bottom_left) %>
<%= render Hakumi::FloatButton::Component.new(icon: :compass, tooltip: "Bottom right", placement: :bottom_right) %>

Group (Hover)

Floating action menu that expands on hover.

Code

<%= render Hakumi::FloatButton::Group::Component.new(
  tooltip: "Top actions",
  trigger: :hover,
  expand_direction: :top,
  placement: :bottom_right,
  items: [
    { icon: :edit, tooltip: "Edit" },
    { icon: :copy, tooltip: "Duplicate" },
    { icon: :delete, tooltip: "Delete", type: :primary }
  ]
) %>

<%= render Hakumi::FloatButton::Group::Component.new(
  tooltip: "Bottom actions",
  trigger: :hover,
  expand_direction: :bottom,
  placement: :top_left,
  items: [
    { icon: :upload, tooltip: "Upload" },
    { icon: :download, tooltip: "Download" },
    { icon: :setting, tooltip: "Settings", type: :primary }
  ]
) %>

<%= render Hakumi::FloatButton::Group::Component.new(
  tooltip: "Left actions",
  trigger: :hover,
  expand_direction: :left,
  placement: :top_right,
  items: [
    { icon: :plus, tooltip: "New" },
    { icon: :calendar, tooltip: "Schedule" },
    { icon: :mail, tooltip: "Share", type: :primary }
  ]
) %>

<%= render Hakumi::FloatButton::Group::Component.new(
  tooltip: "Right actions",
  trigger: :hover,
  expand_direction: :right,
  placement: :bottom_left,
  items: [
    { icon: :question, tooltip: "Help" },
    { icon: :info_circle, tooltip: "Info" },
    { icon: :message, tooltip: "Contact", type: :primary }
  ]
) %>

Group (Click)

Menu controlled via click trigger.

Code

<%= render Hakumi::FloatButton::Group::Component.new(
      tooltip: "File actions",
      trigger: :click,
      default_open: true,
      placement: :bottom_right,
      items: [
        { icon: :upload, tooltip: "Upload" },
        { icon: :share_alt, tooltip: "Share" },
        { icon: :setting, tooltip: "Settings", type: :primary }
      ]
    ) %>

Cluster sandbox

Full-page layout where two FloatButton::Group instances share the same corner via GroupCluster.

Code

<div class="floatbutton-sandbox">
  <div class="floatbutton-sandbox__content">
    <div class="floatbutton-sandbox__text">
      <%= render Hakumi::Typography::Title::Component.new(level: 3) do %>
        Support shortcuts
      <% end %>
      <%= render Hakumi::Typography::Paragraph::Component.new(type: :secondary) do %>
        This mock layout shows how multiple FloatButton groups can share the same corner using
        <code>Hakumi::FloatButton::GroupCluster</code>.
      <% end %>
    </div>
    <%= render Hakumi::FloatButton::GroupCluster::Component.new(
          placement: :bottom_right,
          groups: [
            {
              trigger: :click,
              type: :primary,
              icon: :customer_service,
              tooltip: "Support team",
              items: [
                { icon: :comment, tooltip: "Live chat" },
                { icon: :phone, tooltip: "Request a call" },
                { icon: :mail, tooltip: "Send email" }
              ]
            },
            {
              trigger: :hover,
              type: :default,
              icon: :setting,
              tooltip: "Quick actions",
              expand_direction: :top,
              items: [
                { icon: :upload, tooltip: "Upload" },
                { icon: :download, tooltip: "Download" },
                { icon: :share_alt, tooltip: "Share" }
              ]
            }
          ]
        ) %>
  </div>
</div>

FloatButton API

Prop	Type	Default	Description
`icon`	`Symbol or ViewComponent`	`:plus`	Icon rendered inside the button.
`description`	`String`	`-`	Optional label displayed next to the icon.
`tooltip`	`String`	`-`	Aria-label/title for accessibility.
`href`	`String`	`-`	Render as anchor linking to URL.
`target`	`String`	`-`	Anchor target (e.g., _blank).
`shape`	`:circle or :square`	`:circle`	Button shape.
`type`	`:default or :primary`	`:default`	Color theme.
`danger`	`Boolean`	`false`	Use danger styling.
`badge`	`Hash`	`-`	Pass-through options for `Hakumi::Badge::Component`.
`floating`	`Boolean`	`true`	Enable fixed positioning at offset.
`placement`	`:bottom_right \| :bottom_left \| :top_right or :top_left`	`:bottom_right`	Preset offsets when floating.
`offset`	`Hash`	`-`	Custom offset values merged with placement.
`button_options`	`Hash`	`{}`	Additional attributes merged into inner button (e.g., data-action).
`content slot`	`Slot`	`-`	Custom inner content.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the root element. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

FloatButton::BackTop API

Prop	Type	Default	Description
`icon`	`Symbol or ViewComponent`	`:vertical_align_top`	Icon displayed inside.
`tooltip`	`String`	`"Back to top"`	Aria label / hover tooltip.
`visibility_height`	`Integer`	`400`	Scroll distance before button appears.
`target_selector`	`String`	`window`	CSS selector for scroll container.
`floating`	`Boolean`	`true`	Enable fixed positioning.
`placement`	`FloatButton placements`	`:bottom_right`	Preset offsets.
`offset`	`Hash`	`-`	Custom offset overrides.
`button_options`	`Hash`	`{}`	Extra attributes merged into inner button.
`**html_options`	`Keyword args`	`-`	Wrapper attributes. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

FloatButton::Group API

Prop	Type	Default	Description
`icon`	`Symbol or ViewComponent`	`:plus`	Trigger icon.
`tooltip`	`String`	`-`	Trigger tooltip.
`shape`	`:circle or :square`	`:circle`	Group button shape.
`type`	`:default or :primary`	`:default`	Trigger theme.
`trigger`	`:hover or :click`	`:click`	Expansion trigger type.
`open`	`Boolean`	`-`	Controlled open state (with :click trigger).
`default_open`	`Boolean`	`false`	Initial open state for uncontrolled groups.
`expand_direction`	`:top \| :right \| :bottom or :left`	`:top`	Direction actions appear.
`items`	`Array of Hashes`	`[]`	Collection of FloatButtons rendered automatically.
`floating`	`Boolean`	`true`	Enable fixed positioning.
`placement`	`FloatButton placements`	`:bottom_right`	Preset offsets.
`offset`	`Hash`	`-`	Custom offset overrides.
`button_options`	`Hash`	`{}`	Extra attributes for trigger button.
`content slot`	`Slot`	`-`	Custom body instead of `items`.
`**html_options`	`Keyword args`	`-`	Container attributes. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

FloatButton::GroupCluster API

Utility wrapper that aligns multiple `FloatButton::Group` instances without raw HTML. Pass each group as a hash (same props as Group) or as a ready-made component.

Prop	Type	Default	Description
`groups`	`Array[Hash or Component]`	`[]`	Collection of group definitions or components to render.
`placement`	`FloatButton placements`	`:bottom_right`	Base placement when `floating: true`.
`offset`	`Hash`	`-`	Custom offsets merged with placement.
`direction`	`:horizontal or :vertical`	`:horizontal`	Orientation for arranging child groups.
`gap`	`:small \| :middle \| :large \| Numeric or String`	`:middle`	Spacing between groups.
`floating`	`Boolean`	`true`	Use fixed positioning; set false to embed cluster inline.
`**html_options`	`Keyword args`	`-`	Additional wrapper attributes (pass as kwargs like `class:`, `style:`, `data:`).