Components
Avatar
BetaA circular user or expert photo. Falls back to initials on a teal background when no image is provided. Used in expert quotes, reviews, account navigation, and team pages.
Purpose
The Avatar represents a person — a Kuoni expert, a reviewer, or the logged-in customer. When an src image is provided it is displayed; when src is omitted, the component generates initials from name and shows them on a teal background. This ensures consistent visual presence even when no photo is available.
Usage
Reach for Avatar anywhere a person needs a consistent circular visual identity: ExpertQuote's travel-expert portrait, a review card's customer photo, the account-navigation trigger in the site header, or a team page. Use it in place of a raw <img> whenever the subject is a person, so the initials fallback and sizing scale are handled consistently.
Avatars typically sit beside a name and title, or stacked in a group to represent multiple people at once — see Group stack below.
Anatomy
- 1Container — Circular span (rounded-full) with overflow:hidden and teal background. The teal shows through as the initials background.
- 2Image (when src provided) — object-cover image filling the full circle. alt text from alt or name prop.
- 3Initials (fallback) — First letters of the first and last name in semibold white on teal. Generated from the name prop automatically.
Variants
Sizes
| Size | Diameter | Use |
|---|---|---|
sm | 32 px | Account nav icon, compact list rows |
md | 40 px | Review cards, chat-style messages |
lg | 64 px | Expert quote component, team cards |
xl | 96 px | Profile pages, large feature displays |
Initials fallback (no image)
When src is omitted, the component derives two initials from the name prop. Single-word names produce one initial.
Group stack
Multiple avatars can be stacked horizontally with negative margin to form an overlapping group.
Best practices
Always provide name or alt so the avatar has an accessible text description.
'Sarah Mitchell, Kenya specialist' is read by screen readers as the avatar's content — essential when no image is shown.
Render an Avatar without name or alt.
An Avatar with no name and no alt is announced by screen readers as an unlabelled image — meaningless to non-sighted users.
Match the avatar size to the content density of its context. Use lg or xl when the person's identity is a focal point.
The xl size is appropriate for an expert profile card where the portrait is the primary visual element.
Use an oversized Avatar in dense information contexts like data tables or compact lists.
An xl Avatar in a compact data table cell forces the row height up and overwhelms the surrounding text.
Rely on the initials fallback for all avatars — do not hide or collapse avatars when no image is provided.
The initials fallback maintains visual consistency across all cards even when photography is unavailable.
Pass an empty name and no src — the fallback will show '?' which is not a useful label.
Empty circular containers with no content are visually broken and confusing.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | The person's full name. Used to generate initials for the fallback and as the default alt text for the image. |
| src | string | — | URL of the person's photo. When omitted, the initials fallback is shown. |
| alt | string | name prop | Alt text for the image. Defaults to the name prop when not provided. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Diameter of the avatar. sm=32px, md=40px, lg=64px, xl=96px. |
| className | string | — | Additional Tailwind classes on the root span. Use for ring, border, shadow, or positioning overrides. |
Accessibility
Image alt text
When src is provided, the <img> element receives alt from the alt prop, falling back to name. If neither is provided, the alt is an empty string — only use this when the avatar is purely decorative (e.g., a generic placeholder).
Initials fallback
The initials are marked aria-hidden="true" since they are redundant with the surrounding content. A <span className="sr-only"> with the full name or alt text is rendered alongside for screen readers:
<span className="sr-only">Sarah Mitchell</span>
Keyboard interaction
The Avatar is not interactive and receives no focus. When used inside a clickable link or button (e.g., an account menu trigger), the keyboard behaviour is handled by the containing element.
Related components
- ExpertQuote — uses a circular author portrait, following the same visual identity pattern as Avatar.