# `LineaUI.Components.Avatar`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/avatar.ex#L1)

LineOne's avatars: an image or initials in a circle, a square, a squircle or any mask shape,
with a status dot, a gradient ring, and stacked in groups.

    <.avatar src="/images/jane.jpg" alt="Jane" />
    <.avatar initials="jd" color="primary" size="md" shape="square" />
    <.avatar initials="jd" color="info" variant="soft" />
    <.avatar src="/images/jane.jpg" size="lg" status="success" />
    <.avatar initials="jd" status="primary" status_position="bottom-left" ping />
    <.avatar src="/images/jane.jpg" gradient="sky-blue" size="lg" />

    <.avatar_group>
      <.avatar :for={user <- @users} src={user.photo} size="xs" ring />
    </.avatar_group>

    <.avatar src="/images/jane.jpg" size="2xs" ring={1} ring_color="primary" />
    <.avatar src="/images/jane.jpg" size="lg" face_class="border-2 border-white dark:border-navy-700" />
    <.avatar src="/images/jane.jpg" status="success" status_position="bottom-right" />

The inner block, when given, replaces the initials (an icon, a counter).

# `avatar`

Renders an avatar.
## Attributes

* `src` (`:string`) - Defaults to `nil`.
* `alt` (`:string`) - Defaults to `"avatar"`.
* `initials` (`:string`) - Shown (upper-cased) when there is no `src`. Defaults to `nil`.
* `size` (`:string`) - `3xs` is size-6, `2xs` size-7, `xs` size-8, `xs-plus` size-9, `sm` size-10 (default), `md` size-12, `lg` size-16, `xl` size-20, `2xl` size-24. Defaults to `"sm"`. Must be one of `"3xs"`, `"2xs"`, `"xs"`, `"xs-plus"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"`.
* `shape` (`:string`) - `square` is LineOne's `rounded-lg`, `rounded` its `rounded-xl`; the others are masks. Defaults to `"circle"`. Must be one of `"circle"`, `"square"`, `"rounded"`, `"squircle"`, `"reuleaux-triangle"`, `"diamond"`, `"hexagon"`, `"hexagon-2"`, `"octagon"`, `"star"`, `"star-2"`, or `"heart"`.
* `color` (`:string`) - The initials' color. Defaults to `"neutral"`. Must be one of `"neutral"`, `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, or `"error"`.
* `variant` (`:string`) - How the initials are painted; `skeleton` is the grey placeholder. Defaults to `"solid"`. Must be one of `"solid"`, `"soft"`, `"bordered"`, or `"skeleton"`.
* `status` (`:any`) - A status dot's color; `nil` or `false` shows no dot. Works the same on an image and on initials. Use `status_position="bottom-right"` for LineOne's online dot. Defaults to `nil`. Must be one of `nil`, `false`, `"neutral"`, `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, or `"error"`.
* `status_position` (`:string`) - Defaults to `"top-right"`. Must be one of `"top-right"`, `"top-left"`, `"bottom-right"`, or `"bottom-left"`.
* `ping` (`:boolean`) - Animates the status dot with a ping. Defaults to `false`.
* `ring` (`:any`) - The ring avatars wear inside a group. `true` is a 2px ring; `1`, `2` or `4` pick the width. Defaults to `false`. Must be one of `true`, `false`, `1`, `2`, `4`, `"1"`, `"2"`, or `"4"`.
* `ring_color` (`:string`) - `white` is white in light mode and the card color in dark mode. Defaults to `"white"`. Must be one of `"white"`, `"neutral"`, `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, or `"error"`.
* `face_class` (`:any`) - Classes merged into the picture or initials face itself (a border, a shadow), while `class` goes on the wrapper. Defaults to `nil`.
* `gradient` (`:string`) - A gradient border around the avatar. Defaults to `nil`. Must be one of `nil`, `"sky-blue"`, `"amber-orange"`, `"pink-rose"`, `"purple-orange"`, `"green-fuchsia"`, `"purple-indigo"`, or `"fuchsia-pink"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `avatar_group`

Stacks avatars so they overlap, as LineOne's avatar group. Give the avatars `ring` so each
one is outlined against the next.

    <.avatar_group>
      <.avatar src="/a.jpg" size="xs" ring />
      <.avatar initials="jd" color="info" size="xs" ring />
    </.avatar_group>

## Attributes

* `pulse` (`:boolean`) - Pulses the whole group, for skeletons. Defaults to `false`.
* `overlap` (`:string`) - How far the avatars overlap: `2` is `-space-x-2`, `3` is `-space-x-3`. Defaults to `"2"`. Must be one of `"2"`, or `"3"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*