Avatar

Measured from Attio — workspace tile 24px rounded, object icons 16px, user avatars circular, weight 600.

Installation

bun add crisp

import "crisp/styles.css";
import { Avatar } from "crisp";

Usage

import { Avatar } from "crisp";

export function Example() {
  return <Avatar tone="brand">JD</Avatar>;
}

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Sets width/height and font size — 16 / 20 / 24 / 32px.
`shape`	`"circle" \| "rounded"`	`"circle"`	`"circle"` for people, `"rounded"` (30% radius) for workspaces and object icons.
`tone`	`"neutral" \| "brand" \| "orange" \| "cyan" \| "purple" \| "green"`	`"neutral"`	Background color when no image is provided.
`asChild`	`boolean`	`false`	Renders the passed child element instead of a `<span>`.

Examples

Sizes

Four sizes — 16 / 20 / 24 / 32px. 24px matches Attio's measured workspace tile.

JDJDJDJD

<Avatar size="sm">JD</Avatar>
<Avatar size="md">JD</Avatar>
<Avatar size="lg">JD</Avatar>
<Avatar size="xl">JD</Avatar>

Shape

circle for people, rounded (30% radius) for workspace tiles and object icons.

JDW

<Avatar shape="circle">JD</Avatar>
<Avatar shape="rounded">W</Avatar>

Tones

Six background tones, used to visually differentiate users and workspaces that don't have an image.

NBOCPG

<Avatar tone="neutral">N</Avatar>
<Avatar tone="brand">B</Avatar>
<Avatar tone="orange">O</Avatar>
<Avatar tone="cyan">C</Avatar>
<Avatar tone="purple">P</Avatar>
<Avatar tone="green">G</Avatar>

With icon

A small rounded avatar standing in for an object icon — matches Attio's measured 16px object icon size.

<Avatar size="sm" shape="rounded" tone="cyan" aria-hidden>
  <TableIcon />
</Avatar>

Avatar renders a plain <span> — it is decorative by default. When an avatar is the only identifier for a user or workspace (no adjacent name text), give it an accessible name with aria-label. When it's paired with visible text (e.g. next to a person's name in a list row), mark the avatar aria-hidden so screen readers don't announce the initials twice.

Preview