Avatar
User avatar with image, initials, shapes, and custom sizes.
<rhx-avatar>
Examples
Images
<rhx-avatar rhx-image="https://i.pravatar.cc/150?u=a"
rhx-label="Alice" rhx-size="small" />
<rhx-avatar rhx-image="https://i.pravatar.cc/150?u=b"
rhx-label="Bob" />
<rhx-avatar rhx-image="https://i.pravatar.cc/150?u=c"
rhx-label="Charlie" rhx-size="large" />Initials
JD
AB
KS
MR
TN
LP
<rhx-avatar rhx-initials="JD" rhx-label="John Doe" />
<rhx-avatar rhx-initials="AB" rhx-label="Alice Brown" />
<rhx-avatar rhx-initials="KS" rhx-label="Karen Smith" />
<rhx-avatar rhx-initials="MR" rhx-label="Mike Ross" />
<rhx-avatar rhx-initials="TN" rhx-label="Tina Nguyen" />
<rhx-avatar rhx-initials="LP" rhx-label="Liam Parker" />Shapes
JD
JD
JD
<rhx-avatar rhx-initials="JD" rhx-label="Circle" rhx-shape="circle" />
<rhx-avatar rhx-initials="JD" rhx-label="Rounded" rhx-shape="rounded" />
<rhx-avatar rhx-initials="JD" rhx-label="Square" rhx-shape="square" />Custom Size
XL
<rhx-avatar rhx-initials="XL" rhx-label="Extra large avatar" rhx-size="5rem" />Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-image |
string |
- |
URL of the avatar image |
rhx-initials |
string |
- |
One or two letter initials (used when no image) |
rhx-label |
string |
- |
Accessible label (required) |
rhx-size |
string |
medium |
Size: small, medium, large, or any CSS value |
rhx-shape |
string |
circle |
Shape: circle, rounded, square |
Accessibility
- Image avatars use
alttext fromrhx-labelfor screen reader announcement. - Initials avatars use
aria-labelso screen readers announce the full name, not just the letters. - Decorative avatars can use
aria-hidden="true"when the identity is conveyed by adjacent text.