Tag

Neutral label for categories, applied filters and user-entered values. Optional dot, count and close.

Preview

React · live from the Storybook

HTML and CSS

The same component as plain HTML with pixels-ui.css, no framework needed.

Design Online Reviews 12 Figma Selected

HTML

<div class="row">
  <span class="px-tag">Design</span>
  <span class="px-tag"><span class="px-badge__dot"></span>Online</span>
  <span class="px-tag">Reviews <span class="px-count">12</span></span>
  <span class="px-tag" data-px-dismissible>Figma<button type="button" class="px-tag__close" data-px-dismiss aria-label="Remove Figma"><svg class="px-icon" aria-hidden="true">…</svg></button></span>
  <label class="px-tag"><input type="checkbox" class="px-check__box" checked> Selected</label>
</div>

Usage

Use Chips for filters people toggle; Tags for values that exist.

Installation

Included in the core files. No extra install.

HTML

<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>

Examples

Sizes

SmallMediumLarge

HTML

<div class="row" style="align-items:center"><span class="px-tag">Small</span><span class="px-tag px-tag--md">Medium</span><span class="px-tag px-tag--lg">Large</span></div>

API reference

Class / attribute	Type	Description
`px-tag`	class	Small by default.
`px-tag--md · --lg`	class	Size.
`px-tag__close`	class	Close button (needs aria-label “Remove <label>”).

Figma properties

Tag12 variants · page “Tags”Open

Neutral label for categories, applied filters and user-entered values (e.g. in a multi-select). Optional checkbox, status dot, count and close button. Close needs aria-label="Remove <label>…

Property	Type	Values
Label	Text	“Label”
Checkbox	Boolean	—
Dot	Boolean	—
Count	Boolean	—
Close	Boolean	—
Size	Variant	Small Medium Large
State	Variant	Active Hover Focused Disabled

Design tokens

Component tokens from the Figma Component collection. Override them to restyle just this component.

Token	Alias	Light value
`--px-tag-background`	color-surface-default	#ffffff
`--px-tag-border`	color-border-neutral-default	#eaecf0
`--px-tag-content`	color-content-neutral-secondary	#475467
`--px-tag-icon`	color-content-neutral-placeholder	#667085
`--px-tag-radius`	radius-sm	4px
`--px-tag-gap`	spacing-xs	4px

Accessibility

Close needs aria-label="Remove <label>".