CSS-Only

Tag

Compact label component for categorization, filtering, and metadata display. Works by default, enhances with data attributes.

Example

Default Primary Success Warning Danger

<span class="omni-tag">
  <span class="omni-tag-text">Default</span>
</span>
<span class="omni-tag" data-variant="primary">
  <span class="omni-tag-text">Primary</span>
</span>
<span class="omni-tag" data-variant="success">
  <span class="omni-tag-text">Success</span>
</span>

Variants

Semantic Variants

Use data-variant to convey meaning through color:

Primary Secondary Success Warning Danger Info

Style Variants

Use data-variant-style to adjust visual emphasis:

Solid (default)

Solid Solid Solid

Soft

Soft Soft Soft

Outline

Outline Outline Outline

Ghost

Ghost Ghost Ghost

Sizes

Use data-size to adjust tag dimensions:

Small Medium Large

<span class="omni-tag" data-variant="primary" data-size="sm">
  <span class="omni-tag-text">Small</span>
</span>
<span class="omni-tag" data-variant="primary">
  <span class="omni-tag-text">Medium</span>
</span>
<span class="omni-tag" data-variant="primary" data-size="lg">
  <span class="omni-tag-text">Large</span>
</span>

Removable Tags

Add a close button using the omni-close utility. Always include aria-label for accessibility:

React TypeScript JavaScript CSS

<span class="omni-tag" data-variant="primary">
  <span class="omni-tag-text">React</span>
  <button class="omni-close omni-close-sm" aria-label="Remove React tag"></button>
</span>

Truncation

Long text is automatically truncated with ellipsis when using omni-tag-text:

This is a very long tag label that will truncate

<span class="omni-tag" data-variant="primary">
  <span class="omni-tag-text">This is a very long tag label that will truncate</span>
</span>

Interactive Tags

Tags can be interactive using <a> or <button> elements:

Clickable Link

<a href="#" class="omni-tag" data-variant="primary">
  <span class="omni-tag-text">Clickable Link</span>
</a>
<button class="omni-tag" data-variant="secondary">
  <span class="omni-tag-text">Clickable Button</span>
</button>

Common Use Cases

Technology Stack

React TypeScript Node.js PostgreSQL

Status Labels

Completed In Progress Failed Pending

Filter Tags

Category: Design Author: John Doe Date: 2024

API Reference

Attribute	Values	Default	Description
`data-variant`	primary, secondary, success, warning, danger, info	—	Semantic color variant
`data-variant-style`	solid, soft, outline, ghost	solid	Visual style treatment
`data-size`	sm, md, lg	md	Tag dimensions

Component Classes

Class	Element	Description
`omni-tag`	span, a, button	Main tag container
`omni-tag-text`	span	Text content with automatic truncation
`omni-close`	button	Close/remove button (optional)
`omni-close-sm`	button	Small size for close button (recommended for tags)