Hakumi :: Rails ViewComponents

Button Types

There are primary, default, dashed, text, and link button styles in Hakumi Components.

Link Button

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary)) { "Primary Button" } %>
  <%= render(Hakumi::Button::Component.new(type: :default)) { "Default Button" } %>
  <%= render(Hakumi::Button::Component.new(type: :dashed)) { "Dashed Button" } %>
  <%= render(Hakumi::Button::Component.new(type: :text)) { "Text Button" } %>
  <%= render(Hakumi::Button::Component.new(type: :link, href: "#")) { "Link Button" } %>
<% end %>

Sizes

Hakumi Components supports a default button size as well as large and small sizes.

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary, size: :large)) { "Large" } %>
  <%= render(Hakumi::Button::Component.new(type: :primary, size: :middle)) { "Default" } %>
  <%= render(Hakumi::Button::Component.new(type: :primary, size: :small)) { "Small" } %>
<% end %>

A loading indicator can be added to a button by setting the loading property on the Button.

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary, loading: true)) { "Loading" } %>
  <%= render(Hakumi::Button::Component.new(type: :primary, size: :small, loading: true)) { "Loading" } %>
  <%= render(Hakumi::Button::Component.new(type: :default, loading: true)) { "Loading" } %>
<% end %>

Disabled

To mark a button as disabled, add the disabled property to the Button.

Link(Disabled)

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary, disabled: true)) { "Primary(Disabled)" } %>
  <%= render(Hakumi::Button::Component.new(type: :default, disabled: true)) { "Default(Disabled)" } %>
  <%= render(Hakumi::Button::Component.new(type: :text, disabled: true)) { "Text(Disabled)" } %>
  <%= render(Hakumi::Button::Component.new(type: :link, href: "#", disabled: true)) { "Link(Disabled)" } %>
<% end %>

Danger Buttons

Danger is a property of button and can be used on any type of button.

Link Danger

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary, danger: true)) { "Primary Danger" } %>
  <%= render(Hakumi::Button::Component.new(type: :default, danger: true)) { "Default Danger" } %>
  <%= render(Hakumi::Button::Component.new(type: :dashed, danger: true)) { "Dashed Danger" } %>
  <%= render(Hakumi::Button::Component.new(type: :text, danger: true)) { "Text Danger" } %>
  <%= render(Hakumi::Button::Component.new(type: :link, href: "#", danger: true)) { "Link Danger" } %>
<% end %>

Block Button

block property will make the button fit to its parent width.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle)) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary, block: true)) { "Primary Block" } %>
  <%= render(Hakumi::Button::Component.new(type: :default, block: true)) { "Default Block" } %>
<% end %>

Icon Buttons

Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button.

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary, icon: :search)) { "Search" } %>
  <%= render(Hakumi::Button::Component.new(type: :default, icon: :search)) %>
  <%= render(Hakumi::Button::Component.new(type: :dashed, icon: :search)) { "Search" } %>
<% end %>

Button API

Prop	Type	Default	Description
`type`	`:primary \| :default \| :dashed \| :text or :link`	`:default`	Visual style of the button.
`size`	`:small \| :middle or :large`	`:middle`	Control padding/height of the button.
`html_type`	`:button \| :submit or :reset`	`:button`	Native type applied when rendering a <button>.
`href`	`String`	`-`	When present the button renders as an anchor tag.
`disabled`	`Boolean`	`false`	Disables interactions. Anchor buttons receive aria-disabled.
`loading`	`Boolean`	`false`	Shows the loading spinner and disables clicks.
`danger`	`Boolean`	`false`	Applies danger styling.
`block`	`Boolean`	`false`	Expands button to 100% width.
`icon`	`Symbol or ViewComponent`	`-`	Icon rendered before the label (or alone when no content).
`content slot`	`Slot`	`-`	Button label.
`**html_options`	`Keyword args`	`-`	Extra attributes merged to the wrapper element. Pass as kwargs (e.g., `class:`, `style:`, `data:`).