← →

Tag

The Tag (<pura-tag>) is a rounded chip that labels, filters, or categorizes content, with color variants, an optional status dot, and a remove button (×) that makes it dismissible. Use it to display categories, active filters, statuses, or markers in lists and headers. It has an agent-native layer: each tag gets a stable data-pura-id, is registered in window.__puraTags, and mirrors its live state in data-pura-tag-* attributes (variant, removable, disabled, removed), letting agents and tools enumerate, read, and remove tags without accessing the Shadow DOM.

Preview

<div style="display:flex;gap:.5rem;flex-wrap:wrap;align-items:center">
  <pura-tag>Default</pura-tag>
  <pura-tag variant="primary">Featured</pura-tag>
  <pura-tag variant="success" dot>Active</pura-tag>
  <pura-tag variant="warning" dot>Pending</pura-tag>
  <pura-tag variant="danger">Overdue</pura-tag>
  <pura-tag variant="info">Beta</pura-tag>
  <pura-tag variant="primary" removable id="filtro-categoria">Category: Design</pura-tag>
  <pura-tag removable disabled>Locked</pura-tag>
</div>
<script type="module">
  const filtro = document.getElementById("filtro-categoria");
  filtro.addEventListener("remove", (e) => {
    console.log("Filtro removido:", e.detail.label);
  });
</script>

Attributes

Attribute	Type	Default	Description
`variant`	string	neutral	Color/intent of the tag: neutral, primary, success, warning, danger, or info.
`removable`	boolean	false	Renders a remove button (×) that emits the remove event.
`dot`	boolean	false	Renders a status dot in front of the label.
`disabled`	boolean	false	Dims the tag and disables the remove button.
`label`	string	—	Accessible label used as a fallback when the default slot is empty.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/tag.js"></script>

JavaScript

import "./pura/lib/tag.js";

Slots

default

Events

remove