Avatar component is used to display user or entity avatar images.
Sizes
Supports five sizes: Xs, Sm, Md, Lg, Xl.
(live preview unavailable)
1
2
3
4
5
6
7
8
9
rsx!{
div { style:"display:flex;gap:8px;padding:1rem;align-items:center;",
div { style:"width:16px;height:16px;border-radius:50%;background:#3a6ea5;display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;","XS"}
div { style:"width:24px;height:24px;border-radius:50%;background:#3a6ea5;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;","S"}
div { style:"width:32px;height:32px;border-radius:50%;background:#3a6ea5;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;","M"}
div { style:"width:40px;height:40px;border-radius:50%;background:#3a6ea5;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;","L"}
div { style:"width:48px;height:48px;border-radius:50%;background:#3a6ea5;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;","XL"}}}
1
<HAvatar name="Hikari" size="md" />
Shape Variants
Supports three shapes: Circular, Rounded, Square.
(live preview unavailable)
1
2
3
4
5
6
7
rsx!{
div { style:"display:flex;gap:12px;padding:1rem;align-items:center;",
div { style:"width:40px;height:40px;border-radius:50%;background:#3a6ea5;display:flex;align-items:center;justify-content:center;color:#fff;","A"}
div { style:"width:40px;height:40px;border-radius:8px;background:#3a6ea5;display:flex;align-items:center;justify-content:center;color:#fff;","B"}
div { style:"width:40px;height:40px;border-radius:0;background:#3a6ea5;display:flex;align-items:center;justify-content:center;color:#fff;","C"}}}
1
<HAvatar name="Hikari" size="md" />
Text Fallback
When no image is available, displays initials or custom text.
(live preview unavailable)
1
2
3
4
5
rsx!{
div { style:"display:flex;gap:8px;padding:1rem;",
div { style:"width:40px;height:40px;border-radius:50%;background:#3a6ea5;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;","JD"}}}