Avatar
Displays a circular image, initials, empty avatar icon, or size-adapting loading skeleton.
Install
Run the following command to install the avatar component:
npx acc-nuxt add AvatarStates
Empty
Initials
DK
Image
Skeleton
Sizes
SM
MD
LG
XL
XL2
Props
size:'sm' | 'md' | 'lg' | 'xl' | 'xl2'— optional
default:lg
Visual size of the avatar. The copied wrapper supports sm, md, lg, xl, and xl2.
src:string— optional
default:undefined
Image URL used by the image state.
initials:string— optional
default:empty string
Initials shown when no image source is provided.
alt:string— optional
default:empty string
Alternative text for the avatar image. Leave empty when the image is decorative.
skeleton:boolean— optional
default:false
Shows a loading skeleton that adapts to the selected avatar size.
Slots
Use the #empty slot to replace the default empty-avatar icon.
#empty
Replaces the default icon shown when neither src nor initials is provided.
CSS Variables
--lev-avatar-background
default:#e1e4e5
Background color for the avatar trigger.
--lev-avatar-icon-color
default:#858787
Color of the empty avatar icon.
--lev-avatar-text-color
default:#141414
Color of the initials text.
--lev-avatar-size
default:32px
Width and height of the avatar trigger.
--lev-avatar-initials-font-size
default:14px
Font size of the initials text.
--lev-avatar-initials-line-height
default:18px
Line height of the initials text.
--lev-avatar-icon-size
default:20px
Width and height of the default empty-state icon.
Wrapper configuration
allowedSizes:readonly string[]
default:['sm', 'md', 'lg', 'xl', 'xl2']
Sizes exposed by the copied playground wrapper.