Badge - Hakumi Components

Basic

Simplest usage. Badge will be hidden when count is 0 unless show_zero is true.

⁵ ⁰

Code

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

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

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

Standalone

Badge without wrapped content for standalone indicators.

²⁵ ⁴ ⁹⁹⁺

Code

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

Overflow Count

Show max count before adding overflow suffix. Default is 99.

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

Code

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

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

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

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

Red Badge

Display a simple dot without a specific count.

Link something

Code

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

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

Status

Standalone badge with status colors.

Success Error Default Processing Warning

Code

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

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

Color

Custom color for the badge.

#f50 #2db7f5 #87d068 #108ee9

Code

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

Props

Prop	Type	Default	Description
`count`	`Integer or String`	`nil`	Number or text displayed in the badge
`dot`	`Boolean`	`false`	Render as a small dot instead of showing count
`overflow_count`	`Integer`	`99`	Maximum count before showing overflow suffix (e.g., "99+")
`status`	`Symbol`	`nil`	Status badge color variant
`text`	`String`	`nil`	Text label displayed next to status dot
`color`	`String`	`nil`	Custom CSS color for the badge
`show_zero`	`Boolean`	`false`	Display badge even when count is 0
`icon`	`Symbol`	`nil`	Icon displayed instead of numeric count

Slots

Prop	Type	Default	Description
`content`	`Slot`	`nil`	Element to be wrapped by the badge (optional for standalone badges)

HTML Options

Prop	Type	Default	Description
`**html_options`	`Keyword args`	`{}`	Additional HTML attributes merged into the wrapper element