Skip to main content

Avatar

Overview​

The Avatar component represents a person or entity as a compact image. It falls back automatically from a photo (src) to initials (from name/initials) to a custom icon, and finally to a generic default icon — so you never have to hand-roll the broken-image or missing-photo case.

Import​

import { Avatar } from '@allxsmith/bestax-bulma';

Props​

PropTypeDefaultDescription
srcstring—Image URL. On load error (or if absent), falls back to initials, then icon.
altstring—Alternate text for the image (used for the accessible name in every render mode).
namestring—Derives initials and a deterministic background color when no src is shown.
initialsstring—Explicit initials override (else derived from name).
iconReact.ReactNode—Final fallback, rendered when there is no src, name, or initials.
size'16x16' | '24x24' | '32x32' | '48x48' | '64x64' | '96x96' | '128x128' | number—Preset size, or a pixel size when a number.
shape'circle' | 'rounded' | 'square''circle'Avatar shape.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white'—Background color for initials/icon avatars (else auto-derived from name).
asReact.ElementType—Element/component to render as. Defaults to 'a' when href is set, else 'figure'.
hrefstring—When set, renders the avatar as a link.
classNamestring—Additional CSS classes.
...All standard HTML and Bulma helper props(See Helper Props)

Usage​

Photo with automatic fallback​

If the image fails to load, Avatar swaps to initials derived from name automatically.

<Avatar
  src="https://bulma.io/assets/images/placeholders/128x128.png"
  name="Ada Lovelace"
  size="64x64"
/>

Initials​

No src — initials render on a deterministic auto background color derived from name.

<Block>
  <Avatar name="Ada Lovelace" />
  <Avatar name="Grace Hopper" />
  <Avatar name="Katherine Johnson" />
</Block>

Icon fallback​

<Avatar icon={<Icon name="user" />} color="info" shape="rounded" />

Shapes​

<Block>
  <Avatar name="Circle" shape="circle" />
  <Avatar name="Rounded" shape="rounded" />
  <Avatar name="Square" shape="square" />
</Block>

Sizes​

Preset sizes mirror Image's fixed-size list; a number renders a pixel size.

<Block>
  <Avatar name="Ada Lovelace" size="24x24" />
  <Avatar name="Ada Lovelace" size="32x32" />
  <Avatar name="Ada Lovelace" size="48x48" />
  <Avatar name="Ada Lovelace" size="64x64" />
  <Avatar name="Ada Lovelace" size={20} />
</Block>

Clickable avatar​

<Avatar name="Ada Lovelace" href="https://bestax.io" />

Accessibility​

  • Image avatars use alt (falling back to name) for their accessible name.
  • Initials/icon avatars expose role="img" and aria-label (from alt/name) — unless rendered as a link or button, where the native link/button role and aria-label are used instead.
  • The default fallback icon is aria-hidden.

See also​

  • Avatars — an overlapping group of Avatars with a surplus bubble.
  • Badge — a status/count indicator that overlays an Avatar (or any element).