Avatar

Avatar Props

Prop	Type	Default
`size`	`number`	`3`
`src`	`string`	-
`alt`	`string`	-
`fallback`	`ReactNode`	-
`variant`	`"solid" \| "soft"`	`"soft"`
`radius`	`"small" \| "full"`	`"small"`
`color`	`"indigo" \| "orange" \| "mint" \| "neutral" \| "sky" \| "lime" \| "grass" \| "cyan" \| "iris" \| "purple" \| "pink" \| "crimson" \| "gold"`	-
`asChild`	`boolean`	-
`className`	`string`	-

Avatar Group Props

Prop	Type	Default
`children`	`ReactNode`	-
`max`	`number`	-
`className`	`string`	-

Examples

Variant

Choose between soft and solid variants to control the visual weight and emphasis of the avatar in your interface.

<Flex gap="medium" align="end">
  <Avatar size={6} variant="soft" fallback="RC" />
  <Avatar size={6} variant="solid" fallback="RC" />
</Flex>

Size

The Avatar component supports 13 different sizes to accommodate various layout requirements and design needs.

<Flex gap="large" direction="column">
  <Flex gap="small" align="end">
    <Avatar size={1} fallback="RC" />
    <Avatar size={2} fallback="RC" />
    <Avatar size={3} fallback="RC" />
    <Avatar size={4} fallback="RC" />
    <Avatar size={5} fallback="RC" />
    <Avatar size={6} fallback="RC" />
    <Avatar size={7} fallback="RC" />
    <Avatar size={8} fallback="RC" />
    <Avatar size={9} fallback="RC" />
  </Flex>
  <Flex gap="small">
    <Avatar size={10} fallback="RC" />
    <Avatar size={11} fallback="RC" />
    <Avatar size={12} fallback="RC" />
    <Avatar size={13} fallback="RC" />
  </Flex>
</Flex>

Color

Avatar comes with a range of predefined colors including both base and extended color options to match your design system.

<Flex gap="medium">
  <Avatar size={6} color="indigo" fallback="RC" />
  <Avatar size={6} color="orange" fallback="RC" />
  <Avatar size={6} color="mint" fallback="RC" />
  <Avatar size={6} color="neutral" fallback="RC" />
</Flex>

Radius

Choose between small and full border radius styles to match your design preferences.

<Flex gap="medium" align="end">
  <Avatar size={6} radius="full" fallback="RC" />
  <Avatar size={6} radius="small" fallback="RC" />
</Flex>

With Image

Avatar can display user images with graceful fallback to initials when images fail to load or aren't available.

<Flex gap="medium" align="end">
  <Avatar
    size={6}
    radius="full"
    fallback="RC"
    src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
  />
  <Avatar
    size={8}
    radius="small"
    fallback="RC"
    src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
  />
</Flex>

Avatar

On this page