API reference

Inputs

size

Type: string | number

Default: 50

Avatar size in pixels

name

Type: string

User name for generating initials when image sources fail

src

Type: string | SafeUrl

Primary custom image source URL for the avatar

alt

Type: string

Alternative text for the avatar image for accessibility

round

Type: boolean

Default: true

Whether the avatar should be circular (true) or follow cornerRadius

bgColor

Type: string

Background color for text avatars. Auto-generated if not provided

fgColor

Type: string

Default: #FFF

Text color for initials in text avatars

borderColor

Type: string

Border color around the avatar

cornerRadius

Type: string | number

Default: 0

Corner radius when round is false

textSizeRatio

Type: number

Default: 3

Ratio to calculate text size from avatar size (size / textSizeRatio)

initialsSize

Type: string | number

Default: 0

Restricts the number of initials displayed (0 = no restriction)

facebookId

Type: string

Facebook user ID for profile picture (best-effort, API restrictions may apply)

githubId

Type: string

GitHub username for fetching profile picture

gravatarId

Type: string

Gravatar email or MD5 hash for fetching profile picture

value

Type: string

Display a custom value as avatar (e.g., "75%", "+5")

style

Type: Partial<CSSStyleDeclaration>

Custom styles to apply to the avatar root element

referrerpolicy

Type: string

Referrer policy for the avatar image (e.g., "no-referrer")

Outputs

clickOnAvatar

Type: Source

Emitted when avatar is clicked, returns the current active source object

Templates

No templates documented yet.

CSS variables

Size & Layout

Control avatar dimensions and spacing

`--hub-avatar-size`

Type: length

Default:50px

Default avatar size when no size is specified

Examples:

24px40px64px96px

`--hub-avatar-border-radius`

Type: length

Default:50%

Border radius for avatar container

Examples:

04px8px50%

Colors & Appearance

Customize avatar colors and visual appearance

`--hub-avatar-bg-color`

Type: color

Default:auto-generated

Background color for text avatars

Examples:

#007bff#28a745#dc3545#6f42c1

`--hub-avatar-text-color`

Type: color

Default:#ffffff

Text color for initials in text avatars

Examples:

#000000#ffffff#6c757d

`--hub-avatar-border-color`

Type: color

Default:transparent

Border color around avatar

Examples:

#dee2e6#007bff#28a745

`--hub-avatar-border-width`

Type: length

Default:0

Border width around avatar

Examples:

1px2px3px

Typography

Control text appearance in avatar initials

`--hub-avatar-font-family`

Type: string

Default:Helvetica, Arial, sans-serif

Font family for avatar initials

Examples:

Inter, sans-serifRoboto, sans-serifsystem-ui

`--hub-avatar-font-weight`

Type: string

Default:normal

Font weight for avatar initials

Examples:

400500600bold

`--hub-avatar-text-transform`

Type: string

Default:uppercase

Text transformation for initials

Examples:

noneuppercaselowercasecapitalize

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.