Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Avatar

Avatar is a data display component for rendering user avatars with image and fallback support.

​
Import

import { Avatar } from 'radix-native-ui';

​
Usage

import { Avatar } from 'radix-native-ui';

<Avatar
  src="https://example.com/avatar.jpg"
  alt="User avatar"
  fallback="JD"
/>

​
Props

​
Examples

​
Basic Avatar

<Avatar
  src="https://i.pravatar.cc/150"
  alt="User avatar"
  fallback="JD"
/>

​
With Fallback

<Avatar
  fallback="AB"
  alt="Avatar"
/>

​
Sizes

<Flex direction="row" gap={3} align="center">
  <Avatar size={1} fallback="1" />
  <Avatar size={2} fallback="2" />
  <Avatar size={3} fallback="3" />
  <Avatar size={4} fallback="4" />
  <Avatar size={5} fallback="5" />
  <Avatar size={6} fallback="6" />
  <Avatar size={7} fallback="7" />
  <Avatar size={8} fallback="8" />
  <Avatar size={9} fallback="9" />
</Flex>

​
Variants

<Flex direction="row" gap={3}>
  <Avatar variant="solid" fallback="S" />
  <Avatar variant="soft" fallback="S" />
</Flex>

​
With Color

<Flex direction="row" gap={3}>
  <Avatar color="blue" fallback="B" />
  <Avatar color="green" fallback="G" />
  <Avatar color="red" fallback="R" />
</Flex>

​
User Card

<Card>
  <Flex direction="row" gap={3} align="center">
    <Avatar
      src="https://i.pravatar.cc/150"
      alt="John Doe"
      fallback="JD"
      size={5}
    />
    <Flex direction="column">
      <Text weight="medium">John Doe</Text>
      <Text size={2} color="gray">john@example.com</Text>
    </Flex>
  </Flex>
</Card>

​
Avatar Group

<Flex direction="row">
  <Avatar
    src="https://i.pravatar.cc/150?img=1"
    fallback="A"
    radius="full"
  />
  <Avatar
    src="https://i.pravatar.cc/150?img=2"
    fallback="B"
    radius="full"
    style={{ marginLeft: -8 }}
  />
  <Avatar
    src="https://i.pravatar.cc/150?img=3"
    fallback="C"
    radius="full"
    style={{ marginLeft: -8 }}
  />
  <Avatar
    fallback="+5"
    radius="full"
    style={{ marginLeft: -8 }}
  />
</Flex>
  • Badge - Badge component
  • Card - Card component