Hexpunk
InstallConceptsElementsProsehp-cellhp-codehp-copyhp-hexhp-latexhp-visually-hiddenhp-buttonhp-checkboxhp-formhp-labelhp-radiohp-selecthp-sliderhp-togglehp-toggle-grouphp-badgehp-taghp-progresshp-spinnerhp-backgroundhp-clusterhp-collapsiblehp-demohp-gridhp-scroll-areahp-separatorhp-sidebarhp-toolbarhp-avatarhp-iconhp-pixelhp-linkhp-menubarhp-navigation-menuhp-tabshp-alert-dialoghp-context-menuhp-dialoghp-dropdown-menuhp-hover-cardhp-popoverhp-tooltiphp-bannerhp-toasthp-tetherhp-module-handlehp-unfold-listhp-unfold-overlayhp-unfold-pagehp-bondhp-link-nodePaletteAnimationsReleases

hp-avatar

Hex-shaped user avatar. Image clips into the hex; falls back to the slotted content (typically initials) on load error or while pending. Pure display element — wrap in <hp-button> or <hp-link> for interactive avatars.

Examples API Intent Changelog AL BO CA <body> <hp-avatar src="/me.jpg" alt="Izzy">IZ</hp-avatar> <hp-avatar size="md" src="/bob.jpg" alt="Bob">BO</hp-avatar> <hp-avatar size="lg" src="/cara.jpg" alt="Cara">CA</hp-avatar> </body> IZ JS CY <body> <hp-avatar>IZ</hp-avatar> <hp-avatar size="md">JS</hp-avatar> <hp-avatar size="lg">CY</hp-avatar> </body> ?? <body> <hp-avatar src="/missing.png" alt="Missing">??</hp-avatar> </body>

Install

bun add @hexpunk/core lit
import "@hexpunk/core";

Properties

Property Attribute Type Default Description
src src string "" Image URL. When set, the image renders inside the hex. On load error or while pending, the slotted fallback shows instead.
alt alt string "" Alt text for the image. Required for non-decorative avatars.
size size "sm" | "md" | "lg" "md" Avatar size — matches hp-hex sizes.

Slots

Slot Description
(default) Fallback content shown when no src or on image load error

CSS Parts

Part Description
avatar The avatar wrapper
fallback The fallback container holding the slotted initials

Accessibility

Set alt on every avatar that conveys identity. For purely decorative avatars (filler in a wireframe demo), pass alt="" to skip the announcement.

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close