Components

Tag

A removable mono chip for freeform tags — locations, categories. `[data-dashed]` renders an "add tag" affordance instead of a value.

Default and removable

Same reasoning as Badge: a <span> is too generic to select bare, so Tag keeps one class. The remove control is a real <button>, styled through the descendant selector .tag button — no class of its own.

Tags

location:garage category:appliance category:receipt

Markup

<span class="tag">location:garage</span>
<span class="tag">category:appliance</span>
<span class="tag">
  category:receipt
  <button aria-label="Remove tag">×</button>
</span>

Dashed — the “add tag” affordance

Add tag

location:garage + add tag

Markup

<div class="tag-set">
  <span class="tag">location:garage</span>
  <span class="tag" data-dashed>+ add tag</span>
</div>

API

Element / attribute	Values	Notes
`span.tag`		Required base.
`button`		Nest a real `<button aria-label="Remove tag">` to render the × affordance — styled via `.tag button`, no class needed.
`data-dashed`	boolean	Renders an "add tag" affordance instead of a value.