Avatar stack

A labelled group of consistently sized avatars with overflow state.

Source
app/components/nitro_kit/avatar_stack.rb
API
NitroKit::AvatarStack.new(size:) { |stack| stack.avatar; stack.overflow }

Sizes

The stack owns the size of every nested avatar and its overflow indicator.

Size scale

Small stack
+2
Medium stack
+5
Large stack
+12
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/avatar_stack_page.rb
Gallery::Data.avatar_stack_sizes.each do |stack|
  sample(stack.label, slug: stack.slug) do
    render_stack(stack)
  end
end

Overflow counts

Small, large, and explicitly labelled overflow counts remain readable and announced.

Count scale

One more
+1
Nine more
+9
128 observers
+128
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/avatar_stack_page.rb
sample("One more", slug: "one") do
  render_overflow_stack(id: "gallery-avatar-stack-overflow-one", count: 1)
end
sample("Nine more", slug: "nine") do
  render_overflow_stack(id: "gallery-avatar-stack-overflow-nine", count: 9)
end
sample("128 observers", slug: "large") do
  render_overflow_stack(
    id: "gallery-avatar-stack-overflow-large",
    count: 128,
    label: "128 additional deployment observers"
  )
end

Mixed identities

Image, generated fallback, long custom fallback, and overflow compose in one labelled group.

Deployment reviewers

Nitro Kit workspace+3
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/avatar_stack_page.rb
render NitroKit::AvatarStack.new(
  id: "gallery-avatar-stack-reviewers",
  size: :lg,
  aria: { label: "Deployment reviewers" }
) do |stack|
  stack.avatar(
    src: "/icon.svg",
    alt: "Nitro Kit workspace",
    fallback: "NK",
    id: "gallery-avatar-stack-image"
  )
  stack.avatar(
    alt: "Ada Lovelace",
    id: "gallery-avatar-stack-generated"
  )
  stack.avatar(
    alt: "Platform engineering team",
    fallback: "TEAM",
    id: "gallery-avatar-stack-long-fallback"
  )
  stack.overflow(3, label: "Three more deployment reviewers")
end