Skip to content

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 ​

PropertyAttributeTypeDefaultDescription
srcsrcstring''Image source URL for the avatar.
altaltstring''Alt text for the avatar image.
initialsinitialsstring''Initials to display when no image is provided.
variantvariant'circle' | 'square' | 'rounded''circle'Shape variant of the avatar.
sizesize'small' | 'medium' | 'large' | 'xlarge''medium'Size of the avatar.

Slots ​

NameDescription
(default)Default slot for content

CSS Custom Properties ​

PropertyDefault
--flint-avatar-size40px
--flint-avatar-bgvar(--flint-surface-3
--flint-avatar-colorvar(--flint-text-color-muted
--flint-font-family—
--flint-border-radius-md—
--flint-surface-2—
--flint-surface-3—