Button - Hakumi Components

Button Types

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

Link Button

Code

<%= render(HakumiComponents::Space::Component.new(size: :middle)) do %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Primary Button" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :default)) { "Default Button" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :dashed)) { "Dashed Button" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :text)) { "Text Button" } %>
  <%= render(HakumiComponents::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(HakumiComponents::Space::Component.new(size: :middle)) do %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary, size: :large)) { "Large" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary, size: :middle)) { "Default" } %>
  <%= render(HakumiComponents::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(HakumiComponents::Space::Component.new(size: :middle)) do %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary, loading: true)) { "Loading" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary, size: :small, loading: true)) { "Loading" } %>
  <%= render(HakumiComponents::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(HakumiComponents::Space::Component.new(size: :middle)) do %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary, disabled: true)) { "Primary(Disabled)" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :default, disabled: true)) { "Default(Disabled)" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :text, disabled: true)) { "Text(Disabled)" } %>
  <%= render(HakumiComponents::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(HakumiComponents::Space::Component.new(size: :middle)) do %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary, danger: true)) { "Primary Danger" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :default, danger: true)) { "Default Danger" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :dashed, danger: true)) { "Dashed Danger" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :text, danger: true)) { "Text Danger" } %>
  <%= render(HakumiComponents::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(HakumiComponents::Space::Component.new(direction: :vertical, size: :middle)) do %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary, block: true)) { "Primary Block" } %>
  <%= render(HakumiComponents::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(HakumiComponents::Space::Component.new(size: :middle)) do %>
  <%= render(HakumiComponents::Button::Component.new(type: :primary, icon: :search)) { "Search" } %>
  <%= render(HakumiComponents::Button::Component.new(type: :default, icon: :search)) %>
  <%= render(HakumiComponents::Button::Component.new(type: :dashed, icon: :search)) { "Search" } %>
<% end %>

Props

Prop	Type	Default	Description
`type`	`Symbol`	`:default`	Visual style of the button
`size`	`Symbol`	`:middle`	Controls padding and height of the button
`shape`	`Symbol`	`:default`	Button shape variant
`html_type`	`Symbol`	`:button`	Native type attribute applied when rendering as a button element
`href`	`String`	`nil`	When present, renders the button as an anchor tag with this URL
`disabled`	`Boolean`	`false`	Disables interactions. Anchor buttons receive aria-disabled instead of disabled attribute
`loading`	`Boolean`	`false`	Shows a loading spinner and disables clicks
`danger`	`Boolean`	`false`	Applies danger styling (typically red) to indicate destructive actions
`block`	`Boolean`	`false`	Expands button to 100% width of its container
`icon`	`Symbol or ViewComponent`	`nil`	Icon rendered before the label. Pass a symbol for built-in icons or a ViewComponent for custom icons

Slots

Prop	Type	Default	Description
`content`	`Slot`	`-`	Button label content passed as a block

HTML Options

Additional HTML attributes can be passed as keyword arguments and will be merged into the root element.

Prop	Type	Default	Description
`**html_options`	`Keyword args`	`-`	Extra attributes merged to the wrapper element (e.g., class:, style:, data:, id:)

JavaScript API

Access via element.hakumiComponent.api

Prop	Type	Default	Description
`setLoading(loading)`	`Method`	`-`	Set the loading state of the button
`isLoading()`	`Method`	`-`	Check if the button is currently in loading state
`ripple(event)`	`Method`	`-`	Manually trigger the ripple effect animation