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.
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
<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>
Disabled tags
<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>