Search
⌘K
Something
Avatar
Avatar is a component that displays a user's profile picture or initials. It is commonly used in user interfaces to represent users in a visually appealing way.
This components. Store at src/components/atoms/avatar
Basic example
This is an example of how to use the avatar component. With an image, fallback, size.
ExampleCode
JD
JD
AG
KU
GC
BS
CK
Fallback
Fallback is a attribute that is used when the image fails to load. It is used to display a placeholder image or text. The color will be auto generated base on the fallback text.
ExampleCode
GC
Attribute
idstring- The unique identifier for the avatar.
srcstring (required)- The URL of the image to be displayed.
altstring- The alt text for the image.
fallbackstring (required)- The fallback text to be displayed if the image fails to load.
sizenumber- The size of the avatar. Default is 40
isOpenRingboolean- If true, the avatar will have a ring around it. Default is false.
Copyright 2025 by Prine Components