Hakumi :: Rails ViewComponents

Basic

Simplest usage. Badge will be hidden when count is 0, but we can show it by setting showZero.

⁵ ⁰

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Badge::Component.new(count: 5)) do %>
    <%= render(Hakumi::Avatar::Component.new(shape: :square, size: 42)) %>
  <% end %>

  <%= render(Hakumi::Badge::Component.new(count: 0, show_zero: true)) do %>
    <%= render(Hakumi::Avatar::Component.new(shape: :square, size: 42)) %>
  <% end %>

  <%= render(Hakumi::Badge::Component.new(count: 0, icon: :clock_circle)) do %>
    <%= render(Hakumi::Avatar::Component.new(shape: :square, size: 42)) %>
  <% end %>
<% end %>

Standalone

Used in standalone when children are empty.

²⁵ ⁴ ⁹⁹⁺

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Badge::Component.new(count: 25)) %>
  <%= render(Hakumi::Badge::Component.new(count: 4, style: "background-color: #fff; color: #999; box-shadow: 0 0 0 1px #d9d9d9 inset")) %>
  <%= render(Hakumi::Badge::Component.new(count: 109, style: "background-color: #52c41a")) %>
<% end %>

Overflow Count

Max count to show. Default is 99.

⁹⁹ ⁹⁹⁺ ¹⁰⁺ ⁹⁹⁹⁺

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Badge::Component.new(count: 99)) do %>
    <%= render(Hakumi::Avatar::Component.new(shape: :square, size: 42)) %>
  <% end %>

  <%= render(Hakumi::Badge::Component.new(count: 100)) do %>
    <%= render(Hakumi::Avatar::Component.new(shape: :square, size: 42)) %>
  <% end %>

  <%= render(Hakumi::Badge::Component.new(count: 99, overflow_count: 10)) do %>
    <%= render(Hakumi::Avatar::Component.new(shape: :square, size: 42)) %>
  <% end %>

  <%= render(Hakumi::Badge::Component.new(count: 1000, overflow_count: 999)) do %>
    <%= render(Hakumi::Avatar::Component.new(shape: :square, size: 42)) %>
  <% end %>
<% end %>

Red Badge

This will simply display a red badge, without a specific count.

Link something

Code

<%= render(Hakumi::Space::Component.new(size: :middle)) do %>
  <%= render(Hakumi::Badge::Component.new(dot: true)) do %>
     <%= render(Hakumi::Avatar::Component.new(shape: :square, size: 42)) %>
  <% end %>

  <%= render(Hakumi::Badge::Component.new(dot: true)) do %>
     <%= render(Hakumi::Button::Component.new(type: :link, href: "#")) do %>
       Link something
     <% end %>
  <% end %>
<% end %>

Status

Standalone badge with status.

Success Error Default Processing Warning

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :small)) do %>
  <%= render(Hakumi::Space::Component.new(size: :middle)) do %>
    <%= render(Hakumi::Badge::Component.new(status: :success)) %>
    <%= render(Hakumi::Badge::Component.new(status: :error)) %>
    <%= render(Hakumi::Badge::Component.new(status: :default)) %>
    <%= render(Hakumi::Badge::Component.new(status: :processing)) %>
    <%= render(Hakumi::Badge::Component.new(status: :warning)) %>
  <% end %>

  <%= render(Hakumi::Space::Component.new(direction: :vertical, size: :small)) do %>
    <%= render(Hakumi::Badge::Component.new(status: :success, text: "Success")) %>
    <%= render(Hakumi::Badge::Component.new(status: :error, text: "Error")) %>
    <%= render(Hakumi::Badge::Component.new(status: :default, text: "Default")) %>
    <%= render(Hakumi::Badge::Component.new(status: :processing, text: "Processing")) %>
    <%= render(Hakumi::Badge::Component.new(status: :warning, text: "Warning")) %>
  <% end %>
<% end %>

Color

Custom color.

#f50 #2db7f5 #87d068 #108ee9

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :small)) do %>
  <%= render(Hakumi::Badge::Component.new(color: "#f50", text: "#f50")) %>
  <%= render(Hakumi::Badge::Component.new(color: "#2db7f5", text: "#2db7f5")) %>
  <%= render(Hakumi::Badge::Component.new(color: "#87d068", text: "#87d068")) %>
  <%= render(Hakumi::Badge::Component.new(color: "#108ee9", text: "#108ee9")) %>
<% end %>

Badge API

Prop	Type	Default	Description
`count`	`Integer or String`	`-`	Number displayed inside the badge.
`dot`	`Boolean`	`false`	Render as a dot regardless of count.
`overflow_count`	`Integer`	`99`	Upper bound before showing an overflow suffix.
`status`	`Symbol`	`-`	Status badge style (:success, :processing, :default, :warning, :error).
`text`	`String`	`-`	Status text shown next to the badge dot.
`color`	`String`	`-`	Custom color for dot/count.
`show_zero`	`Boolean`	`false`	Whether to display when count is zero.
`icon`	`Symbol or ViewComponent`	`-`	Icon rendered instead of numeric count.
`content slot`	`Slot`	`-`	Element wrapped by the badge (optional).
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the wrapper span. Pass as kwargs (e.g., `class:`, `style:`, `data:`).