Hakumi :: Rails ViewComponents

Basic Usage

Code

<%= render(Hakumi::Space::Component.new(size: :middle, align: :center)) do %>
  <%= render(Hakumi::Avatar::Component.new(icon: :user)) %>
  <%= render(Hakumi::Avatar::Component.new(icon: :user, shape: :square)) %>
<% end %>

Sizes

Code

<%= render(Hakumi::Space::Component.new(size: :middle, align: :center)) do %>
  <%= render(Hakumi::Avatar::Component.new(size: 64, icon: :user)) %>
  <%= render(Hakumi::Avatar::Component.new(size: :large, icon: :user)) %>
  <%= render(Hakumi::Avatar::Component.new(icon: :user)) %>
  <%= render(Hakumi::Avatar::Component.new(size: :small, icon: :user)) %>
<% end %>

Types

U USER

Code

<%= render(Hakumi::Space::Component.new(size: :middle, align: :center)) do %>
  <%= render(Hakumi::Avatar::Component.new(icon: :user)) %>
  <%= render(Hakumi::Avatar::Component.new) do %>U<% end %>
  <%= render(Hakumi::Avatar::Component.new) do %>USER<% end %>
  <%= render(Hakumi::Avatar::Component.new(src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1")) %>
  <%= render(Hakumi::Avatar::Component.new(style: "color: #f56a00; background-color: #fde3cf;")) do %>U<% end %>
  <%= render(Hakumi::Avatar::Component.new(style: "background-color: #87d068;", icon: :user)) %>
<% end %>

Auto-scale Text

A AB ABC ABCD LongText

Code

<%= render(Hakumi::Space::Component.new(size: :middle, align: :center)) do %>
  <%= render(Hakumi::Avatar::Component.new) do %>A<% end %>
  <%= render(Hakumi::Avatar::Component.new) do %>AB<% end %>
  <%= render(Hakumi::Avatar::Component.new) do %>ABC<% end %>
  <%= render(Hakumi::Avatar::Component.new) do %>ABCD<% end %>
  <%= render(Hakumi::Avatar::Component.new(size: 64)) do %>LongText<% end %>
<% end %>

With Badge

Code

<%= render(Hakumi::Space::Component.new(size: :middle, align: :center)) do %>
  <%= render(Hakumi::Badge::Component.new(count: 1)) do %>
    <%= render(Hakumi::Avatar::Component.new(shape: :square, icon: :user)) %>
  <% end %>
  <%= render(Hakumi::Badge::Component.new(dot: true)) do %>
    <%= render(Hakumi::Avatar::Component.new(shape: :square, icon: :user)) %>
  <% end %>
<% end %>

Avatar API

Prop	Type	Default	Description
`shape`	`:circle or :square`	`:circle`	Avatar frame shape.
`size`	`:small \| :default \| :large or Integer`	`:default`	Preset token or custom pixel value.
`src`	`String`	`-`	Image URL rendered inside the avatar.
`icon`	`Symbol or ViewComponent`	`-`	Icon shown when no image is provided.
`alt`	`String`	`-`	Alt text for the image avatar variant.
`content slot`	`Slot`	`-`	Fallback initials/text when neither src nor icon.
`**html_options`	`Keyword args`	`-`	Wrapper attributes passed as kwargs (e.g., `class:`, `style:`, `data:`).