Avatar

Represents a person, entity, or object using an image, icon, or text, such as a user photo, initials, or symbolic graphic. Avatars help provide visual context and identity within the interface.

Usage

Use avatars to visually identify users or related entities in lists, profiles, or collaborative features. Choose the appropriate variant based on available data - images for personal recognition, initials or icons as fallbacks.

Behavior

An avatar is a control only when it is written as a button or an a element, so the element itself carries the role, the tab stop and the keyboard behavior. On any other tag it stays a plain avatar and is never given a role or a tabindex it cannot honor.

API Reference

Component attribute(s)

x-h-avatar
x-h-avatar-image
x-h-avatar-fallback

Attributes

x-h-avatar

Attribute	Type	Required	Description
data-variant	primary positive negative warning information	false	Semantic color state
data-color	white black red orange yellow green teal blue indigo purple pink gray	false	Fills the avatar solid with a standard palette color. Overrides data-variant.

Data Slots

Slot	Element
avatar	x-h-avatar
avatar-image	x-h-avatar-image
avatar-fallback	x-h-avatar-fallback

Examples

Default

<div x-h-avatar>
  <img x-h-avatar-image src="/harmonia/logo/harmonia-square.svg" alt="@harmonia" />
  <div x-h-avatar-fallback>HM</div>
</div>

Fallback

When the image link does not return an image, the fallback text is shown.

<div x-h-avatar>
  <img x-h-avatar-image src="/harmonia/logo/non-existant.svg" alt="@harmonia" />
  <div x-h-avatar-fallback>HM</div>
</div>

Big avatar

<div x-h-avatar class="size-12">
  <img x-h-avatar-image src="/harmonia/logo/harmonia-square.svg" alt="@harmonia" />
  <div x-h-avatar-fallback>HM</div>
</div>

Square avatar

You can change the avatar shape by using the rounded- classes.

<div x-h-avatar class="rounded-md">
  <img x-h-avatar-image src="/harmonia/logo/harmonia-square.svg" alt="@harmonia" />
  <div x-h-avatar-fallback>HM</div>
</div>

Text-only

<div x-h-avatar>HM</div>

Icon-only

<div x-h-avatar aria-label="user">
  <svg x-h-icon data-icon="circle-user" role="presentaion"></svg>
</div>

Variants

Inside an active sidebar menu button or menu nav, a variant avatar switches to the button's own foreground color so it stays legible.

<div x-h-avatar data-variant="primary">
  <svg x-h-icon data-icon="circle-user" role="img" aria-label="user"></svg>
</div>

<div x-h-avatar data-variant="information">
  <svg x-h-icon data-icon="circle-info" role="img" aria-label="info"></svg>
</div>

<div x-h-avatar data-variant="warning">
  <svg x-h-icon data-icon="circle-warning" role="img" aria-label="warning"></svg>
</div>

<div x-h-avatar data-variant="positive">
  <svg x-h-icon data-icon="circle-success" role="img" aria-label="success"></svg>
</div>

<div x-h-avatar data-variant="negative">
  <svg x-h-icon data-icon="circle-error" role="img" aria-label="error"></svg>
</div>

<div x-h-avatar data-variant="primary">PR</div>

<div x-h-avatar data-variant="information">IN</div>

<div x-h-avatar data-variant="warning">WA</div>

<div x-h-avatar data-variant="positive">PO</div>

<div x-h-avatar data-variant="negative">NE</div>

Colors

Use data-color to fill the avatar with one of Harmonia's standard palette colors. This is independent of the semantic data-variant and is well suited to color-coded initials.

<div x-h-avatar data-color="red">RE</div>
<div x-h-avatar data-color="orange">OR</div>
<div x-h-avatar data-color="yellow">YE</div>
<div x-h-avatar data-color="green">GR</div>
<div x-h-avatar data-color="teal">TE</div>
<div x-h-avatar data-color="blue">BL</div>
<div x-h-avatar data-color="indigo">IN</div>
<div x-h-avatar data-color="purple">PU</div>
<div x-h-avatar data-color="pink">PI</div>
<div x-h-avatar data-color="gray">GY</div>
<div x-h-avatar data-color="white">WH</div>
<div x-h-avatar data-color="black">BK</div>

Interactive

To make an avatar interactive, write it as a button or an a element instead of a div. Use a button when the avatar acts on the page, and an a with an href when it leads somewhere.

<button x-h-avatar>HM</button>

<a x-h-avatar href="#interactive">HM</a>