Avatar

Displays a user avatar with various size options and fallback states.

Atoms

Examples

Default Avatar

Code:

<Avatar name="John Doe" picture="/avatar.jpg" />

Size Variants

Code:

<Stack direction="row" gap="md">
  <Avatar name="XS" size="xs" />
  <Avatar name="SM" size="sm" />
  <Avatar name="MD" size="md" />
  <Avatar name="LG" size="lg" />
  <Avatar name="XL" size="xl" />
</Stack>

Props

Prop	Type	Default	Required	Description
`name`	`string`	—	Required	Display name for the avatar
`picture`	`string`	—	Optional	Image source URL
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`md`	Optional	Size variant

Design Tokens Used

semantic.size.avatar.*semantic.color.background.subtlesemantic.color.text.defaultbase.border.radius[full]base.shadow[1]