Avatar
A circular avatar component with a fallback for showing your user image
Anatomy
Mount all pieces together and create your input
import { Avatar } from '@snowye-ui/react';
<Avatar src='https://johndoe.example' alt='Some cool alt'>
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>Example
JD
<Box
css={{
display: 'flex',
gap: 20
}}
>
<Avatar src='https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1964&q=80'>
<Avatar.Fallback></Avatar.Fallback>
</Avatar>
<Avatar src='https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'>
<Avatar.Fallback></Avatar.Fallback>
</Avatar>
<Avatar src={undefined}>
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>
</Box>API Reference
Root
Contains all parts of the Avatar.
Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
onLoadingStatusChange | function |
Fallback
A feedback icon that sits on the left side of the input field.
Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
delayMs | number |