Appearance
Avatar ​
Image
Loading...
Initials
Loading...
- Tag:
<flint-avatar> - Class:
FlintAvatar
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintAvatar } from 'flint-ui';Usage ​
html
<flint-avatar></flint-avatar>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
src | src | string | '' | Image source URL for the avatar. |
alt | alt | string | '' | Alt text for the avatar image. |
initials | initials | string | '' | Initials to display when no image is provided. |
variant | variant | 'circle' | 'square' | 'rounded' | 'circle' | Shape variant of the avatar. |
size | size | 'small' | 'medium' | 'large' | 'xlarge' | 'medium' | Size of the avatar. |
Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-avatar-size | 40px |
--flint-avatar-bg | var(--flint-surface-3 |
--flint-avatar-color | var(--flint-text-color-muted |
--flint-font-family | — |
--flint-border-radius-md | — |
--flint-surface-2 | — |
--flint-surface-3 | — |