Design guidance
When and how to use this
Use a Avatar to show a representation of a user. If an image is provided, it will show that image, otherwise it will try and parse the user's initials from the name you provide. If you don't provide anything it shows a user icon
Attribute | Usage |
---|---|
Size | we support sm, md, and lg avatars |
React
Avatar composes Chakra's Avatar component
CM
TM
States
These states are implicit based on the information provided
Size
There are three sizes
Grouped
React Native
You can pass name
and image
to Avatar
and it will do the best to determine
what to display. If nothing is passed, a fallback "user profile" icon will be
rendered.
import { XStack, Avatar } from '@hoverinc/design-system-react-native';const App = () => ( <XStack gap="$300"> <Avatar name="Héctor Lavoe" /> <Avatar name="Héctor Lavoe" image="https://i.pravatar.cc/150?u=hector" /> <Avatar /> </XStack>);

Size
There are three sizes available:
import { XStack, Avatar, AvatarSizes,} from '@hoverinc/design-system-react-native';const App = () => ( <XStack gap="$300"> <Avatar size={AvatarSizes.Small} name="Celia Cruz" image="https://i.pravatar.cc/150?u=celia" /> <Avatar size={AvatarSizes.Medium} name="Celia Cruz" image="https://i.pravatar.cc/150?u=celia" /> <Avatar size={AvatarSizes.Large} name="Celia Cruz" image="https://i.pravatar.cc/150?u=celia" /> <Avatar /> </XStack>);

Grouped
We support grouping/stacking of Avatar
via the AvatarGroup
component:
import { Avatar, AvatarGroup } from '@hoverinc/design-system-react-native';const App = () => ( <AvatarGroup max={3}> <Avatar name="Luiz Ortega" /> <Avatar name="Paulo Sonoplasta" /> <Avatar name="Francisco Labirintite" /> <Avatar name="Marcela Mil Grau" /> <Avatar name="Toninho do Diabo" /> <Avatar name="Carina Medeiros" /> </AvatarGroup>);
