Skip to content
OpenPerf
Esc
↑↓navigate↵open⌘Jpreview
On this page

Avatar

A person as a circle with initials, a project or service as a square tile with an icon.

import { Avatar } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function AvatarBasic() {
  return (
    <Preview>
      <Avatar.Root>AB</Avatar.Root>
    </Preview>
  );
}
  • Use an avatar to identify a person, project or service next to its name.
  • Pass initials or an icon as children. They stay visible while src loads and if it fails.
  • Give alt with src when the name isn’t next to the avatar.

Shapes

import { Avatar } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function AvatarShapes() {
  return (
    <Preview>
      <Avatar.Root>AB</Avatar.Root>
      <Avatar.Root shape="square">AB</Avatar.Root>
    </Preview>
  );
}

Shape tells the entity type: circle for people, square for projects and services. Don’t use shape as decoration.

Sizes

import { Avatar } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function AvatarSizes() {
  return (
    <Preview>
      <Avatar.Root size="xs">AB</Avatar.Root>
      <Avatar.Root size="sm">AB</Avatar.Root>
      <Avatar.Root size="md">AB</Avatar.Root>
      <Avatar.Root>AB</Avatar.Root>
      <Avatar.Root size="xl">AB</Avatar.Root>
    </Preview>
  );
}
Size Use
xs Waterfall rows, meta lines
sm Table rows, workspace pill
md Pickers
lg User row, group headers
xl Standalone headers, app identity

lg is the default.

Tones

import { Avatar } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function AvatarTones() {
  return (
    <Preview>
      <Avatar.Root>AB</Avatar.Root>
      <Avatar.Root tone="accent">AB</Avatar.Root>
      <Avatar.Root tone="inverse">AB</Avatar.Root>
      <Avatar.Root tone="raised">AB</Avatar.Root>
    </Preview>
  );
}

neutral is the default. Use accent only for the signed-in user and inverse for a high-contrast identity such as the workspace pill. raised sits on the page colour with a raised shadow, as the OpenPerf tile in a standalone header.

Group

import { Avatar } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function AvatarGroup() {
  return (
    <Preview>
      <Avatar.Group>
        <Avatar.Root>AB</Avatar.Root>
        <Avatar.Root>CD</Avatar.Root>
        <Avatar.Root>EF</Avatar.Root>
      </Avatar.Group>
    </Preview>
  );
}

Use Avatar.Group when several projects or people share one compact slot, such as the projects of a release. It overlaps the avatars and adds a ring in the page colour. Keep their size and shape the same.

Bridge

import { Avatar } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function AvatarBridge() {
  return (
    <Preview>
      <Avatar.Bridge
        from={<Avatar.Root shape="square">AB</Avatar.Root>}
        to={<Avatar.Root shape="square">CD</Avatar.Root>}
      />
    </Preview>
  );
}

Use Avatar.Bridge to show that two apps are connected, such as an OAuth client and OpenPerf on the consent screen. It draws a dashed wire with a check between from and to and gives avatars passed there a raised shadow. The bridge is hidden from assistive technology, so name both apps in the text next to it.

API

PropType
shape?"circle" | "square"
Type"circle" | "square"
Default"circle"
size?"xs" | "sm" | "md" | "lg" | "xl"
Type"xs" | "sm" | "md" | "lg" | "xl"
Default"lg"
tone?"neutral" | "accent" | "inverse" | "raised"
Type"neutral" | "accent" | "inverse" | "raised"
Default"neutral"
src?string

Image URL. Children show until it loads.

Typestring
alt?string

Alt text for the image.

Typestring
children?ReactNode

Fallback: initials or an icon.

TypeReactNode
fromReactNode

On Bridge. The connecting app.

TypeReactNode
toReactNode

On Bridge. The app being connected to.

TypeReactNode

Parts: Root, Bridge, Group. Other props of Group and Bridge go to the native div. Built on Base UI Avatar.

Was this page helpful?