Avatar KIT

    
    

        
            Copy
        
        
    

    
<h3 tuiTitle>
    Icon
    <span tuiSubtitle>
        Starts with
        <code>&#64;tui.</code>
    </span>
</h3>
<tui-avatar src="@tui.user" />
 
<h3 tuiTitle>
    Colored icon
    <span tuiSubtitle>
        Use
        <code>tuiIcon</code>
        pipe to resolve name
    </span>
</h3>
<tui-avatar [src]="'@tui.mastercard' | tuiIcon" />
 
<h3 tuiTitle>Image</h3>
<tui-avatar [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: '@tui.user' | async" />
 
<h3 tuiTitle>Initials</h3>
<tui-avatar src="AI" />
 
<h3 tuiTitle>Content</h3>
<div>
    <tui-avatar>99+</tui-avatar>
    <tui-avatar class="tui-space_horizontal-4">
        <picture>
            <source
                media="(min-width: 600px)"
                srcset="/assets/images/angular.svg"
            />
            <img
                alt="Alex Inkin"
                src="/assets/images/avatar.jpg"
            />
        </picture>
    </tui-avatar>
    <tui-avatar>
        <video
            autoplay
            loop
            playsinline
            [muted]="true"
        >
            <source
                src="/assets/media/bbb.mp4"
                type="video/mp4"
            />
        </video>
    </tui-avatar>
</div>
    

        
            Copy
        
        
    

    
import {AsyncPipe} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiFallbackSrcPipe, TuiIconPipe, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example1",
    imports: [AsyncPipe, TuiAvatar, TuiFallbackSrcPipe, TuiIconPipe, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {}
    

        
            Copy
        
        
    

    
:host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<tui-avatar
    appearance="negative"
    src="@tui.user"
/>
<tui-avatar
    src="AI"
    class="text"
    [style.background]="'AI' | tuiAutoColor"
/>
<tui-avatar class="text">
    <div tuiFade>Fading</div>
</tui-avatar>
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiAutoColorPipe} from '@taiga-ui/core';
import {TuiAvatar, TuiFade} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example2",
    imports: [TuiAutoColorPipe, TuiAvatar, TuiFade],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {}
    

        
            Copy
        
        
    

    
:host {
    display: flex;
    gap: 1rem;
}
 
.text {
    background: var(--tui-background-accent-opposite-pressed);
    color: var(--tui-background-base);
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<section *ngFor="let size of sizes">
    <tui-avatar [size]="size">{{ size | uppercase }}</tui-avatar>
    <tui-avatar
        src="@tui.user"
        [size]="size"
    />
</section>
    

        
            Copy
        
        
    

    
import {NgForOf, UpperCasePipe} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiAvatar} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example3",
    imports: [NgForOf, TuiAvatar, UpperCasePipe],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {
    protected readonly sizes = ['xxl', 'xl', 'l', 'm', 's', 'xs'] as const;
    protected readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan'];
}
    

        
            Copy
        
        
    

    
:host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
 
section {
    display: flex;
    gap: 0.5rem;
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<tui-avatar-stack
    *ngFor="let size of sizes; let odd = odd"
    class="tui-space_vertical-4"
    [direction]="odd ? 'left' : 'right'"
>
    <tui-avatar
        *ngFor="let name of names"
        [round]="odd"
        [size]="size"
        [src]="name | tuiInitials"
        [style.background]="name | tuiAutoColor"
    />
    <tui-avatar
        [round]="odd"
        [size]="size"
    >
        99+
    </tui-avatar>
</tui-avatar-stack>
    

        
            Copy
        
        
    

    
import {NgForOf} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import type {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
import {TuiAutoColorPipe, TuiInitialsPipe} from '@taiga-ui/core';
import {TuiAvatar, TuiAvatarStack} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example4",
    imports: [NgForOf, TuiAutoColorPipe, TuiAvatar, TuiAvatarStack, TuiInitialsPipe],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {
    protected readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan'];
    protected readonly sizes: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
        'xxl',
        'xl',
        'l',
        'm',
        's',
        'xs',
    ];
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    <tui-avatar src="DI" />

    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiAvatar, tuiAvatarOptionsProvider} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example5",
    imports: [TuiAvatar],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [tuiAvatarOptionsProvider({size: 'l'})],
})
export default class Example {}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<tui-avatar-labeled label="Grigori Constantinopolsky">
    <tui-avatar [src]="'https://avatars.githubusercontent.com/u/10106368' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
 
<tui-avatar-labeled label="Nikolai Rimsky-Korsakov">
    <tui-avatar [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
 
<tui-avatar-labeled label="Hubert Wolfflegelstainhausenbergedorf">
    <tui-avatar [src]="'https://avatars.githubusercontent.com/u/46284632' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
 
<tui-avatar-labeled label="Arkhangelsky Constantine">
    <tui-avatar [src]="'https://avatars.githubusercontent.com/u/35179038' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
 
<tui-avatar-labeled label="Zoya Kosmodemyanskaya">
    <tui-avatar [src]="'https://avatars.githubusercontent.com/u/8158578' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
    

        
            Copy
        
        
    

    
import {AsyncPipe} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiFallbackSrcPipe} from '@taiga-ui/core';
import {TuiAvatar, TuiAvatarLabeled} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example6",
    imports: [AsyncPipe, TuiAvatar, TuiAvatarLabeled, TuiFallbackSrcPipe],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {}
    

        
            Copy
        
        
    

    
:host {
    display: flex;
    gap: 1rem;
}
 
tui-avatar {
    border: 1px solid var(--tui-border-normal);
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<tui-avatar
    size="m"
    src="@tui.heart"
    tuiAvatarOutline
/>
 
<tui-avatar
    size="l"
    tuiAvatarOutline="var(--tui-background-accent-2)"
>
    <img
        alt="Alex Inkin"
        src="/assets/images/avatar.jpg"
    />
</tui-avatar>
 
<tui-avatar
    size="xl"
    src="OK"
    tuiAvatarOutline="linear-gradient(#c86dd7, #3023ae)"
    [style.background]="'linear-gradient(#3023ae, #c86dd7)'"
    [style.color]="'#fff'"
/>
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiAvatar, TuiAvatarOutline} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example7",
    imports: [TuiAvatar, TuiAvatarOutline],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {}
    

        
            Copy
        
        
    

    
:host {
    display: flex;
    gap: 1rem;
}
    

        
            Copy