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 '@micode-ui/react';
 
<Avatar src='https://johndoe.example' alt='Some cool alt'>
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>

Example

<Box
  css={{
    display: 'flex',
    gap: 20
  }}
>
  <Avatar src='https://avatars.githubusercontent.com/u/55795597?v=4'>
    <Avatar.Fallback></Avatar.Fallback>
  </Avatar>
  <Avatar src='https://avatars.githubusercontent.com/u/45916330?v=4'>
    <Avatar.Fallback></Avatar.Fallback>
  </Avatar>
  <Avatar src={undefined}>
    <Avatar.Fallback>MD</Avatar.Fallback>
  </Avatar>
</Box>

API Reference

Root

Contains all parts of the Avatar.

Prop	Type	Default
`asChild`	`boolean`	`false`
`onLoadingStatusChange`	`function`	No default value

Fallback

A feedback icon that sits on the left side of the input field.

Prop	Type	Default
`asChild`	`boolean`	`false`
`delayMs`	`number`	No default value

Additional Styling Button