Skip to content
Data Display

Avatar

client26.25 kB
@stellaria/nebula-webAvatarProps

Preview

Props

9
PropTypeDefault

alt

The image's alt text, and the accessible name of the whole avatar when there is no image. It falls back to `name`; with neither, the avatar says nothing at all — which is what you want beside a name already written out, and not what you want when it stands alone.

string

—

children

Replaces the initials — a glyph, a status mark. It never shows over an image, so it is the fallback's fallback and not a layer on top.

ReactNode

—

className

string

—

color

The scale the fallback draws from. Deriving it from the name is the consumer's job — the same `color` here gives every avatar in a list the same tint.

ColorExtended"primary"

name

Where the initials come from: the first letter of the first and last words, uppercased. It also names the avatar when there is no `alt`.

string

—

radius

How round it is. `"sm"` and `"md"` are what turn it into a squircle for a team or an org.

"sm" | "md" | "full""full"

size

The avatar's square, as a control step or as any length. Unlike the rest of the sizes here it takes a raw value, which is what lets it line up with a row of arbitrary height.

Size | Unit"md"

src

The picture. A load failure is remembered for the life of the component, so it falls back to the initials once and does not flicker between the two on later renders.

string

—

variant

How the fallback is filled. It only ever shows when there is no image, so it dresses the initials and nothing else.

AvatarVariant"light"

Slot props

1

Each one spreads over an inner element, so you can restyle a region without forking the component.

PropTypeDefault

imageProps

The image. Only rendered with a `src` that has not failed to load; on failure the initials take over.

Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">

—

Also accepts

On top of its own props, this component forwards these groups.

Style props · 127