Avatar
A versatile avatar component for displaying user profile pictures, initials, or icons with customizable styling options.
Import
import {FktAvatarComponent} from "frakton-ng/avatar";Basic
Basic avatar with default settings showing an icon.
Image
Avatar displaying a user image.
Extra large
Large
Normal
Small
Extra small
@for (variant of variants; track variant.label) {
{{ variant.label }}
} Initials
Avatar displaying user initials.
Extra largeSA
LargeJD
NormalAM
SmallSU
Extra smallJK
@for (variant of variants; track variant.label) {
{{ variant.label }}
} Loading
Avatar in loading state.
Extra largeSA
LargeJD
NormalAM
SmallSU
Extra smallJK
@for (variant of variants; track variant.label) {
{{ variant.label }}
} Custom icons
Avatar with a custom icon.
Extra large
Large
Normal
Small
Extra small
@for (variant of variants; track variant.label) {
{{ variant.label }}
} Shapes
Avatar with circle shape.
Circle
Square
Rounded
@for (variant of variants; track variant.label) {
{{ variant.label }}
} Semantic colors
Avatar with primary background color.
PrimaryPR
InfoIN
WarningWA
DangerDA
AccentAC
SuccessSU
@for (variant of variants; track variant.label) {
{{ variant.label }}
} Custom colors
Avatar with custom hex colors.
WhiteCC
PurpleCC
MagentaCC
BlackCC
Dark blueCC
BrownCC
@for (variant of variants; track variant.label) {
{{ variant.label }}
}