AvatarLabel

Stable
WCAG 2.2 evidence
RTL

An avatar with a name and an optional subtitle beside it, for a person in a list, a header or a mention. The name is real text and the avatar repeats it, so the avatar is decorative and hidden from assistive technology: a screen reader reads "Ayesha Khan, Senior product designer" once (WCAG 1.1.1, 1.3.1). Names and subtitles wrap, never truncate (1.4.10, 1.4.12). Presentational: renders in React Server Components, without React Aria. Consumer duties: write the real name; keep the subtitle short and meaningful on its own; for a person with a status, put the Presence in the avatar you pass and write the status as visible text somewhere (1.4.1). Make the label a link or button by wrapping it. In dense tables use the table cell variant instead.

import { AvatarLabel } from "@nexera-ui/react";

Loading example…

6
examples: 4
props: 1
live controls: 1
platform: 6
WCAG criteria: 9
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

size

Generated code

import { AvatarLabel } from "@nexera-ui/react";

<AvatarLabel />

Examples 5

The same examples as Storybook, rendered live. Open Code to copy one.

Name only

Without a subtitle the name is centred against the avatar.

Loading example…

app.tsx

import { AvatarLabel } from "@nexera-ui/react";

const sizes = ["sm", "md", "lg"] as const;

export function NameOnly() {
  return (
    <div className="flex flex-col items-start gap-4">
      {sizes.map((size) => (
        <AvatarLabel key={size} name="Ayesha Khan" size={size} />
      ))}
    </div>
  );
}

With photo and presence

Pass any Avatar in avatar: the label sets its size and makes it decorative, because the name is written beside it.

Loading example…

app.tsx

import { Avatar, AvatarLabel, Presence } from "@nexera-ui/react";

const SAMPLE_PHOTO = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect width="40" height="40" fill="steelblue"/>' +
    '<circle cx="20" cy="15" r="7.6" fill="white" fill-opacity="0.92"/>' +
    '<ellipse cx="20" cy="38" rx="15.6" ry="12" fill="white" fill-opacity="0.92"/></svg>',
)}`;

export function WithPhotoAndPresence() {
  return (
    <div className="flex flex-col items-start gap-4">
      <AvatarLabel
        name="Ayesha Khan"
        subtitle="Senior product designer"
        size="md"
        avatar={<Avatar isDecorative type="photo" src={SAMPLE_PHOTO} initials="AK" />}
      />
      <AvatarLabel
        name="Bilal Ahmed"
        subtitle="Online"
        size="lg"
        avatar={
          <Avatar isDecorative initials="BA" presence={<Presence status="online" isDecorative />} />
        }
      />
      <AvatarLabel
        name="Acme Payroll"
        subtitle="Company"
        size="md"
        avatar={<Avatar isDecorative type="company" initials="A" />}
      />
    </div>
  );
}

Long content

Long names and subtitles wrap in a narrow container; nothing is cut off and nothing scrolls the page at 320 px.

Loading example…

app.tsx

import { AvatarLabel } from "@nexera-ui/react";

export function LongContent() {
  return (
    <div className="max-w-60">
      <AvatarLabel
        name="Muhammad Abdul-Rahman Al-Fahad bin Sultan"
        subtitle="Senior regional payroll compliance and benefits administrator"
        size="md"
      />
    </div>
  );
}

In a list

In a list, each person is one readable line of text: "Ayesha Khan, Senior product designer".

Loading example…

app.tsx

import { AvatarLabel } from "@nexera-ui/react";

export function InAList() {
  return (
    <ul className="m-0 flex max-w-xs list-none flex-col gap-3 p-0">
      {[
        ["Ayesha Khan", "Senior product designer"],
        ["Bilal Ahmed", "Payroll lead"],
        ["Chen Li", "People operations"],
      ].map(([name, subtitle]) => (
        <li key={name}>
          <AvatarLabel name={name ?? ""} subtitle={subtitle} size="md" />
        </li>
      ))}
    </ul>
  );
}

Right to left

Right-to-left: the avatar moves to the right, the text aligns to the start and the initials follow the name.

Loading example…

app.tsx

import { AvatarLabel } from "@nexera-ui/react";

const sizes = ["sm", "md", "lg"] as const;

export function RightToLeft() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-col items-start gap-4">
      {sizes.map((size) => (
        <AvatarLabel key={size} name="أيشة خان" subtitle="مصممة منتجات أولى" size={size} />
      ))}
    </div>
  );
}

Props 4

Press "Try it" on a card to load that prop into the playground.

name*Nexera

string

The person's or team's name. It is the accessible name of the whole label, and the source of the default initials.

subtitleNexera

ReactNode

The second line, for example a job title or an email. Shown when provided. It wraps; it is never cut off.

avatarNexera

ReactNode

The avatar: pass an Avatar element with isDecorative, for example a photo, because the name is written next to it. The label sets its size and keeps it decorative. When it is left out the label draws an initials avatar from the first letters of the first and last word of name; null shows no avatar.

sizeNexera

"sm" | "md" | "lg"

Size of the label and of its avatar: 24, 32 or 40 px, with the text styles of that size.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

3 direct · 3 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<AvatarLabel className="shadow-sm" />

Theme studio

AvatarLabel

Try every prop. Copy the code.

Examples 5

Name only

With photo and presence

Long content

In a list

Right to left

Props 4

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components