Link to Fluid's Microsoft Teams channel Link to the support page

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.3.0

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

tag

tag
tag
tag
MD (Default):

tag

tag

tag
tag
tag
LG:

tag

tag

tag
tag
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

tag

tag
tag
tag
brand
brand
brand
brand
brand
teal
teal
teal
teal
teal
pink
pink
pink
pink
pink
orange
orange
orange
orange
orange
red
red
red
red
red
green
green
green
green
green
ultramarine
ultramarine
ultramarine
ultramarine
ultramarine
yellow
yellow
yellow
yellow
yellow
purple
purple
purple
purple
purple
blue
blue
blue
blue
blue
lime
lime
lime
lime
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