Syntara

Preview

Code

Arjun ShahPriya ShahAarav ShahFather

Father isn’t added yet. He can still use network rates.

Installation

npm

Manual

pnpm

npm

yarn

bun

pnpm add @syntara/react @syntara/tokens

import { PersonChip, PersonChipGroup } from '@syntara/react';

Usage

import { PersonChip, PersonChipGroup } from '@syntara/react';

export function Covered() {
  return (
    <PersonChipGroup aria-label="Covered members">
      <PersonChip name="Arjun Shah" />
      <PersonChip name="Priya Shah" />
      <PersonChip name="Father" placeholder />
    </PersonChipGroup>
  );
}

Examples

In a sentence

sm chips in running text.

Preview

Code

Priya Shah booked a consultation for Aarav Shah on Thursday at 10:30.

Removable

onRemove turns the group into a React Aria TagGroup: arrow keys, Delete/Backspace, remove buttons.

Preview

Code

Arjun Shah

Priya Shah

Aarav Shah

Meera Iyer

Sizes

md (32px) and sm (24px), including the placeholder.

Preview

Code

Daniel OkaforMei LinSpouse

Accessibility

Keys	Action
`Tab`	Removable group: moves focus into the group (last focused chip), then to that chip's remove button, then out.
`ArrowLeft`or`ArrowRight`	Removable group: moves between chips (flipped in RTL).
`Home`or`End`	Removable group: first / last chip.
`Delete`or`Backspace`	Removable group: removes the focused chip.
`Enter`or`Space`	On a remove button: removes that chip.

Static chips are plain text; the avatar is decorative (alt="") so the name is read once.
Without onRemove, PersonChipGroup is role="list" and each chip a listitem. Give it an aria-label that says who they are.
With onRemove it's a React Aria TagGroup (role="grid"); remove buttons are named "Remove <name>" in the user's language and keep a 24px target at sm size.
A placeholder chip only looks optional; put the reason in visible text nearby ("Father isn't added yet").
Chips pop in on mount, staggered in a group; with reduced motion they simply appear.

Guidelines

Do

Use for people attached to an item: who's covered, who a claim is for, who's reviewing.
Keep the placeholder's name as the relationship ("Father") and explain it in text.

Don’t

Don't use PersonChip as a button or link on its own; wrap it or use a Button.
Don't mix removable and static chips in one group.
Don't show more than about six chips; summarise the rest ("+3 more").

API reference

PersonChip

nameRequired

string

Shown in the chip; drives the avatar's initials and tint.

src

string

Avatar photo. Initials show while it loads and if it fails.

tint

autodefault
none
brand
accent
info
success
warning
danger

Avatar tint. auto hashes the name, matching the same person's Avatar elsewhere.

size

sm
mddefault

md is 32px tall, sm 24px. Inherits from PersonChipGroup.

placeholder

boolean

Someone not added yet: a dashed sunken pill, a "?" avatar and the name in italic text.subtle.

Default false

id

Key

Key passed to PersonChipGroup's onRemove. Defaults to name.

PersonChipGroup

size: sm
mddefault
Size of every chip; sets the gap too.
onRemove: (keys: Set<Key>) => void
Makes chips removable: the group becomes a React Aria TagGroup (grid) and each chip gets a remove button. Needs aria-label or aria-labelledby.
disabledKeys: Iterable<Key>
With onRemove: chips that can't be removed.
childrenRequired: ReactNode
PersonChip elements.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour8: surface.defaultsurface.sunkentext.defaulttext.subtletext.disabledborder.defaultborder.strongfocus.ring
Type8: font.bodyfont.headingfont.size.smfont.size.xsfont.tracking.smfont.tracking.xsfont.weight.mediumfont.weight.regular
Space and size7: space.1space.2space.3space.5space.6space.8icon.stroke
Shape1: radius.pill
Depth1: hairline
Motion5: motion.duration.fastmotion.duration.springmotion.springmotion.easingmotion.easingOut