Person pill

Ported

A person as a chip: a 22 px avatar and the name, 28 px high, on the raised fill with a 1 px edge. With render, a link or a button. Native attributes and ref pass through.

Ana RuizLee ParkJosé Núñez

import { PersonPill } from "@etched/monet/person-pill";

// A stand-in photo, so the page needs no network.
const photo = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#c3eac9"/><circle cx="32" cy="26" r="12" fill="#194f29"/><rect x="12" y="42" width="40" height="30" rx="20" fill="#194f29"/></svg>',
)}`;

export function Preview() {
  return (
    <div className="row">
      <PersonPill name="Ana Ruiz" />
      <PersonPill name="Lee Park" src={photo} />
      <PersonPill name="José Núñez" />
    </div>
  );
}

Installation

import { PersonPill } from "@etched/monet/person-pill";

Examples

Initials and photos

Priya ShahTom BeckerNoor Haddad

import { PersonPill } from "@etched/monet/person-pill";

// A stand-in photo, so the page needs no network.
const photo = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#c3eac9"/><circle cx="32" cy="26" r="12" fill="#194f29"/><rect x="12" y="42" width="40" height="30" rx="20" fill="#194f29"/></svg>',
)}`;

export function InitialsAndPhotos() {
  return (
    <div className="row">
      <PersonPill name="Priya Shah" />
      <PersonPill name="Tom Becker" src={photo} />
      <PersonPill name="Noor Haddad" />
    </div>
  );
}

Links and buttons

With render, a pill is a link to the person, or a button, such as Orbit's allowed senders that open their editor. An aria-label says what the button does. A disabled button stays in its place.

Sam Lee

Last edited: none.

import { useState } from "react";
import { PersonPill } from "@etched/monet/person-pill";

// A stand-in photo, so the page needs no network.
const photo = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#c3eac9"/><circle cx="32" cy="26" r="12" fill="#194f29"/><rect x="12" y="42" width="40" height="30" rx="20" fill="#194f29"/></svg>',
)}`;

export function LinksAndButtons() {
  const [last, setLast] = useState("none");

  return (
    <div className="rows">
      <div className="row">
        <PersonPill name="Sam Lee" render={<a href="#person-sam" />} />
        <PersonPill
          name="Kai Ito"
          src={photo}
          render={<button type="button" aria-label="Edit allowed senders for Ana Ruiz: Kai Ito" onClick={() => setLast("Kai Ito")} />}
        />
        <PersonPill name="Mira Osei" render={<button type="button" disabled aria-label="Edit allowed senders for Ana Ruiz: Mira Osei" />} />
      </div>
      <p>Last edited: {last}.</p>
    </div>
  );
}

Long names

In a narrow place, the name ends in an ellipsis. The title shows the whole name on hover.

Maximilian Alexander FeatherstonehaughWei Chen

import { PersonPill } from "@etched/monet/person-pill";

export function LongNames() {
  return (
    <div className="rows" style={{ maxInlineSize: "10rem", justifyItems: "start", gap: "var(--et-space-2)" }}>
      <PersonPill name="Maximilian Alexander Featherstonehaugh" />
      <PersonPill name="Wei Chen" />
    </div>
  );
}

Accessibility

A plain span with no role: screen readers read the name once, and the avatar beside it is hidden.
With render, it is a link or a button named by the name: Enter follows a link, and Enter or Space presses a button.
A long name ends in an ellipsis on screen only; screen readers read all of it, and title shows it on hover.
On a link or a button, set aria-label when the name alone does not say what it does, such as "Edit allowed senders: Ana Ruiz".

API reference

Prop	Type	Default	Description
name *	string	–	The person's name: the pill's text, and the avatar's initials. A long name ends in an ellipsis; `title` shows all of it.
src	string	–	Photo URL for the avatar. Until it loads, or when it fails, the initials show.
render	ReactElement<{ className?: string }>	–	Makes the pill another element with the pill's look: a link, `render={<a href="/people/12" />}` or a router link, or a button, `render={<button type="button" onClick={edit} />}`. Then it takes the hover fill and the focus ring. Its accessible name is the name; set `aria-label` to say more, for example "Edit allowed senders: Ana Ruiz".