Components

Avatar

Image

Astro

---
import { Avatar } from "@opui/astro"
---

<Avatar
  src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?q=80&w=1827&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="Avatar"
/>

<Avatar
  src="https://images.unsplash.com/photo-1672714413950-c9f7c5a45fa1?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="Avatar"
/>

<Avatar
  src="https://plus.unsplash.com/premium_photo-1675674458649-0c667500f3cc?q=80&w=1885&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="Avatar"
/>

Output

<div class="ui-avatar">
  <img
    src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?q=80&w=1827&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>
<div class="ui-avatar">
  <img
    src="https://images.unsplash.com/photo-1672714413950-c9f7c5a45fa1?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>
<div class="ui-avatar">
  <img
    src="https://plus.unsplash.com/premium_photo-1675674458649-0c667500f3cc?q=80&w=1885&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>

Letter

Astro

---
import { Avatar } from "@opui/astro"
---

<Avatar>LE</Avatar>
<Avatar>TT</Avatar>
<Avatar>ER</Avatar>

Output

<div class="ui-avatar">LE</div>
<div class="ui-avatar">TT</div>
<div class="ui-avatar">ER</div>

Icon

Astro

---
import { Avatar } from "@opui/astro"
---

<Avatar>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
    ><path
      fill="currentColor"
      d="M3 7.5A4.5 4.5 0 0 1 7.5 3h17A4.5 4.5 0 0 1 29 7.5v17a4.5 4.5 0 0 1-4.5 4.5h-17A4.5 4.5 0 0 1 3 24.5zm10.707 2.793a1 1 0 0 0-1.414 0l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414L9.414 16l4.293-4.293a1 1 0 0 0 0-1.414m4.586 1.414L22.586 16l-4.293 4.293a1 1 0 0 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414l-5-5a1 1 0 1 0-1.414 1.414"
    ></path></svg
  >
</Avatar>

<Avatar>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
    ><path
      fill="currentColor"
      d="M5.25 4A3.25 3.25 0 0 0 2 7.25v17.5A3.25 3.25 0 0 0 5.25 28h21.5A3.25 3.25 0 0 0 30 24.75V7.25A3.25 3.25 0 0 0 26.75 4zM18 13a1 1 0 0 1 1-1h6a1 1 0 0 1 0 2h-6a1 1 0 0 1-1-1m1 4h6a1 1 0 0 1 0 2h-6a1 1 0 1 1 0-2m-6-4a2 2 0 1 1-4 0a2 2 0 0 1 4 0m-6 4.5A1.5 1.5 0 0 1 8.5 16h5a1.5 1.5 0 0 1 1.5 1.5s0 3.5-4 3.5s-4-3.5-4-3.5"
    ></path></svg
  >
</Avatar>

<Avatar>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
    ><path
      fill="currentColor"
      d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14s14-6.268 14-14S23.732 2 16 2m0 22.5c-3.866 0-7-2.429-7-6.071A2.43 2.43 0 0 1 11.429 16h9.142A2.43 2.43 0 0 1 23 18.429c0 3.642-3.134 6.071-7 6.071m0-10A3.75 3.75 0 1 1 16 7a3.75 3.75 0 0 1 0 7.5"
    ></path></svg
  >
</Avatar>

Output

<div class="ui-avatar">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M3 7.5A4.5 4.5 0 0 1 7.5 3h17A4.5 4.5 0 0 1 29 7.5v17a4.5 4.5 0 0 1-4.5 4.5h-17A4.5 4.5 0 0 1 3 24.5zm10.707 2.793a1 1 0 0 0-1.414 0l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414L9.414 16l4.293-4.293a1 1 0 0 0 0-1.414m4.586 1.414L22.586 16l-4.293 4.293a1 1 0 0 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414l-5-5a1 1 0 1 0-1.414 1.414"
    ></path>
  </svg>
</div>
<div class="ui-avatar">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M5.25 4A3.25 3.25 0 0 0 2 7.25v17.5A3.25 3.25 0 0 0 5.25 28h21.5A3.25 3.25 0 0 0 30 24.75V7.25A3.25 3.25 0 0 0 26.75 4zM18 13a1 1 0 0 1 1-1h6a1 1 0 0 1 0 2h-6a1 1 0 0 1-1-1m1 4h6a1 1 0 0 1 0 2h-6a1 1 0 1 1 0-2m-6-4a2 2 0 1 1-4 0a2 2 0 0 1 4 0m-6 4.5A1.5 1.5 0 0 1 8.5 16h5a1.5 1.5 0 0 1 1.5 1.5s0 3.5-4 3.5s-4-3.5-4-3.5"
    ></path>
  </svg>
</div>
<div class="ui-avatar">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14s14-6.268 14-14S23.732 2 16 2m0 22.5c-3.866 0-7-2.429-7-6.071A2.43 2.43 0 0 1 11.429 16h9.142A2.43 2.43 0 0 1 23 18.429c0 3.642-3.134 6.071-7 6.071m0-10A3.75 3.75 0 1 1 16 7a3.75 3.75 0 0 1 0 7.5"
    ></path>
  </svg>
</div>

Variants

Change the shape of the avatar with the variant prop.

Astro

---
import { Avatar } from "@opui/astro"
---

<Avatar variant="squared">SQ</Avatar>

<Avatar
  variant="rounded"
  src="https://images.unsplash.com/photo-1616286608358-0e1b143f7d2f?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="Avatar"
/>

<Avatar
  variant="squircle"
  src="https://plus.unsplash.com/premium_photo-1770631651199-d92007477b6f?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="Avatar"
/>

Output

<div class="ui-avatar ui-squared">SQ</div>
<div class="ui-avatar ui-rounded">
  <img
    src="https://images.unsplash.com/photo-1616286608358-0e1b143f7d2f?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>
<div class="ui-avatar ui-squircle">
  <img
    src="https://plus.unsplash.com/premium_photo-1770631651199-d92007477b6f?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>

Grouped

Group multiple avatars by setting the isGroup prop on a parent container.

IJ KL

Astro

---
import { Avatar } from "@opui/astro"
---

<Avatar isGroup>
  <Avatar>AB</Avatar>
  <Avatar>CD</Avatar>
  <Avatar as="button">EF</Avatar>
  <Avatar as="button">GH</Avatar>
  <Avatar href="#">IJ</Avatar>
  <Avatar href="#">KL</Avatar>
</Avatar>

Output

<div role="group">
  <div class="ui-avatar">AB</div>
  <div class="ui-avatar">CD</div>
  <button class="ui-avatar">EF</button><button class="ui-avatar">GH</button
  ><a href="#" class="ui-avatar">IJ</a><a href="#" class="ui-avatar">KL</a>
</div>

API

Avatar API

Prop	Type	Default	Description
`alt`	`string`	-	Alternative text for the image.
`as`	`"div"`, `"button"`, `"a"`	-	The element to render. Defaults to `"a"` with `href`, otherwise `"div"`.
`command`	`string`	-	The command to send to the `commandfor` target.
`commandfor`	`string`	-	The id of the element the command targets.
`disabled`	`boolean`	-	Disables the avatar when `as` is `"button"`.
`href`	`string`	-	The link to use. Renders an `<a>`.
`interestfor`	`string`	-	The id of the element to show on interest.
`isGroup`	`boolean`	`false`	Renders a container that groups avatars.
`src`	`string`	-	The image source. Replaces the default slot.
`variant`	`"squared"`, `"rounded"`, `"squircle"`	-	The variant to use.

Slots

Slot	Description
`default`	Letters or an icon, when there's no image.

Browser support

See also the full browser support guide.

Installation

avatar.css

@layer components.root {
  :where(.ui-avatar) {
    --_bg-color: var(--primary);
    --_color: var(--color-1);
    --_width: 40px;

    align-items: center;
    aspect-ratio: 1;
    background-color: var(--_bg-color);
    border-radius: var(--radius-round);
    color: var(--_color);
    display: inline-flex;
    inline-size: var(--_width);
    justify-content: center;
    overflow: clip;
    position: relative;
    text-align: center;
    text-decoration: none;

    &:has(img) {
      background-color: transparent;
    }

    svg {
      max-inline-size: var(--size-5);
    }

    img {
      block-size: 100%;
      inline-size: 100%;
      inset: 0;
      object-fit: cover;
      position: absolute;
    }

    &.ui-squared {
      border-radius: 0;
    }

    &.ui-rounded {
      border-radius: var(--radius-2);
    }

    &.ui-squircle {
      border-radius: var(--radius-3);

      @supports (corner-shape: squircle) {
        border-radius: var(--radius-round);
        corner-shape: squircle;
      }
    }
  }

  :where([role="group"]) {
    --_margin: var(--size-3);
    --_outline-color: var(--surface-default);

    display: flex;

    .ui-avatar {
      box-shadow: 0 0 0 2px var(--_outline-color);
      margin-inline-end: calc(-1 * var(--_margin));
    }
  }
}