Avatar
A small identity marker for people, workspaces, and objects.
Workspace tile 24px rounded, object icons 16px, user avatars circular, weight 600.
Installation
npm install @crisp-ui-kit/crispProps
Prop
Type
Examples
Sizes
Four sizes — 16 / 20 / 24 / 32px. 24px matches the workspace tile size.
Shape
circle for people, rounded (30% radius) for workspace tiles and object icons.
Tones
Six background tones, used to visually differentiate users and workspaces that don't have an image.
With icon
A small rounded avatar standing in for an object icon, at the 16px object icon size.
Accessibility
Avatar renders a plain <span> — it is decorative by default. When an avatar is the only identifier for a user or workspace (no adjacent name text), give it an accessible name with aria-label. When it's paired with visible text (e.g. next to a person's name in a list row), mark the avatar aria-hidden so screen readers don't announce the initials twice.