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

Image AvatarGroup

Avatar

Avatar types like WithImage, WithInitials, and WithIcon offer flexible options for representing user profiles with images, initials, or icons, ensuring consistent and adaptable visual elements across applications.

Shared Avatar Props

Prop	Type	Default
`type`	`union`	`default`
`size`	`union`	`lg`
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar With Image

Prop	Type	Default
`src`	`string`	No default value
`initials`	`string`	No default value
`icon`	`string`	No default value
`alt`	`string`	No default value
`onlineIndicator`	`boolean`	No default value
`verifiedUser`	`boolean`	No default value

Avatar With Initials

Prop	Type	Default
`initials`	`string`	No default value
`color`	`union`	`neutral`
`onlineIndicator`	`boolean`	No default value

Avatar With Icon

Prop	Type	Default
`icon`	`string`	No default value
`color`	`union`	`neutral`
`onlineIndicator`	`boolean`	No default value

Avatar.Aligner

Prop	Type	Default
`children`	`React.ReactNode`	No default value
`align`	`union`	`center`
`direction`	`union`	`row`
`gap`	`number`	`3`
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar.Content

Prop	Type	Default
`children`	`React.ReactNode`	No default value
`align`	`union`	`start`
`direction`	`union`	`column`
`gap`	`number`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar Text

Avatar.Title and Avatar.Subtitle share identical properties. However, they differ in text size: Avatar.Title employs a body-md-desktop size, making it larger and more prominent, while Avatar.Subtitle uses a smaller body-xs-desktop size for subtler emphasis.

Prop	Type	Default
`children`	`React.ReactNode`	No default value
`as`	`keyof React.JSX.IntrinsicElements`	`p`
`size`	`union`	No default value
`weight`	`union`	`medium`
`color`	`union`	`default`
`className`	`union`	No default value
`attributes`	`object`	No default value