Teams help

Tag

Tags are used to show the criteria used to filter information. They can be combined and used in every color of ENGIE’s palette.
Tags are used to visually label UI objects and elements for quick recognition. For example, we can use them on cards, on tables, on form, etc.

angular logo Angularopen_in_new
react logo Reactopen_in_new
javascript logo Vanillaopen_in_new
angular logo Figmaopen_in_new

Last updated v5.0.0

Example

A tag component can be a div or a a element. Dont use button. You can add a close icon with nj-tag__icon class to trigger a JS event.

<div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
  <div class="nj-tag">
    <span class="nj-tag__text">tag</span>
  </div>
  <div class="nj-tag">
    <i class="nj-tag__icon material-icons">check</i>
    <span class="nj-tag__text">tag with icon</span>
  </div>
  <a href="#" class="nj-tag">
    <span class="nj-tag__text">closable tag</span>
    <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </a>
  <a href="#" class="nj-tag">
    <i class="nj-tag__icon material-icons">check</i>
    <span class="nj-tag__text">closable tag with icon</span>
     <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <i class="nj-icon-btn__icon material-icons">close</i>
    </button>
  </a>
  <a href="#" class="nj-tag nj-tag--disabled">
    <i class="nj-tag__icon material-icons">check</i>
    <span class="nj-tag__text">disabled tag</span>
  </a>
</div>

Size variation

MD (Default):
tag
check tag
tag check tag check tag 
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
    <h5 style="margin: 0">SM:</h5>
    <div class="nj-tag nj-tag--sm">
      <span class="nj-tag__text">tag</span>
    </div>
    <div class="nj-tag nj-tag--sm">
      <i class="nj-tag__icon material-icons">check</i>
      <span class="nj-tag__text">tag</span>
    </div>
    <a href="#" class="nj-tag nj-tag--sm">
      <span class="nj-tag__text">tag</span>
      <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </a>
    <a href="#" class="nj-tag nj-tag--sm">
      <i class="nj-tag__icon material-icons">check</i>
      <span class="nj-tag__text">tag</span>
       <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </a>
    <a href="#" class="nj-tag nj-tag--sm nj-tag--disabled">
      <i class="nj-tag__icon material-icons">check</i>
      <span class="nj-tag__text">tag</span>
    </a>
</div>

<div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8); margin-top: var(--nj-size-space-24);">
    <h5 style="margin: 0">MD (Default):</h5>
    <div class="nj-tag">
      <span class="nj-tag__text">tag</span>
    </div>
    <div class="nj-tag">
      <i class="nj-tag__icon material-icons">check</i>
      <span class="nj-tag__text">tag</span>
    </div>
    <a href="#" class="nj-tag">
      <span class="nj-tag__text">tag</span>
      <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </a>
    <a href="#" class="nj-tag">
      <i class="nj-tag__icon material-icons">check</i>
      <span class="nj-tag__text">tag</span>
       <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </a>
    <a href="#" class="nj-tag nj-tag--disabled">
      <i class="nj-tag__icon material-icons">check</i>
      <span class="nj-tag__text">tag</span>
    </a>
</div>

<div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8); margin-top: var(--nj-size-space-24);">
   <h5 style="margin: 0">LG:</h5>
   <div class="nj-tag nj-tag--lg">
      <span class="nj-tag__text">tag</span>
    </div>
    <div class="nj-tag nj-tag--lg">
      <i class="nj-tag__icon material-icons">check</i>
      <span class="nj-tag__text">tag</span>
    </div>
    <a href="#" class="nj-tag nj-tag--lg">
      <span class="nj-tag__text">tag</span>
      <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </a>
    <a href="#" class="nj-tag nj-tag--lg">
      <i class="nj-tag__icon material-icons">check</i>
      <span class="nj-tag__text">tag</span>
       <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <i class="nj-icon-btn__icon material-icons">close</i>
      </button>
    </a>
    <a href="#" class="nj-tag nj-tag--lg nj-tag--disabled">
      <i class="nj-tag__icon material-icons">check</i>
      <span class="nj-tag__text">tag</span>
    </a>
</div>

Color variations

Add any of the below mentioned modifier classes to change the appearance of a tag.

<div style="display: flex; flex-direction: column; gap: var(--nj-size-space-24)">
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag">
        <span class="nj-tag__text">tag</span>
      </div>
      <div class="nj-tag">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">tag</span>
      </div>
      <a href="#" class="nj-tag">
        <span class="nj-tag__text">tag</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">tag</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">tag</span>
      </a>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag nj-tag--brand">
        <span class="nj-tag__text">brand</span>
      </div>
      <div class="nj-tag nj-tag--brand">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">brand</span>
      </div>
      <a href="#" class="nj-tag nj-tag--brand">
        <span class="nj-tag__text">brand</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--brand">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">brand</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--brand nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">brand</span>
      </a>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag nj-tag--teal">
        <span class="nj-tag__text">teal</span>
      </div>
      <div class="nj-tag nj-tag--teal">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">teal</span>
      </div>
      <a href="#" class="nj-tag nj-tag--teal">
        <span class="nj-tag__text">teal</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--teal">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">teal</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--teal nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">teal</span>
      </a>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag nj-tag--pink">
        <span class="nj-tag__text">pink</span>
      </div>
      <div class="nj-tag nj-tag--pink">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">pink</span>
      </div>
      <a href="#" class="nj-tag nj-tag--pink">
        <span class="nj-tag__text">pink</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--pink">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">pink</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--pink nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">pink</span>
      </a>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag nj-tag--orange">
        <span class="nj-tag__text">orange</span>
      </div>
      <div class="nj-tag nj-tag--orange">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">orange</span>
      </div>
      <a href="#" class="nj-tag nj-tag--orange">
        <span class="nj-tag__text">orange</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--orange">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">orange</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--orange nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">orange</span>
      </a>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag nj-tag--red">
        <span class="nj-tag__text">red</span>
      </div>
      <div class="nj-tag nj-tag--red">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">red</span>
      </div>
      <a href="#" class="nj-tag nj-tag--red">
        <span class="nj-tag__text">red</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--red">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">red</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--red nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">red</span>
      </a>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag nj-tag--green">
        <span class="nj-tag__text">green</span>
      </div>
      <div class="nj-tag nj-tag--green">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">green</span>
      </div>
      <a href="#" class="nj-tag nj-tag--green">
        <span class="nj-tag__text">green</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--green">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">green</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--green nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">green</span>
      </a>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag nj-tag--ultramarine">
        <span class="nj-tag__text">ultramarine</span>
      </div>
      <div class="nj-tag nj-tag--ultramarine">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">ultramarine</span>
      </div>
      <a href="#" class="nj-tag nj-tag--ultramarine">
        <span class="nj-tag__text">ultramarine</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--ultramarine">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">ultramarine</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--ultramarine nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">ultramarine</span>
      </a>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag nj-tag--yellow">
        <span class="nj-tag__text">yellow</span>
      </div>
      <div class="nj-tag nj-tag--yellow">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">yellow</span>
      </div>
      <a href="#" class="nj-tag nj-tag--yellow">
        <span class="nj-tag__text">yellow</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--yellow">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">yellow</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--yellow nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">yellow</span>
      </a>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-size-space-8)">
      <div class="nj-tag nj-tag--purple">
        <span class="nj-tag__text">purple</span>
      </div>
      <div class="nj-tag nj-tag--purple">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">purple</span>
      </div>
      <a href="#" class="nj-tag nj-tag--purple">
        <span class="nj-tag__text">purple</span>
        <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--purple">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">purple</span>
         <button class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </a>
      <a href="#" class="nj-tag nj-tag--purple nj-tag--disabled">
        <i class="nj-tag__icon material-icons">check</i>
        <span class="nj-tag__text">purple</span>
      </a>
  </div>
</div>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Disabled tags

check disabled tag 
<a href="#" class="nj-tag nj-tag--disabled">
  <i class="nj-tag__icon material-icons">check</i>
  <span class="nj-tag__text">disabled tag</span>
</a>
arrow_back_ios

Tabs

Toast

arrow_forward_ios