Skip to main content

Avatar

Avatar is a visual identifier that represents a person or team, such as a profile owner or a project's collaborators.

Import

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

Other links

Avatar

Avatar props
Prop	Type	Default	Attributes
`src`	`string`	No default value
`initials`	`string`	No default value
`icon`	`union`	No default value
`alt`	`string`	No default value
`tone`	`union`	`neutral`
`onlineIndicator`	`boolean`	No default value
`verified`	`boolean`	No default value
`rounded`	`boolean`	`false`
`variant`	`union`	`solid`
`size`	`union`	`lg`
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar.Item

Avatar.Item props
Prop	Type	Default	Attributes
`src`	`string`	No default value
`initials`	`string`	No default value
`icon`	`union`	No default value
`alt`	`string`	No default value
`tone`	`union`	`neutral`
`onlineIndicator`	`boolean`	No default value
`verified`	`boolean`	No default value
`rounded`	`boolean`	`false`
`variant`	`union`	`solid`
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar.Root

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

Avatar.Content

Avatar.Content props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`gap`	`number`	`0`
`direction`	`indexed`	`column`
`align`	`indexed`	`start`
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar.Title

Avatar.Title props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`as`	`union`	`p`
`size`	`indexed`	No default value
`weight`	`union`	`medium`
`color`	`indexed`	`default`
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar.HelperText

Avatar.HelperText props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`as`	`union`	`p`
`size`	`indexed`	No default value
`weight`	`union`	`regular`
`color`	`indexed`	`subtle`
`className`	`union`	No default value
`attributes`	`object`	No default value

Avatar.Group

Avatar.Group props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`ariaLabel`	`string`	No default value
`size`	`union`	`md`
`rounded`	`boolean`	`false`
`limit`	`number`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value