Avatar Component
Flexible avatar component with text/placeholder fallbacks, SVG masking, themes, and dynamic sizing.
Notes
- Use
<span class="avatar">A for text initials; add <img> child for images.
- Empty or missing
img[src=""] is hidden and the container shows fallback text "Null".
- For background-image avatars, set
style="background-image: url(...)" directly on .avatar.
- RTL is auto-supported;
avatar-bubble-start / avatar-bubble-end flip their tail direction.
Base
Text initials
A
B
C
AB
张三
Image via img child
Image via background-image
Combination (overlay on image avatar)
+10
Upload
Tap to change
Solid theme colors
Primary
P
Secondary
S
Tertiary
T
Success
S
Error
E
Info
I
Highlight
H
Title
T
Description
D
Caption
C
Placeholder
D
Subtle theme (borderless)
Subtle primary
P
S
T
S
E
I
H
T
D
C
D
Muted theme (with border)
Muted primary
P
S
T
S
E
I
H
T
D
C
D
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Solid with Tailwind palettes
A
B
C
Solid with raw values
R
P
Subtle with Tailwind palettes
A
B
Muted with Tailwind palettes
A
B
Shapes
avatar-circle / avatar-pill
A
avatar-rounded
A
avatar-square
A
avatar-fluid
A
avatar-scoop
A
avatar-beveled
A
B
avatar-squircle
A
B
With border: A
avatar-flower
A
B
With border: A
avatar-bubble-start
A
B
With border: A
avatar-bubble-end
A
B
With border: A
Sizes
avatar-4 ~ avatar-10
4
5
6
7
8
9
10
avatar-11 ~ avatar-20
11
12
13
14
15
16
17
18
19
20
avatar-21 ~ avatar-30
21
22
23
24
25
26
27
28
29
30