Avatar
Avatar displays a user image, initials, or icon. Pair with gk-avatar-group for overlapping stacks and overflow.
Demos
Size
Named sizes
sm, md, lg, or a custom pixel value via size="48". Portrait photos use object-fit: cover by default. Shape
Default corners use a small radius. Set
round for a circle. Color
Use
color as the background when showing initials or icons. Icon
Put any icon (inline SVG, emoji, etc.) in the default slot. There is no built-in icon set.
Fallback
When
src fails to load, the default slot (e.g. initials) is shown instead. Avatar Group
max limits visible avatars. Put a custom +N control in the overflow slot (here 5 avatars, max="3" → +2). The group also reflects remaining count as rest. API
Avatar Props
| Prop | Type | Default |
|---|---|---|
src | string | — |
alt | string | '' |
size | 'sm' | 'md' | 'lg' | \${number}`` | 'md' |
round | boolean | false |
color | string | — |
object-fit | string | 'cover' |
Avatar Slots
| Name | Description |
|---|---|
| default | Initials, icon, or fallback content when there is no image |
Avatar CSS Parts
| Part | Description |
|---|---|
base | Outer surface |
image | <img> when src loads |
content | Wrapper around the default slot |
AvatarGroup Props
| Prop | Type | Default |
|---|---|---|
max | number | — |
size | 'sm' | 'md' | 'lg' | \${number}`` | — |
rest | number (reflected) | 0 |
When size is set on the group, it is applied to child avatars for consistent overlap.
AvatarGroup Slots
| Name | Description |
|---|---|
| default | gk-avatar children |
| overflow | Custom overflow UI (e.g. +N); shown when rest > 0 |