Components

Avatar

Identifies a person or company with a picture, or with initials when there is none, and an optional status dot.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook for the controls.

Live example, StorybookOpen in Storybook

Default

An Avatar loads the picture; without one, or when it fails to load, it shows the initials of the name. A person is a circle, a company a square with 8 px corners. name is required: the accessible name and the initials come from it.

U1U2SL

import { Avatar } from '@bigbang/ui';

const picture = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#3b6ea8"/><circle cx="32" cy="25" r="11" fill="#dbe7f5"/><path d="M10 64c2-14 12-22 22-22s20 8 22 22z" fill="#dbe7f5"/></svg>',
)}`;

export default function Default() {
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <Avatar name="User 1" src={picture} size="lg" />
      <Avatar name="User 2" size="lg" />
      <Avatar name="Sample Ltd" kind="company" size="lg" />
    </div>
  );
}

Sizes

There are five sizes: 24, 32 (default), 40, 48 and 64 px. Use sm or md in lists and xl in profile headers.

U1U1U1U1U1

import { Avatar } from '@bigbang/ui';

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-end gap-xl">
      <Avatar name="User 1" size="xs" />
      <Avatar name="User 1" size="sm" />
      <Avatar name="User 1" size="md" />
      <Avatar name="User 1" size="lg" />
      <Avatar name="User 1" size="xl" />
    </div>
  );
}

Status

status adds a dot at the bottom inline end: online, offline or busy. A 2 px surface ring separates it from the picture. The state is also part of the accessible name: “User 1 (online)”. The offline dot is hollow, so the three states differ in shape as well as colour.

U1U2U4SL

import { Avatar } from '@bigbang/ui';

export default function Status() {
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <Avatar name="User 1" status="online" size="lg" />
      <Avatar name="User 2" status="offline" size="lg" />
      <Avatar name="User 4" status="busy" size="lg" />
      <Avatar name="Sample Ltd" kind="company" status="online" size="lg" />
    </div>
  );
}

Fallbacks

Without a picture the initials show. They are upper-cased with the casing rules of the Provider language: in Turkish “ilk işlem” becomes İİ. Without a name a person or company icon shows. A picture that fails to load also falls back to the initials. The fallback colour comes from the name; one name always gets one colour.

İİUU5

import { Avatar } from '@bigbang/ui';

export default function Fallbacks() {
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <Avatar name="ilk işlem" size="lg" />
      <Avatar name="User" size="lg" />
      <Avatar name="" size="lg" />
      <Avatar name="" kind="company" size="lg" />
      <Avatar name="User 5" src="missing-picture.png" size="lg" />
    </div>
  );
}

Group

Avatar.Group overlaps avatars by 8 px and adds a “+N” count when max is exceeded. Give the group an aria-label: it becomes a named group.

U1U2U4U5

import { Avatar } from '@bigbang/ui';

const people = ['User 1', 'User 2', 'User 4', 'User 5', 'User 6', 'User 3'];

export default function Group() {
  return (
    <Avatar.Group max={4} aria-label="Team">
      {people.map((name) => (
        <Avatar key={name} name={name} />
      ))}
    </Avatar.Group>
  );
}

Light and dark mode

Fallback colours come from the status tone tokens and exceed 4.5:1 in both modes.

İİUU5

import { Avatar } from '@bigbang/ui';

export default function Fallbacks() {
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <Avatar name="ilk işlem" size="lg" />
      <Avatar name="User" size="lg" />
      <Avatar name="" size="lg" />
      <Avatar name="" kind="company" size="lg" />
      <Avatar name="User 5" src="missing-picture.png" size="lg" />
    </div>
  );
}