Avatar
Avatar is used to display a user profile picture or a placeholder.
Installation
npx jsx-daisyui add avatarDefault
avatar-default
Placeholder
avatar-placeholder
JD
AB
XY
Sizes
avatar-sizes
Shapes
avatar-shapes
Status
avatar-status
Group
avatar-group
Props
Avatar
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | URL of the avatar image. |
alt | string | - | Alt text for the image. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | The size of the avatar. |
shape | 'square' | 'rounded' | 'circle' | 'heart' | 'squircle' | 'hexagon' | 'circle' | The shape of the avatar. |
status | 'online' | 'offline' | - | Adds a status indicator. |
placeholder | boolean | - | Applies placeholder styling if no image is used. |
ring | boolean | - | Adds a decorative ring around the avatar. |
Avatar.Counter
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | - | The number to display (e.g. +99). |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | - | The size of the counter avatar. |
shape | 'square' | 'rounded' | 'circle' | 'heart' | 'squircle' | 'hexagon' | - | The shape of the counter avatar. |