Tag

Keyword labels for categorization. Use for filtering, attributes, or status indicators.

Default

Tag Category Label

Base

Class	Description
`.ui-tag`	Base class

Size

Class	Value
`.ui-tag--sm`	sm
`.ui-tag--lg`	lg

Variant

Class	Value
`.ui-tag--primary`	primary
`.ui-tag--success`	success
`.ui-tag--warning`	warning
`.ui-tag--danger`	danger

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-tag-height`	`calc(var(--ui-unit) * 3)`	Overall height
`--ui-tag-padding-x`	`var(--ui-space-1)`	Horizontal padding
`--ui-tag-gap`	`calc(var(--ui-unit) * 0.5)`	Gap between children
`--ui-tag-radius`	`var(--ui-radius-full)`	Corner radius
`--ui-tag-font-size`	`var(--ui-font-size-sm)`	Font size
`--ui-tag-bg`	`var(--ui-color-bg-muted)`	Background color
`--ui-tag-color`	`var(--ui-color-text)`	Text color
`--ui-tag-height-sm`	`calc(var(--ui-unit) * 2)`	Overall height at small size
`--ui-tag-padding-x-sm`	`calc(var(--ui-unit) * 1)`	Horizontal padding at small size
`--ui-tag-font-size-sm`	`var(--ui-font-size-xs)`	Font size at small size
`--ui-tag-height-lg`	`calc(var(--ui-unit) * 4)`	Overall height at large size
`--ui-tag-padding-x-lg`	`var(--ui-space-2)`	Horizontal padding at large size
`--ui-tag-font-size-lg`	`var(--ui-font-size-md)`	Font size at large size
`--ui-tag-primary-bg`	`var(--ui-color-primary)`	Primary bg
`--ui-tag-primary-color`	`var(--ui-color-text-inverse)`	Primary color
`--ui-tag-success-bg`	`var(--ui-color-success)`	Success bg
`--ui-tag-success-color`	`var(--ui-color-text-inverse)`	Success color
`--ui-tag-warning-bg`	`var(--ui-color-warning)`	Warning bg
`--ui-tag-warning-color`	`var(--ui-color-text)`	Warning color
`--ui-tag-danger-bg`	`var(--ui-color-danger)`	Danger bg
`--ui-tag-danger-color`	`var(--ui-color-text-inverse)`	Danger color

Sizes

Small Default Large

<span class="ui-tag ui-tag--sm">Small</span>
<span class="ui-tag">Default</span>
<span class="ui-tag ui-tag--lg">Large</span>

Variants

Default Primary Success Warning Danger

<span class="ui-tag">Default</span>
<span class="ui-tag ui-tag--primary">Primary</span>
<span class="ui-tag ui-tag--success">Success</span>
<span class="ui-tag ui-tag--warning">Warning</span>
<span class="ui-tag ui-tag--danger">Danger</span>

With Remove Button

Removable

<span class="ui-tag">
  <span>Removable</span>
  <button class="ui-tag__remove" aria-label="Remove">
    <svg class="ui-icon ui-icon--xs" viewBox="0 0 24 24">
      <path d="M18 6 6 18M6 6l12 12"></path>
    </svg>
  </button>
</span>

Tag Group

<div class="ui-tag-group">
  <span class="ui-tag">JavaScript</span>
  <span class="ui-tag">TypeScript</span>
  <span class="ui-tag">React</span>
  <span class="ui-tag">CSS</span>
</div>