Components
Avatar
User representation. Supports an image, initials fallback, and an icon fallback. Sizes and demo sections are driven from config/design-system.config.ts.
Contextual config
Avatar sections
Show or hide documentation sections on this page. Changes apply immediately and persist across the site.
Component Playground
Live instance - the controls read their options from the same config that drives the Variants section below.
md · 40pxControls
Size
Initials
Status
Count
Badge priority: status › verified › count - only one shows at a time.
Sizes
Extra small / Small / Medium / Large / Extra large / 2X large
xssmmdlgxl2xlFallback content
Falls back in order: src image → initials → placeholderIcon → placeholder → default User01 icon.
Initials / custom icon / default
initialsplaceholderIcondefault (User01)Border
An inner contrast ring around the avatar - used when the background behind the avatar is unpredictable.
border
Status indicator
online / offline
onlineofflineVerified
verified
Count badge
Displays an unread/notification count on the badge corner.
count
Company icon
Pass a custom badge node - e.g. a company logo - when status/verified/count aren't in use.
badge
Add button
A dashed placeholder used at the end of an avatar stack to add another user.
AvatarAddButton
Avatar label group
An avatar paired with a title and subtitle - used in lists, tables, and comments.
AvatarLabelGroup
Olivia Wyatt
olivia@dew.design
Profile photo
A larger presentation used on profile headers and settings pages.
sm / md / lg
smmdlgAvatar group
Stack avatars with border and a –8px overlap, ending in an AvatarAddButton or a count avatar when the list exceeds the max.
stack
API
| Prop | Type | Default |
|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" |
src | string | null | - |
alt | string | - |
initials | string | - |
placeholderIcon | FC<{ className?: string }> | - |
placeholder | ReactNode | - |
border | boolean | false |
contrastBorder | boolean | false |
badge | ReactNode | - |
status | "online" | "offline" | - |
verified | boolean | false |
count | number | - |
rounded | boolean | true |
focusable | boolean | false |
className | string | - |
contentClassName | string | - |
Usage
import { Avatar } from "@/components/base/avatar/avatar";
<Avatar size="md" initials="OW" status="online" />Figma
No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.