Components
Avatar
A user picture with initials as the fallback, and a stacked group with an overflow count.
Client componentUses state or handlers, so it starts with "use client".
import { Avatar, AvatarGroup, avatarVariants } from "@glob-ui/avatar"Preview
Examples
Group
AvatarGroup stacks avatars and shows the rest as a count, set by max.
API
Props are generated from the TypeScript types in the package source.
AvatarProps
Prop
Type
AvatarGroupProps
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| Loaded image | A real image with alt text. |
| Loading or failed image | Shows the fallback (initials from alt). The wrapper is role="img" named by alt. |
| Group | role="group". The overflow count is role="img" named "N more". |
ARIA. Pass alt with the person's name, so the fallback is still named. The fallback initials are hidden from assistive technology.