Data display
Avatar
An initials avatar in a violet-tinted circle, generated from a name, in three sizes.
- Source
- src/components/ui/avatar.tsx
- Figma
- Avatar · type (image, initials) × size (sm, md, lg) × shape (circle, square). In code: initials only, circle by default; square via className.
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Avatar } from "@/components/ui/avatar";When to use
- Next to a person's name in tables, lists, comments and menus.
- Stacked in a group to show who is on a project.
- For profile photos: this component has no image support. Use a Next.js Image in a rounded-full container at the same sizes.
- On its own without a visible name, unless you add screen reader text, because the avatar is hidden from assistive tech.
Examples
With name
The avatar is hidden from screen readers, so show the name next to it.
Square
There is no shape prop. Override the radius with className, for workspaces or teams.
Stacked group
Overlap with a negative margin and separate with a ring in the surface color.
API reference
Avatar
Does not spread other props. Initials are the first letter of the first two words of name, uppercased.
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | Required. The full name; "Sarah Chen" renders "SC". |
| size | "sm" | "md" | "lg" | "md" | sm is 28px, md is 36px, lg is 48px. |
| className | string | - | Extra classes. Use rounded-md for the square shape, or ring-2 ring-card in stacked groups. |
Accessibility
- Avatar always renders with aria-hidden="true" and select-none, so the initials are never announced. Show the person's name as visible text next to it, or add sr-only text.
- In a stacked group, label the overflow counter, for example aria-label="9 more people".