Avatar
Display a representation of a user—their photo, initials, or a general icon on a background.
React
Avatar composes Chakra's Avatar component.
CM
LO
States
These states are implicit based on the information provided. An image will be
shown if provided—otherwise Avatar will try and parse the user's initials from
the name you provide. If you don't provide anything it shows a user icon.
Size
There are three sizes, with medium as a default.
Grouped
Props
| Property | Type | Default | Description |
|---|---|---|---|
size | sm, md, lg | md | Size of avatar |
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>);