API reference

Here's the full contract for avatar: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial avatar in with 19 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`size`	`string \| number`	`50`	Avatar size in pixels
`name`	`string`	—	User name for generating initials when image sources fail
`src`	`string \| SafeUrl`	—	Primary custom image source URL for the avatar
`alt`	`string`	—	Alternative text for the avatar image for accessibility
`round`	`boolean`	`true`	Whether the avatar should be circular (true) or follow cornerRadius
`bgColor`	`string`	—	Background color for text avatars. Auto-generated if not provided
`fgColor`	`string`	`#FFF`	Text color for initials in text avatars
`borderColor`	`string`	—	Border color around the avatar
`cornerRadius`	`string \| number`	`0`	Corner radius when round is false
`textSizeRatio`	`number`	`3`	Ratio to calculate text size from avatar size (size / textSizeRatio)
`initialsSize`	`string \| number`	`0`	Restricts the number of initials displayed (0 = no restriction)
`facebookId`	`string`	—	Facebook user ID for profile picture (best-effort, API restrictions may apply)
`githubId`	`string`	—	GitHub username for fetching profile picture
`gravatarId`	`string`	—	Gravatar email or MD5 hash for fetching profile picture
`value`	`string`	—	Display a custom value as avatar (e.g., "75%", "+5")
`style`	`Partial<CSSStyleDeclaration>`	—	Custom styles to apply to the avatar root element
`referrerpolicy`	`string`	—	Referrer policy for the avatar image (e.g., "no-referrer")
`badge`	`string \| number \| boolean \| null`	—	Corner overlay: `badge` / `[badge]="true"` → a dot; `badge="4k"` → a labelled pill; null / absent → nothing.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	Semantic colour of the badge (primary · secondary · success · danger · warning · info · light · dark) → `--hub-sys-color-*`.

Outputs

React to what avatar does — 1 events to hook your logic onto.

Name	Type	Description
`clickOnAvatar`	`Source`	Emitted when avatar is clicked, returns the current active source object

Templates

No templates documented yet.

CSS variables

Theme every pixel with 11 CSS variables. Override them at :root or scope them to a wrapper.

Size & Layout

Control avatar dimensions and spacing

Variable	Default	Type	Description
`--hub-avatar-size`	`50px`	length	Default avatar size when no size is specified `24px40px64px96px`
`--hub-avatar-border-radius`	`50%`	length	Border radius for avatar container `04px8px50%`

Colors & Appearance

Customize avatar colors and visual appearance

Variable	Default	Type	Description
`--hub-avatar-bg-color`	`var(--hub-sys-color-primary)`	color	Background color for text avatars `#007bff#28a745#dc3545#6f42c1`
`--hub-avatar-text-color`	`#ffffff`	color	Text color for initials in text avatars `#000000#ffffff#6c757d`
`--hub-avatar-border-color`	`transparent`	color	Border color around avatar `#dee2e6#007bff#28a745`
`--hub-avatar-border-width`	`0`	length	Border width around avatar `1px2px3px`

Typography

Control text appearance in avatar initials

Variable	Default	Type	Description
`--hub-avatar-font-family`	`Helvetica, Arial, sans-serif`	string	Font family for avatar initials `Inter, sans-serifRoboto, sans-serifsystem-ui`
`--hub-avatar-font-weight`	`normal`	string	Font weight for avatar initials `400500600bold`
`--hub-avatar-text-transform`	`uppercase`	string	Text transformation for initials `noneuppercaselowercasecapitalize`

Custom content

Sizing of content projected into the avatar. Background and foreground come from the avatar's own tokens.

Variable	Default	Type	Description
`--hub-avatar-content-padding`	`calc(var(--hub-avatar-size) * 0.2)`	length	Padding between the projected content and the avatar edge. `8px15%calc(var(--hub-avatar-size) * 0.25)`
`--hub-avatar-content-icon-size`	`calc(var(--hub-avatar-size) * 0.55)`	length	Font size for projected icon fonts / emoji (inherited by the glyph). `1.5remcalc(var(--hub-avatar-size) * 0.6)`

Styling and theming

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