Avatar
An image element with a fallback for representing the user.
Default
Standard avatar with image and fallback.
avatar-example-default.ts
Sizes
Avatars come in three sizes: sm, default, and lg.
avatar-example-sizes.ts
Badges & Status
Add status indicators or icons using the badge component.
avatar-example-badge.ts
Avatar Groups
Stack multiple avatars together using the group component.
avatar-example-group.ts
Dropdown Integration
Avatars are commonly used as triggers for user menus.
avatar-example-dropdown.ts
Installation & Usage
Installation
Imports
Basic Skeleton
API Reference
Brain API
The brain directives provide the functional logic for image loading and fallbacks.
| Directive | Selector | Description |
|---|---|---|
| BrnAvatar | hlm-avatar, [brnAvatar] | Main container that manages image loading states. |
| BrnAvatarImage | img[hlmAvatarImage], [brnAvatarImage] | Directive for the image element. Handles error events. |
| BrnAvatarFallback | [hlmAvatarFallback], [brnAvatarFallback] | Displayed when the image fails to load or is not provided. |
Helm API
The helm components provide the default spartan/ui styling.
| Component / Directive | Selector | Inputs |
|---|---|---|
| HlmAvatar | hlm-avatar |
|
| HlmAvatarBadge | hlm-avatar-badge, [hlmAvatarBadge] | Small status indicator positioned on the avatar. |
| HlmAvatarGroup | hlm-avatar-group, [hlmAvatarGroup] | Wrapper for multiple avatars with overlap styling. |