Avatar
An image element with a fallback for representing the user.
Default
With Initials Fallback
Use the
initials
prop to display fallback text when no image is provided or if the image fails to load.
Initials
JD
AB
ZK
Sizes
Use the
size
prop to change the avatar size.
Sizes
sm
md
lg
xl
Shapes
Use the
shape
prop to switch between circle and square avatars.
Shapes
circle
square
Custom Fallback Icon
Use the
:fallback
slot for custom fallback content like icons.
Custom Fallback
Avatar Group
Wrap avatars in a container with the
avatar-group
class for stacked display.
Avatar Group
JD
AB
+3
With Status Indicator
Combine with a status indicator for online/offline states.
With Status
JD
AB