components

Avatar

Avatars represent users or entities with initials, icons, or images. They come in multiple sizes and visual themes to fit different UI contexts. Use the AvatarGroup component to display a collection of avatars together.

Import
import { Avatar, AvatarGroup } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

  • +Represent users, resources, or contacts visually with initials or images.
  • +Display a group of people (e.g. assigned resources) using AvatarGroup.
  • +Provide a recognizable visual anchor in lists, cards, or detail views.

When not to use

  • −For decorative icons — use Icon component.
  • −For status indicators — use Badge or Lozenge.
  • −For company/brand logos — use a standard img element.

Examples

Code Samples

Sizes

Avatars are available in four sizes: large, medium, small, and tiny.

import { Avatar } from "@skedulo/breeze-ui-react";

export default function AvatarSizes() {
  return (
    <div className="flex items-center gap-3">
      <Avatar size="large" label="Large Avatar" />
      <Avatar size="medium" label="Medium Avatar" />
      <Avatar size="small" label="Small Avatar" />
      <Avatar size="tiny" label="Tiny Avatar" />
    </div>
  );
}

Themes

Three visual themes are available: solid (filled background), subtle (light background), and border (outlined).

import { Avatar } from "@skedulo/breeze-ui-react";

export default function AvatarThemes() {
  return (
    <div className="flex items-center gap-3">
      <Avatar size="large" label="Solid Theme" theme="solid" />
      <Avatar size="large" label="Subtle Theme" theme="subtle" />
      <Avatar size="large" label="Border Theme" theme="border" />
    </div>
  );
}

With Icon

Avatars can display a Breeze icon instead of initials using the icon prop.

import { Avatar } from "@skedulo/breeze-ui-react";

export default function AvatarWithIcon() {
  return (
    <div className="flex items-center gap-3">
      <Avatar size="large" label="Resource" icon="resource" />
      <Avatar size="large" label="Activity" icon="activity" />
      <Avatar size="large" label="Contact" icon="contact" />
    </div>
  );
}

Avatar Group

Use AvatarGroup to display a collection of avatars together in a compact, overlapping layout.

import { Avatar, AvatarGroup } from "@skedulo/breeze-ui-react";

export default function AvatarGroupExample() {
  return (
    <AvatarGroup>
      <Avatar label="Alice Johnson" />
      <Avatar label="Bob Smith" />
      <Avatar label="Carol Davis" />
      <Avatar label="Dan Wilson" />
    </AvatarGroup>
  );
}

Guidelines

Do

  • ✓Always provide a meaningful label prop for accessibility — initials are derived from it.
  • ✓Use AvatarGroup for collections of avatars with natural overlap.
  • ✓Use consistent sizes within the same context.
  • ✓Use imageUrl for real user photos when available.

Don't

  • ✗Don't use more than 2-word labels — initials work best with first + last name.
  • ✗Don't mix avatar sizes in the same row or group.
  • ✗Don't use icon avatars when a user's identity should be recognizable.
  • ✗Don't use tiny size for primary content — it's only for very compact UIs.

API Reference

PropTypeDefaultDescription
label*string—The accessible label for the avatar. Initials are automatically derived from this value when no icon or image is provided.
size"large" | "medium" | "small" | "tiny""medium"Controls the size of the avatar.
theme"solid" | "subtle" | "border""solid"The visual theme of the avatar. Solid uses a filled background, subtle uses a lighter background, and border uses an outlined style.
iconstring—The name of a Breeze icon to display inside the avatar instead of initials.
imageUrlstring—A URL to a profile image. When provided, the image is shown instead of initials or an icon.

Related Components

BadgeLozengeCard