Avatar

An image element with a fallback for representing the user.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-preview',
	imports: [HlmAvatarImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12">
			<hlm-avatar>
				<img
					hlmAvatarImage
					src="/assets/avatar.png"
					alt="spartan logo. Resembling a spartanic shield"
					class="grayscale"
				/>
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar>
				<img
					hlmAvatarImage
					src="/assets/avatar.png"
					alt="spartan logo. Resembling a spartanic shield"
					class="grayscale"
				/>
				<span hlmAvatarFallback>RG</span>
				<hlm-avatar-badge class="bg-red-600 dark:bg-red-800" />
			</hlm-avatar>
			<hlm-avatar-group class="grayscale">
				<hlm-avatar>
					<img hlmAvatarImage src="/assets/avatar.png" alt="spartan logo. Resembling a spartanic shield" />
					<span hlmAvatarFallback>RG</span>
				</hlm-avatar>
				<hlm-avatar>
					<img hlmAvatarImage src="/assets/avatar.png" alt="spartan logo. Resembling a spartanic shield" />
					<span hlmAvatarFallback>RG</span>
				</hlm-avatar>
				<hlm-avatar>
					<img hlmAvatarImage src="/assets/avatar.png" alt="spartan logo. Resembling a spartanic shield" />
					<span hlmAvatarFallback>RG</span>
				</hlm-avatar>
				<hlm-avatar-group-count>+3</hlm-avatar-group-count>
			</hlm-avatar-group>
		</div>
	`,
})
export class AvatarPreview {}

Installation

ng g @spartan-ng/cli:ui avatar

Usage

import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

<hlm-avatar>
   <img hlmAvatarImage src='/assets/avatar.png' alt='spartan logo. Resembling a spartanic shield' />
   <span hlmAvatarFallback>RG</span>
</hlm-avatar>

Examples

Basic

A basic avatar component with an image and a fallback.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-basic-preview',
	imports: [HlmAvatarImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-avatar>
			<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
			<span hlmAvatarFallback>RG</span>
		</hlm-avatar>
	`,
})
export class AvatarBasicPreview {}

Badge

Use the hlm-avatar-badge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-badge-preview',
	imports: [HlmAvatarImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-avatar>
			<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" />
			<span hlmAvatarFallback>RG</span>
			<hlm-avatar-badge class="bg-red-600 dark:bg-red-800" />
		</hlm-avatar>
	`,
})
export class AvatarBadgePreview {}

Badge Icon

You can also use an icon inside hlm-avatar-badge .

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-badge-icon-preview',
	imports: [HlmAvatarImports, NgIcon],
	providers: [provideIcons({ lucidePlus })],

	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-avatar class="grayscale">
			<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" />
			<span hlmAvatarFallback>RG</span>
			<hlm-avatar-badge>
				<ng-icon name="lucidePlus" />
			</hlm-avatar-badge>
		</hlm-avatar>
	`,
})
export class AvatarBadgeIconPreview {}

Avatar Group

Use the hlm-avatar-group component to add a group of avatars.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-group-preview',
	imports: [HlmAvatarImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-avatar-group class="grayscale">
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
		</hlm-avatar-group>
	`,
})
export class AvatarGroupPreview {}

Avatar Group Count

Use hlm-avatar-group-count to add a count to the group.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-group-count-preview',
	imports: [HlmAvatarImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-avatar-group class="grayscale">
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar-group-count>+3</hlm-avatar-group-count>
		</hlm-avatar-group>
	`,
})
export class AvatarGroupCountPreview {}

Avatar Group Icon

You can also use an icon inside hlm-avatar-group-count

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-group-icon-preview',
	imports: [HlmAvatarImports, NgIcon],
	providers: [provideIcons({ lucidePlus })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-avatar-group class="grayscale">
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar-group-count>
				<ng-icon name="lucidePlus" />
			</hlm-avatar-group-count>
		</hlm-avatar-group>
	`,
})
export class AvatarGroupIconPreview {}

Sizes

Use the size prop to change the size of the avatar.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-sizes-preview',
	imports: [HlmAvatarImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex flex-wrap items-center gap-2 grayscale">
			<hlm-avatar size="sm">
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
			<hlm-avatar size="lg">
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" class="grayscale" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
		</div>
	`,
})
export class AvatarSizesPreview {}

Dropdown

You can use the hlm-avatar component as trigger for a dropdown menu.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';

@Component({
	selector: 'spartan-avatar-dropdown-preview',
	imports: [HlmAvatarImports, HlmDropdownMenuImports, HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<button hlmBtn variant="ghost" size="icon" class="rounded-full" [hlmDropdownMenuTrigger]="menu">
			<hlm-avatar>
				<img hlmAvatarImage src="/assets/avatar.png" alt="@spartan-ui logo" />
				<span hlmAvatarFallback>RG</span>
			</hlm-avatar>
		</button>

		<ng-template #menu>
			<hlm-dropdown-menu>
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>Profile</button>
					<button hlmDropdownMenuItem>Billing</button>
					<button hlmDropdownMenuItem>Settings</button>
				</hlm-dropdown-menu-group>
				<hlm-dropdown-menu-separator />
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem variant="destructive">Log out</button>
				</hlm-dropdown-menu-group>
			</hlm-dropdown-menu>
		</ng-template>
	`,
})
export class AvatarDropdownPreview {}

Brain API

BrnAvatar

Selector: brn-avatar

BrnAvatarFallback

Selector: [brnAvatarFallback]

ExportAs: avatarFallback

BrnAvatarImage

Selector: img[brnAvatarImage]

ExportAs: avatarImage

Helm API

HlmAvatarBadge

Selector: [hlmAvatarBadge],hlm-avatar-badge

HlmAvatarFallback

Selector: [hlmAvatarFallback]

ExportAs: avatarFallback

HlmAvatarGroupCount

Selector: [hlmAvatarGroupCount],hlm-avatar-group-count

HlmAvatarGroup

Selector: [hlmAvatarGroup],hlm-avatar-group

HlmAvatarImage

Selector: img[hlmAvatarImage]

ExportAs: avatarImage

HlmAvatar

Selector: hlm-avatar

Inputs

Prop	Type	Default	Description
size	'default' \| 'sm' \| 'lg'	default	-

Badge

Autocomplete

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.