Avatar
Versatile UI element, the Avatar component visually represents users or entities, typically displaying an image or a placeholder graphic.
Import
import { Avatar } from '@vortex-kit/vortex';
import type { AvatarProps } from '@vortex-kit/vortex';Display
<Avatar src='./ugi.webp' alt='Ugi' />Allied components
Implementation
The Avatar component, by default, displays an image when the src prop is provided. It is important to also include the alt prop for accessibility purposes.
If you opt to use the initials or icon props instead, you must specify the color prop to define the avatar's color.
Loading...
Show Code
Size
Avatars are available in six sizes: xs, sm, md, lg, xl, 2xl. The default size is lg.
Loading...
Show Code
You can also use responsive sizing by passing an object with breakpoint specific sizes:
Loading...
Show Code
Shape
Avatars have two shapes: default and rounded. The default shape is rounded.
Loading...
Show Code
Type
Avatars have two types: default and faded. The default type is default.
Loading...
Show Code
Color
Avatars are available in six colors: neutral, primary, success, info, warning, critical. The default color is neutral.
Loading...
Show Code
Online Indicator
Avatar can have an online indicator. It is a small dot that indicates that the user is online. Use the onlineIndicator prop to add an online indicator to the avatar.
Loading...
Show Code
Verified User
Avatars can display a verified user indicator, represented by a small checkmark. This feature signifies that the user has been verified. To enable the verified user indicator, simply use the verifiedUser prop when rendering the avatar.
Loading...
Show Code
Composition
Avatar can be composed with other components to create complex UI elements using a compound component approach.
Avatar.Aligner
Avatar.Aligner is a versatile wrapper component that aligns an avatar with a content. It is useful when you want to align an avatar with a title and subtitle.
Avatar.Content supports additional props:
- direction: Controls the layout direction (row or column)
- align: Controls the alignment (start, center, end)
Loading...
Show Code
Accessibility
Avatar component automatically figures out the correct HTML element to render based on the props.
Key | Description |
|---|---|
⬢ | If src prop is provided, it automatically renders an <img/> element. |
⬢ | If alt prop is omitted, it defaults to Avatar Image. |
