Skip to main content

Avatar

Versatile UI element, the Avatar component visually represents users or entities, typically displaying an image or a placeholder graphic.

Import

import { Avatar } from '@vortexlabs/vortex';
import type { AvatarProps } from '@vortexlabs/vortex';

Display

<Avatar initials="VX" />

Allied components

AvatarGroup Badge

Other links

Component properties
Prop	Type	Default	Attributes
`src`	`string`	No default value
`alt`	`string`	No default value
`initials`	`string`	No default value
`icon`	`SVGIcon`	No default value
`color`	`union`	`neutral`
`type`	`union`	`default`
`size`	`union`	`lg`
`rounded`	`boolean`	No default value
`onlineIndicator`	`boolean`	No default value
`verified`	`boolean`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar.Root

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

Avatar.Item

Component properties
Prop	Type	Default	Attributes
`src`	`string`	No default value
`alt`	`string`	No default value
`initials`	`string`	No default value
`icon`	`SVGIcon`	No default value
`color`	`union`	`neutral`
`type`	`union`	`default`
`rounded`	`boolean`	No default value
`onlineIndicator`	`boolean`	No default value
`verified`	`boolean`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar.Content

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

Avatar.Title and Avatar.HelperText

Component properties
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`as`	`React.ElementType`	`p`
`size`	`TextProps['size']`	No default value
`weight`	`TextProps['weight']`	No default value
`color`	`TextProps['color']`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value