Tag

Something the reader put there and can take away: a person on a team, a filter on a list, a label on a record.

Try it

The tag does not remove itself: onRemove tells the caller, who takes it out of the list, as with the Alert.

Tag or badge

The roadmap left it open whether a tag is a Badge with a button. It is not. A badge is a rectangle that says a state and is never touched; its own page says it is not interactive and carries no role. A tag is a capsule that stands for a thing, and it has a button. One component for both would have given the badge a button or taken the tag’s away.

No tones

A tag is neutral, decided on 2026-09-21. The theme’s tones are meanings: success, danger, warning. What is painted on a tag is a category — a kind of appointment, a team — and the theme has no colours for categories yet. Given green and red, tags would spend them, and they would stop meaning success and danger anywhere else. The tones come with a categorical palette.

Sizes, and what stands before the words

It is drawn once, inside the Combobox: 32 tall, an Avatar of 28, a name in the caption style. The Avatar’s scale has 24 and 30 and no 28, so the Avatar here is 24. The small tag is what a 40 field has room for, and is the one the Combobox uses.

In a field

On a card a tag is surface/sunken. A field is already that grey, and the tag would vanish into it, so a field hands it --tag-fill: the Combobox gives the raised surface, the drawn white. It also takes the button out of the tab order, with removeProps, because there the keyboard has Backspace and the list, and six tags would be six stops before the field.

Accessibility

A tag on its own has one way to be taken away, so its button is a real button in the tab order, named “Remove” and the tag’s words, 24 across. A set of tags is a list, so their number is said. A tag that is removed takes its button with it, and the focus with the button, so the caller places the focus as it removes: the example above gives it to the list, which has tabIndex={-1} for that. The fill is the tag’s only edge, so it keeps a transparent border, which forced colours paint. What stands before the words is not part of the name.

Using it

import { Tag, Avatar } from 'alpenglow';

<ul aria-label="My team">
  {team.map((person) => (
    <li key={person.id}>
      <Tag
        start={<Avatar name={person.name} size="xxs" />}
        onRemove={() => remove(person.id)}
      >
        {person.name}
      </Tag>
    </li>
  ))}
</ul>