// Generated by scripts/generate-showcase.mjs. Do not edit directly. page AvatarGroupDetail { layout = "showcase" state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"src\": \"/avatar-example.svg\",\n \"name\": \"Mark Wanner\",\n \"alt\": \"Mark Wanner\"\n },\n {\n \"src\": \"/avatar-example-2.svg\",\n \"name\": \"Maria Guan\",\n \"alt\": \"Maria Guan\"\n },\n {\n \"src\": \"/avatar-example-3.svg\",\n \"name\": \"Amil Evara\",\n \"alt\": \"Amil Evara\"\n },\n {\n \"initials\": \"EE\",\n \"name\": \"Ebele Egbuna\",\n \"color\": \"info\"\n }\n]" state playground_size = ctx.url.searchParams.get("pg_size") ?? "lg" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid" state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle" state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "stack" state playground_maxVisible = ctx.url.searchParams.get("pg_maxVisible") ?? "4" state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3" state playground_borderColor = ctx.url.searchParams.get("pg_borderColor") ?? "" state playground_showTooltips = ctx.url.searchParams.get("pg_showTooltips") ?? "true" state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Show remaining members" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Avatar Group" description = "Theme-aware, responsive avatar group component." } view {
Base component

Avatar Group

Theme-aware, responsive avatar group component.

12 props0 slots1 eventsTheme readyResponsive
Interactive playground

Configure Avatar Group

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<AvatarGroup
  items='[
    {
      "src": "/avatar-example.svg",
      "name": "Mark Wanner",
      "alt": "Mark Wanner"
    },
    {
      "src": "/avatar-example-2.svg",
      "name": "Maria Guan",
      "alt": "Maria Guan"
    },
    {
      "src": "/avatar-example-3.svg",
      "name": "Amil Evara",
      "alt": "Amil Evara"
    },
    {
      "initials": "EE",
      "name": "Ebele Egbuna",
      "color": "info"
    }
  ]'
  size="lg"
/>
Component props12 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Facepile

Overlapping stack

Overlap avatars with negative spacing to create a compact team facepile.

01
Live preview
Component usage.wrn
<AvatarGroup
  items='[
    {
      "src": "/avatar-example.svg",
      "name": "Mark Wanner",
      "alt": "Mark Wanner"
    },
    {
      "src": "/avatar-example-2.svg",
      "name": "Maria Guan",
      "alt": "Maria Guan"
    },
    {
      "src": "/avatar-example-3.svg",
      "name": "Amil Evara",
      "alt": "Amil Evara"
    },
    {
      "initials": "EE",
      "name": "Ebele Egbuna",
      "color": "info"
    }
  ]'
  size="lg"
/>
Layout

Grid layout

Arrange members in a grid with equal spacing and a clear overflow count.

02
Live preview
Component usage.wrn
<AvatarGroup
  items='[
    {
      "src": "/avatar-example.svg",
      "name": "Mark Wanner",
      "alt": "Mark Wanner"
    },
    {
      "src": "/avatar-example-2.svg",
      "name": "Maria Guan",
      "alt": "Maria Guan"
    },
    {
      "src": "/avatar-example-3.svg",
      "name": "Amil Evara",
      "alt": "Amil Evara"
    },
    {
      "initials": "EE",
      "name": "Ebele Egbuna",
      "color": "info"
    },
    {
      "initials": "CL",
      "name": "Chris Lynch",
      "color": "success"
    },
    {
      "initials": "NS",
      "name": "Nora Singh",
      "color": "warning"
    },
    {
      "initials": "JR",
      "name": "Jon Rivera",
      "color": "danger"
    },
    {
      "initials": "AK",
      "name": "Amina Khan",
      "color": "secondary"
    }
  ]'
  layout="grid"
  maxVisible="7"
/>
Border

Custom border color

Change the ring color so stacked groups remain distinct on different surfaces.

03
Live preview
Component usage.wrn
<AvatarGroup
  items='[
    {
      "src": "/avatar-example.svg",
      "name": "Mark Wanner",
      "alt": "Mark Wanner"
    },
    {
      "src": "/avatar-example-2.svg",
      "name": "Maria Guan",
      "alt": "Maria Guan"
    },
    {
      "src": "/avatar-example-3.svg",
      "name": "Amil Evara",
      "alt": "Amil Evara"
    },
    {
      "initials": "EE",
      "name": "Ebele Egbuna",
      "color": "info"
    }
  ]'
  borderColor="#2583ff"
/>
Tooltip

Member tooltips

Reveal each member's name on pointer hover or keyboard focus.

04
Live preview
Component usage.wrn
<AvatarGroup
  items='[
    {
      "src": "/avatar-example.svg",
      "name": "Mark Wanner",
      "alt": "Mark Wanner"
    },
    {
      "src": "/avatar-example-2.svg",
      "name": "Maria Guan",
      "alt": "Maria Guan"
    },
    {
      "src": "/avatar-example-3.svg",
      "name": "Amil Evara",
      "alt": "Amil Evara"
    },
    {
      "initials": "EE",
      "name": "Ebele Egbuna",
      "color": "info"
    }
  ]'
/>
Overflow

Dropdown overflow

Open the overflow counter to inspect members hidden by the visible limit.

05
Live preview
Component usage.wrn
<AvatarGroup
  items='[
    {
      "src": "/avatar-example.svg",
      "name": "Mark Wanner",
      "alt": "Mark Wanner"
    },
    {
      "src": "/avatar-example-2.svg",
      "name": "Maria Guan",
      "alt": "Maria Guan"
    },
    {
      "src": "/avatar-example-3.svg",
      "name": "Amil Evara",
      "alt": "Amil Evara"
    },
    {
      "initials": "EE",
      "name": "Ebele Egbuna",
      "color": "info"
    },
    {
      "initials": "CL",
      "name": "Chris Lynch",
      "color": "success"
    },
    {
      "initials": "NS",
      "name": "Nora Singh",
      "color": "warning"
    },
    {
      "initials": "JR",
      "name": "Jon Rivera",
      "color": "danger"
    },
    {
      "initials": "AK",
      "name": "Amina Khan",
      "color": "secondary"
    }
  ]'
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@overflowFires when the component emits the overflow event.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('overflow', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
itemsstring[]No
sizestring"md"No
colorstring"primary"No
variantstring"solid"No
shapestring"circle"No
layoutstring"stack"No
maxVisiblenumber4No
columnsnumber3No
borderColorstring""No
showTooltipsbooleantrueNo
overflowLabelstring"Show remaining members"No
classstring""No
} }