Tag — RenDS Components

About

Overview

A Tag is a Badge that does something. Use it for: filter chips ("Design", "Engineering" — click to filter the list), selected items ("Argentina" inside a multi-select), category labels on a content card. The base styling matches Badge so they share the visual rhythm.

Tag vs Badge. If a click does nothing, it's a Badge. If a click filters, selects, or removes — it's a Tag.

Live

Demo

Design Engineering Approved design

<span class="ren-tag">Design</span>
<button class="ren-tag ren-tag-clickable" aria-pressed="false">Filter</button>
<span class="ren-tag">design
  <button class="ren-tag-dismiss" aria-label="Remove">×</button>
</span>

Shapes

Variants

Status

Primary Success Warning Danger

Sizes

Small Medium Large

Clickable

Removable

design engineering a11y

Group

Reference

API

CSS classes

Class	Effect
`.ren-tag`	Base. Slightly more padding than Badge to accommodate the dismiss button.
`.ren-tag-primary` / `-success` / `-warning` / `-danger`	Status fills.
`.ren-tag-sm` / `-lg`	Size variants.
`.ren-tag-clickable`	Adds hover and focus styles. Use on a real `<button>` with `aria-pressed` for toggle behavior.
`.ren-tag-dismiss`	The × close button inside a removable tag. Always pair with `aria-label`.
`.ren-tag-group`	Container for multiple tags. Provides flex wrap and consistent gap.
`[aria-pressed="true"]` or `[data-selected]`	Marks a clickable tag as currently selected.

No JavaScript required. Click handling and state management live in your app.

Inclusive by default

Accessibility

Clickable tags: must be a real <button> with aria-pressed for toggle state. A clickable <span> is not keyboard-accessible.
Dismiss buttons: always include aria-label="Remove {tag-name}" so screen readers announce what's being removed.
Tag groups for filters: wrap them in a labelled region — <div role="group" aria-label="Filter by category">.

Keyboard

TabMoves through clickable tags in document order.

Enter / SpaceActivates the focused tag (toggle pressed state, run the action, dismiss).

Patterns

Examples

Filter chips

<div role="group" aria-label="Filter by status" class="ren-tag-group">
  <button class="ren-tag ren-tag-clickable" aria-pressed="true">All</button>
  <button class="ren-tag ren-tag-clickable" aria-pressed="false">Active</button>
  <button class="ren-tag ren-tag-clickable" aria-pressed="false">Archived</button>
</div>

Removable selections

<span class="ren-tag">
  argentina
  <button class="ren-tag-dismiss" aria-label="Remove Argentina"
          onclick="removeCountry('ar')">×</button>
</span>