Avatar
Sizes
Preview
index.tsxInitials
Preview
index.tsxJD
AB
XY
WZ
Images
Preview
index.tsx
Children
Preview
index.tsxRP
Preview
index.tsx
Border Styles
Preview
index.tsxJD
JD
JD
JD
Status Dot
Preview
index.tsxJD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
Status Border
Preview
index.tsxJD
JD
JD
JD
JD
JD
JD
JD
Status with Pulse
Preview
index.tsxJD
JD
Avatar Group
Preview
index.tsxJD
+2
+2
Avatar Trigger
Preview
index.tsxJD
Disabled Avatar
Preview
index.tsxJD
JD
AB
Design Tokens for Avatar
| Token | Color for | State/Meaning |
|---|---|---|
| --par-color-bg-avatar | Avatar background | Default background |
| --par-color-bg-avatar-disabled | Avatar background | Disabled state |
| --par-color-bg-avatar-trigger | AvatarTrigger bg | Avatar trigger background |
| --par-color-border-avatar | Avatar border | Default border |
| --par-color-border-avatar-alternative | Avatar border alt | Alternative border style |
| --par-color-border-avatar-gray | Avatar border gray | Gray status border |
| --par-color-border-avatar-red | Avatar border red | Red status border |
| --par-color-border-avatar-green | Avatar border green | Green status border |
| --par-color-border-avatar-yellow | Avatar border yellow | Yellow status border |
| --par-color-text-avatar | Initials/placeholder | Initials & placeholder |
| --par-color-text-avatar-disabled | Avatar text | Disabled state |
| --par-color-text-avatar-trigger | AvatarTrigger text | Avatar trigger text |
| --avatar-group-spacing | Group spacing | Spacing between avatars |
Avatar API Reference
<Avatar />
Displays a user avatar with support for image, initials, icon fallback, status indicator (dot or border), and custom content.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | Image URL for the avatar. | |
| alt | string | Alt text for the image. | |
| initials | string | Initials to display if no image is available. | |
| size | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar size. |
| framePadding | number | 1 | Padding (px) between avatar and border. |
| disabled | boolean | false | Disables the avatar. |
| status | { type, color, pulse, borderStyle } | Status indicator (see below for details). | |
| wrapperProps | React.HTMLAttributes<HTMLDivElement> | Props for the avatar wrapper element. | |
| children | ReactNode | Custom content inside the avatar. | |
| ...divProps | HTMLDivElement props | All native div props (className, style, ...). |
status object:
| Field | Type | Default | Description |
|---|---|---|---|
| type | 'dot' | 'border' | 'border' | Status indicator type. |
| color | 'gray' | 'green' | 'red' | 'yellow' | 'gray' | Status color. |
| pulse | boolean | false | Pulse animation for status. |
| borderStyle | 'default' | 'alternative' | 'none' | 'inherit' | 'default' | Border style for status. |
<AvatarGroup />
Displays a group of avatars with overflow handling and shared props.
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 5 | Max avatars to display before showing overflow. |
| direction | 'row' | 'column' | 'row' | Stack direction. |
| spacing | string | '-0.5rem' | Spacing between avatars. |
| size | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size for all avatars in the group. |
| borderStyle | 'default' | 'alternative' | 'none' | 'inherit' | 'default' | Border style for all avatars. |
| framePadding | number | Padding for all avatars. | |
| renderOverflow | (overflowCount, hiddenAvatars) => ReactNode | Custom overflow indicator renderer. | |
| onOverflowClick | (e: React.MouseEvent<HTMLDivElement>) => void | Handler for overflow avatar click. | |
| children | ReactNode | Avatars to display. | |
| ...divProps | HTMLDivElement props | All native div props (className, style, ...). |
<AvatarTrigger />
A clickable avatar, typically used as a trigger for menus or popovers. Inherits all Avatar props.
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | Whether the trigger is active/selected. |
| ...AvatarProps | See above | All props from Avatar. |
Note: AvatarTrigger extends all props from Avatar. See the Avatar props table above for details.