Avatar
The Avatar component in this UI library is a versatile element designed to display user profile images with various customization options. It supports different sizes, edge rounding, and optional border styles, allowing developers to tailor the avatar's appearance to match their application's design needs. The component also includes options for secondary styling and a disabled state, making it adaptable to various user interface scenarios. Additionally, the Avatar can be easily installed and integrated into your project, providing a seamless way to enhance user profiles in your web applications.
Basic Avatar
1<Avatar alt="Jane Doe" />
2<Avatar alt="Jane Doe" src="/avatarImage.png" />Avatar API Reference
Prop | Type | Default |
|---|---|---|
src | string | - |
alt | string | - |
size | string | default |
variant | string | default |
rounded | string | full |
border | boolean | false |
disabled | boolean | false |
* Required | ||
Prop | Types |
|---|---|
size | default small large |
rounded | full large none |
variant | default secondary |
Disabled Avatar
1<Avatar alt="Jane Doe" disabled/>
2<Avatar alt="Jane Doe" src="/avatarImage.png" disabled/>Avatar - Sizes
1<Avatar alt="Stewart Miller" size="small"/>
2<Avatar alt="Angie Sawyer" size="default"/>
3<Avatar alt="Oliver Lynn" size="large"/>
4<Avatar alt="Salvatore Driscolle" src="/avatarImage.png" size="small" />
5<Avatar alt="Randolph Bridges" src="/avatarImage.png" size="default" />
6<Avatar alt="Delores Downs" src="/avatarImage.png" size="large" />Avatar - Rounded Edges
1<Avatar alt="Adrienne Hill" rounded="none"/>
2<Avatar alt="Juana Schneider" rounded="large"/>
3<Avatar alt="Eva Curran" rounded="full"/>
4<Avatar alt="Angelo Sanchez" src="/avatarImage.png" rounded="none" />
5<Avatar alt="Angela Jacobson" src="/avatarImage.png" rounded="large" />
6<Avatar alt="Albert Dean" src="/avatarImage.png" rounded="full" />Avatar - Border Edges
1<Avatar alt="Alberto Wagner" rounded="none" border/>
2<Avatar alt="Maggie Richards" rounded="large" border/>
3<Avatar alt="Rod Dalton" rounded="full" border/>
4<Avatar alt="Danielle Gorman" src="/avatarImage.png" rounded="none" border/>
5<Avatar alt="Pedro Porter" src="/avatarImage.png" rounded="large" border/>
6<Avatar alt="Juanita Lawrence" src="/avatarImage.png" rounded="full" border/>Icon Button - Style Variants
Secondary Variant
1<Avatar alt="Mayra Lewis" variant="secondary"/>