Tag

<nve-tag>topic-tag</nve-tag>

Comprehensive color palette for tag backgrounds, enabling visual categorization and brand consistency across different content types.

<div nve-layout="row gap:xs align:wrap">
  <nve-tag>default-color</nve-tag>
  <nve-tag color="red-cardinal">red-cardinal</nve-tag>
  <nve-tag color="gray-slate">gray-slate</nve-tag>
  <nve-tag color="gray-denim">gray-denim</nve-tag>
  <nve-tag color="blue-indigo">blue-indigo</nve-tag>
  <nve-tag color="blue-cobalt">blue-cobalt</nve-tag>
  <nve-tag color="blue-sky">blue-sky</nve-tag>
  <nve-tag color="teal-cyan">teal-cyan</nve-tag>
  <nve-tag color="green-mint">green-mint</nve-tag>
  <nve-tag color="teal-seafoam">teal-seafoam</nve-tag>
  <nve-tag color="green-grass">green-grass</nve-tag>
  <nve-tag color="yellow-amber">yellow-amber</nve-tag>
  <nve-tag color="orange-pumpkin">orange-pumpkin</nve-tag>
  <nve-tag color="red-tomato">red-tomato</nve-tag>
  <nve-tag color="pink-magenta">pink-magenta</nve-tag>
  <nve-tag color="purple-plum">purple-plum</nve-tag>
  <nve-tag color="purple-violet">purple-violet</nve-tag>
  <nve-tag color="purple-lavender">purple-lavender</nve-tag>
  <nve-tag color="pink-rose">pink-rose</nve-tag>
  <nve-tag color="green-jade">green-jade</nve-tag>
  <nve-tag color="lime-pear">lime-pear</nve-tag>
  <nve-tag color="yellow-nova">yellow-nova</nve-tag>
  <nve-tag color="brand-green">brand-green</nve-tag>
</div>

High prominence tags with emphasis styling for important categories and priority labels that require visual attention.

<div nve-layout="row gap:xs align:wrap">
  <nve-tag prominence="emphasis" color="red-cardinal">red-cardinal</nve-tag>
  <nve-tag prominence="emphasis" color="gray-slate">gray-slate</nve-tag>
  <nve-tag prominence="emphasis" color="gray-denim">gray-denim</nve-tag>
  <nve-tag prominence="emphasis" color="blue-indigo">blue-indigo</nve-tag>
  <nve-tag prominence="emphasis" color="blue-cobalt">blue-cobalt</nve-tag>
  <nve-tag prominence="emphasis" color="blue-sky">blue-sky</nve-tag>
  <nve-tag prominence="emphasis" color="teal-cyan">teal-cyan</nve-tag>
  <nve-tag prominence="emphasis" color="green-mint">green-mint</nve-tag>
  <nve-tag prominence="emphasis" color="teal-seafoam">teal-seafoam</nve-tag>
  <nve-tag prominence="emphasis" color="green-grass">green-grass</nve-tag>
  <nve-tag prominence="emphasis" color="yellow-amber">yellow-amber</nve-tag>
  <nve-tag prominence="emphasis" color="orange-pumpkin">orange-pumpkin</nve-tag>
  <nve-tag prominence="emphasis" color="red-tomato">red-tomato</nve-tag>
  <nve-tag prominence="emphasis" color="pink-magenta">pink-magenta</nve-tag>
  <nve-tag prominence="emphasis" color="purple-plum">purple-plum</nve-tag>
  <nve-tag prominence="emphasis" color="purple-violet">purple-violet</nve-tag>
  <nve-tag prominence="emphasis" color="purple-lavender">purple-lavender</nve-tag>
  <nve-tag prominence="emphasis" color="pink-rose">pink-rose</nve-tag>
  <nve-tag prominence="emphasis" color="green-jade">green-jade</nve-tag>
  <nve-tag prominence="emphasis" color="lime-pear">lime-pear</nve-tag>
  <nve-tag prominence="emphasis" color="yellow-nova">yellow-nova</nve-tag>
  <nve-tag prominence="emphasis" color="brand-green">brand-green</nve-tag>
</div>

Closable tags with comprehensive color palette, enabling user interaction for filtering, selection, and dynamic content management.

<div nve-layout="row gap:xs align:wrap">
  <nve-tag closable>default-color</nve-tag>
  <nve-tag closable color="red-cardinal">red-cardinal</nve-tag>
  <nve-tag closable color="gray-slate">gray-slate</nve-tag>
  <nve-tag closable color="gray-denim">gray-denim</nve-tag>
  <nve-tag closable color="blue-indigo">blue-indigo</nve-tag>
  <nve-tag closable color="blue-cobalt">blue-cobalt</nve-tag>
  <nve-tag closable color="blue-sky">blue-sky</nve-tag>
  <nve-tag closable color="teal-cyan">teal-cyan</nve-tag>
  <nve-tag closable color="green-mint">green-mint</nve-tag>
  <nve-tag closable color="teal-seafoam">teal-seafoam</nve-tag>
  <nve-tag closable color="green-grass">green-grass</nve-tag>
  <nve-tag closable color="yellow-amber">yellow-amber</nve-tag>
  <nve-tag closable color="orange-pumpkin">orange-pumpkin</nve-tag>
  <nve-tag closable color="red-tomato">red-tomato</nve-tag>
  <nve-tag closable color="pink-magenta">pink-magenta</nve-tag>
  <nve-tag closable color="purple-plum">purple-plum</nve-tag>
  <nve-tag closable color="purple-violet">purple-violet</nve-tag>
  <nve-tag closable color="purple-lavender">purple-lavender</nve-tag>
  <nve-tag closable color="pink-rose">pink-rose</nve-tag>
  <nve-tag closable color="green-jade">green-jade</nve-tag>
  <nve-tag closable color="lime-pear">lime-pear</nve-tag>
  <nve-tag closable color="yellow-nova">yellow-nova</nve-tag>
  <nve-tag closable color="brand-green">brand-green</nve-tag>
</div>

Read-only tags for displaying static labels and metadata, providing visual context without user interaction capabilities.

<nve-tag readonly>topic-tag</nve-tag>

Tag group layout with overflow handling and add functionality, ideal for managing many categories with space constraints.

<div nve-layout="row gap:xs align:vertical-center">
  <nve-tag>topic-tag</nve-tag>
  <nve-tag>topic-tag</nve-tag>
  <nve-tag>topic-tag</nve-tag>
  <nve-tag>3+</nve-tag>
  <nve-icon-button container="flat" size="sm" icon-name="add"></nve-icon-button>
</div>

Single tag with constrained width, with text overflow behavior and content truncation in limited space.

<nve-tag style="--width: 150px">some really long content</nve-tag>

Many tags with max width constraints, showing how content adapts to space limitations and maintains visual consistency.

<style>
  .limit-width {
    --max-width: 100px;
  }
</style>
<nve-tag class="limit-width">two words</nve-tag>
<nve-tag class="limit-width">three words here</nve-tag>
<nve-tag class="limit-width">four words long here</nve-tag>