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.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Example

A tag component can be a div or a a element. Dont use button.

tag

tag with icon

closable tag

closable tag with icon

disabled tag

<div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
  <div class="nj-tag">
    <p class="nj-tag__text">tag</p>
  </div>
  <div class="nj-tag">
    <p class="nj-tag__text">tag with icon</p>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
  </div>
  <div class="nj-tag">
    <a href="#" class="nj-tag__link">closable tag</a>
    <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <span class="nj-sr-only">Remove tag XXX</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-tag">
    <a href="#" class="nj-tag__link">closable tag with icon</a>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <span class="nj-sr-only">Remove tag XXX</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-tag nj-tag--disabled">
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    <a role="link" aria-disabled="true" class="nj-tag__text">disabled tag</a>
  </div>
</div>

Size variation

SM:

tag

MD (Default):

tag

LG:

tag

<div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
  <h5 style="margin: 0">SM:</h5>
  <div class="nj-tag nj-tag--sm">
    <p class="nj-tag__text">tag</p>
  </div>
  <div class="nj-tag nj-tag--sm">
    <p class="nj-tag__text">tag</p>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
  </div>
  <div class="nj-tag nj-tag--sm">
    <a href="#" class="nj-tag__link">tag</a>
    <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <span class="nj-sr-only">Remove tag XXX</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-tag nj-tag--sm">
    <a href="#" class="nj-tag__link">tag</a>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <span class="nj-sr-only">Remove tag XXX</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-tag nj-tag--sm nj-tag--disabled">
    <a role="link" aria-disabled="true" class="nj-tag__text">tag</a>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
  </div>
</div>
  
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8); margin-top: var(--nj-semantic-size-spacing-24);">
  <h5 style="margin: 0">MD (Default):</h5>
  <div class="nj-tag">
    <p class="nj-tag__text">tag</p>
  </div>
  <div class="nj-tag">
    <p class="nj-tag__text">tag</p>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
  </div>
  <div class="nj-tag">
    <a href="#" class="nj-tag__link">tag</a>
    <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <span class="nj-sr-only">Remove tag XXX</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-tag">
    <a href="#" class="nj-tag__link">tag</a>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <span class="nj-sr-only">Remove tag XXX</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-tag nj-tag--disabled">
    <a role="link" aria-disabled="true" class="nj-tag__text">tag</a>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
  </div>
</div>
  
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8); margin-top: var(--nj-semantic-size-spacing-24);">
  <h5 style="margin: 0">LG:</h5>
  <div class="nj-tag nj-tag--lg">
    <p class="nj-tag__text">tag</p>
  </div>
  <div class="nj-tag nj-tag--lg">
    <p class="nj-tag__text">tag</p>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
  </div>
  <div class="nj-tag nj-tag--lg">
    <a href="#" class="nj-tag__link">tag</a>
    <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <span class="nj-sr-only">Remove tag XXX</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-tag nj-tag--lg">
    <a href="#" class="nj-tag__link">tag</a>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
      <span class="nj-sr-only">Remove tag XXX</span>
      <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
    </button>
  </div>
  <div class="nj-tag nj-tag--lg nj-tag--disabled">
    <a role="link" aria-disabled="true" class="nj-tag__text">tag</a>
    <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
  </div>
</div>

Color variations

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

tag

brand

teal

pink

orange

red

green

ultramarine

yellow

purple

blue

lime

<div style="display: flex; flex-direction: column; gap: var(--nj-semantic-size-spacing-24)">
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag">
      <p class="nj-tag__text">tag</p>
    </div>
    <div class="nj-tag">
      <p class="nj-tag__text">tag</p>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag">
      <a href="#" class="nj-tag__link">tag</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag">
      <a href="#" class="nj-tag__link">tag</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">tag</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--brand">
      <span class="nj-tag__text">brand</span>
    </div>
    <div class="nj-tag nj-tag--brand">
      <span class="nj-tag__text">brand</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--brand">
      <a href="#" class="nj-tag__link">brand</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--brand">
      <a href="#" class="nj-tag__link">brand</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--brand nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">brand</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--teal">
      <span class="nj-tag__text">teal</span>
    </div>
    <div class="nj-tag nj-tag--teal">
      <span class="nj-tag__text">teal</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--teal">
      <a href="#" class="nj-tag__link">teal</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--teal">
      <a href="#" class="nj-tag__link">teal</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--teal nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">teal</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--pink">
      <span class="nj-tag__text">pink</span>
    </div>
    <div class="nj-tag nj-tag--pink">
      <span class="nj-tag__text">pink</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--pink">
      <a href="#" class="nj-tag__link">pink</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--pink">
      <a href="#" class="nj-tag__link">pink</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--pink nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">pink</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--orange">
      <span class="nj-tag__text">orange</span>
    </div>
    <div class="nj-tag nj-tag--orange">
      <span class="nj-tag__text">orange</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--orange">
      <a href="#" class="nj-tag__link">orange</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--orange">
      <a href="#" class="nj-tag__link">orange</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--orange nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">orange</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--red">
      <span class="nj-tag__text">red</span>
    </div>
    <div class="nj-tag nj-tag--red">
      <span class="nj-tag__text">red</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--red">
      <a href="#" class="nj-tag__link">red</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--red">
      <a href="#" class="nj-tag__link">red</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--red nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">red</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--green">
      <span class="nj-tag__text">green</span>
    </div>
    <div class="nj-tag nj-tag--green">
      <span class="nj-tag__text">green</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--green">
      <a href="#" class="nj-tag__link">green</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--green">
      <a href="#" class="nj-tag__link">green</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--green nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">green</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--ultramarine">
      <span class="nj-tag__text">ultramarine</span>
    </div>
    <div class="nj-tag nj-tag--ultramarine">
      <span class="nj-tag__text">ultramarine</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--ultramarine">
      <a href="#" class="nj-tag__link">ultramarine</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--ultramarine">
      <a href="#" class="nj-tag__link">ultramarine</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--ultramarine nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">ultramarine</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--yellow">
      <span class="nj-tag__text">yellow</span>
    </div>
    <div class="nj-tag nj-tag--yellow">
      <span class="nj-tag__text">yellow</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--yellow">
      <a href="#" class="nj-tag__link">yellow</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--yellow">
      <a href="#" class="nj-tag__link">yellow</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--yellow nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">yellow</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--purple">
      <span class="nj-tag__text">purple</span>
    </div>
    <div class="nj-tag nj-tag--purple">
      <span class="nj-tag__text">purple</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--purple">
      <a href="#" class="nj-tag__link">purple</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--purple">
      <a href="#" class="nj-tag__link">purple</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--purple nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">purple</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--blue">
      <span class="nj-tag__text">blue</span>
    </div>
    <div class="nj-tag nj-tag--blue">
      <span class="nj-tag__text">blue</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--blue">
      <a href="#" class="nj-tag__link">blue</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--blue">
      <a href="#" class="nj-tag__link">blue</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--blue nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">blue</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </div>
  <div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-8)">
    <div class="nj-tag nj-tag--lime">
      <span class="nj-tag__text">lime</span>
    </div>
    <div class="nj-tag nj-tag--lime">
      <span class="nj-tag__text">lime</span>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
    <div class="nj-tag nj-tag--lime">
      <a href="#" class="nj-tag__link">lime</a>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--lime">
      <a href="#" class="nj-tag__link">lime</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
      <button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--secondary nj-icon-btn--sm">
        <span class="nj-sr-only">Remove tag XXX</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
    <div class="nj-tag nj-tag--lime nj-tag--disabled">
      <a role="link" aria-disabled="true" class="nj-tag__text">lime</a>
      <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
    </div>
  </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 .nj-sr-only class.

Disabled tags

disabled tag

<div class="nj-tag nj-tag--disabled">
  <span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
  <a role="link" aria-disabled="true" class="nj-tag__text">disabled tag</a>
</div>

Tabs

Toast