Avatar

Web
Native

Default

import { Box, Avatar } from '@gympass/yoga';

<Box display="flex" justifyContent="space-evenly" width="100%">
  <Avatar />
  <Avatar src="https://github.com/Gympass.png" alt="Gympass brand logo" />
</Box><Box display="flex" justifyContent="space-evenly" width="100%">
  <Avatar />
  <Avatar src="https://github.com/Gympass.png" alt="Gympass brand logo" />
</Box>

Circle

import { Box, Avatar } from '@gympass/yoga';

<Box display="flex" justifyContent="space-evenly" width="100%">
  <Avatar.Circle />
  <Avatar.Circle
    src="https://i.pravatar.cc/50"
    alt="an image of a random user"
  />
</Box><Box display="flex" justifyContent="space-evenly" width="100%">
  <Avatar.Circle />
  <Avatar.Circle
    src="https://i.pravatar.cc/50"
    alt="an image of a random user"
  />
</Box>

Custom image component (children)

You can also pass your very own children to Avatar, which may be useful in cases where you need to wrap it inside some custom component to extend it:

import { Box, Avatar, Text } from '@gympass/yoga';

<Box display="flex" justifyContent="space-evenly" width="100%">
  <Avatar>
    <Text color="white">LC</Text>
  </Avatar>

  <Avatar>
    <Box display="flex" justifyContent="center" alignItems="center" w="100%" h="100%" bg="peace">
      <Text color="vibin">Yoga</Text>
    </Box>
  </Avatar>
</Box><Box display="flex" justifyContent="space-evenly" width="100%">
  <Avatar>
    <Text color="white">LC</Text>
  </Avatar>

  <Avatar>
    <Box display="flex" justifyContent="center" alignItems="center" w="100%" h="100%" bg="peace">
      <Text color="vibin">Yoga</Text>
    </Box>
  </Avatar>
</Box>

Props

Prop	Description	Type	Default	Required