Skip to content

BbAvatar

Displays an avatar and has a fallback content slot.

import { BbAvatar } from 'bitboss-ui';

On this page

Props

NameTypeDefaultDescription
altstring | undefined""

Alternative text for the image, used for accessibility.

It does double duty: alternative text on the image, and the accessible name of the fallback, which the component labels with role="img". Leaving it empty makes the fallback nameless — correct only for a decorative avatar.

See example
ptPtMap<BbAvatarPtPart, never> | undefined-

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

pt:iconPtValue | undefined-
pt:rootPtValue | undefined-
sizenumber | ({ size?: any; } & string) | keyof Sizes | undefined"md"

Defines the component size. Accepted values: - A key from the provided size map (keyof T), e.g. 'sm' | 'md' | 'lg' - A custom CSS size string (e.g. '20px', '1.5rem', '2em') - A number, typically interpreted as pixels by size parsers

The same scale BbIcon reads, so an avatar and an icon line up on the same key. A percentage fills a square parent, which is how an avatar sits in a cell that already has a size.

See example
sizesstring | undefined-

Sizes attribute for the image, used with srcset.

Passes straight through to the <img>, and only means anything alongside srcset.

srcstring | undefined-

Source URL of the avatar image.

See example
srcsetstring | undefined-

Responsive image source set.

Passes straight through to the <img>, so pair it with sizes or the browser has no width to pick against. The image is center-cropped, so the sources do not need to be pre-cropped square.

timeoutnumber | undefined400

Milliseconds to wait after mount before checking whether the image loaded correctly (SSR fallback).

The deadline is a safety net for prerendered pages, where the image events can fire before hydration. It is not terminal: the <img> stays mounted and a late photo replaces the fallback. Raise it for a slow origin rather than accepting the visible flip.

See example

Slots

The listed properties are the ones exposed to the slot scope.

NameTypeDescription
defaultRecord<string, never>

Fallback content shown when no image source is provided or when the image fails to load. Typically used to render initials or a placeholder icon.

The one sanctioned place to hand-place a BbIcon, because BbAvatar has no icon prop — that is how a bot or a service account gets a brand mark instead of initials.

See example

Changes from v2

Props removed or renamed in 3.0. If you are coming from v2, the answer is here.

  • colorremovedfails silently