Build · New
Avatar
Represents a person or account with a photo, initials or a generic placeholder, and can carry a badge for edit, verified or online.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
Installation
SoonInstalling from the registry opens at launch. Until then the command below is what it will be.
npx shadcn@latest add @ritla/avatarDependencies it brings: @base-ui/react, @phosphor-icons/react
Usage
import { Avatar } from "@/components/ui/avatar";<Avatar name="Layla Haddad" src={photoUrl} status="verified" />Examples
Types, sizes and statuses
A photo, initials from name, type="placeholder", or type="add" to add a photo; five sizes; and status for edit, verified or online.
When the photo doesn't load
The initials show while the photo loads or if it fails: one Arabic letter for an Arabic name, two letters for a Latin one, initials to set them; the placeholder when there's no name.
API reference
Avatar
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | The person's or account's name: the text alternative and the initials. | |
src | string | Figma's Type = Photo. | |
type | "placeholder" | "initials" | "add" | Figma's Type without a photo. | |
initials | string | Overrides the initials from the name. | |
size | "xxs" | "xs" | "sm" | "md" | "lg" | "md" | 24, 32, 40, 48 and 60px. |
status | "none" | "edit" | "verified" | "online" | "none" | Figma's Status: a badge at the bottom inline-end corner. |
decorative | boolean | false | Hides it from screen readers when the name is visible next to it. |
Accessibility
ARIA
role="img"named by the person and the status in the page language (“Layla Haddad, Verified”); the green dot is never the only signal.- The edit badge is decorative: the button around the avatar names the action (“Change photo”).
Arabic and RTL notes
Mirrors
- The badge sits at the bottom inline-end corner: on the left in Arabic.
Does not mirror
- The photo, the verified seal and the pencil don't mirror.
- Numerals
- No numbers in the avatar.
- Arabic typography
- An Arabic name gets one Arabic letter (ل for Layla), never two Latin letters; initials are SemiBold, in IBM Plex Sans Arabic for Arabic.
- Mixed-direction text
- Put the visible name next to it in
<bdi>, so a Latin name in an Arabic list stays intact.