---
github: true
---

## Usage

::component-card
---
props:
  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
  alt: 'Avatar'
---
::

### Size

Use the `size` prop to change the size of the Avatar.

::component-card
---
props:
  size: 'md'
baseProps:
  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
  alt: 'Avatar'
---
::

### Chip

Use the `chipColor`, `chipVariant` and `chipPosition` props to display a chip on the Avatar.

::component-card
---
props:
  chipColor: 'primary'
  chipVariant: 'solid'
  chipPosition: 'top-right'
baseProps:
  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
  alt: 'Avatar'
---
::

### Placeholder

If there is an error loading the `src` of the avatar or `src` is null a background placeholder will be displayed, customizable in `ui.avatar.background`.

If there's an `alt` prop initials will be displayed on top of the background, customizable in `ui.avatar.placeholder`.

::component-card
---
props:
  alt: 'Benjamin Canac'
---
::

### Group

To stack avatars as a group, use the `AvatarGroup` component.

- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
- To size all the avatars equally, pass the `size` prop
- To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`

::component-card{slug="AvatarGroup"}
---
props:
  size: 'md'
  max: 2
ui:
  size:
    '3xs': ''
    '2xs': ''
    xs: ''
    sm: ''
    md: ''
    lg: ''
    xl: ''
    '2xl': ''
    '3xl': ''
code: |
  <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
    <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
    <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
---

#default
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
:u-avatar{src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Avatar"}
:u-avatar{src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="Avatar"}
::

## Props

:component-props

## Preset

:component-preset