Avatar

Image with initials when the picture is missing.

When to use

Use Avatar when you need image with initials when the picture is missing.

Import

TypeScript

import { Avatar } from '@gzodo/ui'

Avatar uses img, not a framework image component. If src is missing or fails to load, fallback is shown. A string fallback becomes initials from the first letters of the name. color sets the fallback background and picks a contrasting text color.

Examples

ALGU

Initials

Two words become two letters. A single word becomes one letter.

ALALALAL

Sizes

sm, md, lg, and xl. Default is md.

GUA

Color

color is the fallback background. Text is black or white based on the luminance of that color.

ALU

Rounded

rounded uses a full pill radius instead of the default squircle.

Image

src shows the image. If it fails, the component falls back to initials. alt is the image accessible name.

Avatar

Property

Description

Type

Default

src

Image URL.

string

—

alt

Accessible name of the image.

string

—

fallback

Shown without an image. Strings become initials.

ReactNode

—

size

Diameter of the avatar.

'sm' | 'md' | 'lg' | 'xl'

'md'

color

Fallback background. Text contrast is derived from it.

string

—

rounded

Pill shape instead of the default radius.

boolean

false

className

Extra classes on the root.

string

—

DataView

SideBar