Avatar - Hakumi Components

Basic Usage

Avatars can display images, icons, or text initials.

Code

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

Sizes

Use preset sizes (small, default, large) or custom pixel values.

Code

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

Types

Display avatars with images, icons, or text content.

U USER

Code

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

Auto-scale Text

Text content automatically scales to fit within the avatar.

A AB ABC ABCD LongText

Code

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

With Badge

Combine avatars with Badge component for status indicators.

Code

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

Props

Prop	Type	Default	Description
`shape`	`:circle \| :square`	`:circle`	Avatar shape
`size`	`:small \| :default \| :large \| Integer`	`:default`	Preset size token or custom pixel value (small=24px, default=32px, large=40px)
`src`	`String`	`nil`	Image URL to display in the avatar
`icon`	`String or Symbol`	`nil`	Icon name to display when no image is provided
`alt`	`String`	`nil`	Alt text for image avatars

HTML Options

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

JavaScript API

Access via element.hakumiComponent.api (only available for text avatars without src or icon)

Prop	Type	Default	Description
`rescale()`	`Method`	`-`	Recalculate and apply text scaling to fit within avatar bounds