Skip to main contentSkip to site searchSkip to component search
Honeycomb

Tag

The tag serves as a visual label to promote i.e. a status or category to achieve quick recognition.

Appearance variations

Tags have different color coding that can be controlled with modifier classes:

  • normal white tag: default option, no modifier needed;
  • success tag: flix-tag--success;
  • warning tag: flix-tag--warning;
  • danger tag: flix-tag--danger;
Normal tag Success tag Warning tag Danger tag 
<span class="flix-tag">
  <span class="flix-tag__text">Normal tag</span>
</span>
<span class="flix-tag flix-tag--success">
  <span class="flix-tag__text">Success tag</span>
</span>
<span class="flix-tag flix-tag--warning">
  <span class="flix-tag__text">Warning tag</span>
</span>
<span class="flix-tag flix-tag--danger">
  <span class="flix-tag__text">Danger tag</span>
</span>

In addition to color modifiers you can also use two layout modifiers that will change the tags styles:

  • flix-tag--disabled to any tag shows the disabled state;
  • flix-tag--outlined only colored tags, enables the outlined version;
  • flix-tag--small to any tag enables the small variation;
Disabled tag Success tag Warning tag Danger tag 
<span class="flix-tag flix-tag--disabled">
  <span class="flix-tag__text">Disabled tag</span>
</span>
<span class="flix-tag flix-tag--success flix-tag--disabled">
  <span class="flix-tag__text">Success tag</span>
</span>
<span class="flix-tag flix-tag--warning flix-tag--disabled">
  <span class="flix-tag__text">Warning tag</span>
</span>
<span class="flix-tag flix-tag--danger flix-tag--disabled">
  <span class="flix-tag__text">Danger tag</span>
</span>
Success tag Success Success
Warning tag Warning Warning
Danger tag Danger Danger 
<div class="flix-space-4-bottom">
  <span class="flix-tag flix-tag--outlined flix-tag--success">
    <span class="flix-tag__text">Success tag</span>
  </span>
  <span class="flix-tag flix-tag--small flix-tag--success">
    <span class="flix-tag__text">Success</span>
  </span>
  <span class="flix-tag flix-tag--small flix-tag--outlined flix-tag--success">
    <span class="flix-tag__text">Success</span>
  </span>
</div>

<div class="flix-space-4-bottom">
  <span class="flix-tag flix-tag--outlined flix-tag--warning">
    <span class="flix-tag__text">Warning tag</span>
  </span>
  <span class="flix-tag flix-tag--small flix-tag--warning">
    <span class="flix-tag__text">Warning</span>
  </span>
  <span class="flix-tag flix-tag--small flix-tag--outlined flix-tag--warning">
    <span class="flix-tag__text">Warning</span>
  </span>
</div>

<div class="flix-space-4-bottom">
  <span class="flix-tag flix-tag--outlined flix-tag--danger">
    <span class="flix-tag__text">Danger tag</span>
  </span>
  <span class="flix-tag flix-tag--small flix-tag--danger">
    <span class="flix-tag__text">Danger</span>
  </span>
  <span class="flix-tag flix-tag--small flix-tag--outlined flix-tag--danger">
    <span class="flix-tag__text">Danger</span>
  </span>
</div>

Tags with Icons

It's possible to put any flix-icon inside of the tag element.

The span.flix-tag__text element is only required if you use flix-tag__icon inside a tag, but having it in all cases does not cause any harm. You are free to use it as it's more convenient to you and your project.

Tag with cosmetic icon Tag with cosmetic icon Tiny tag with cosmetic icon 
<a class="flix-tag" href="#">
  <i class="flix-tag__icon flix-icon flix-icon-bus-time-solid" aria-hidden="true"></i>
  <span class="flix-tag__text">Tag with cosmetic icon</span>
</a>
<a class="flix-tag flix-tag--success" href="#">
  <span class="flix-tag__text">Tag with cosmetic icon</span>
  <i class="flix-tag__icon flix-icon flix-icon-bus-time-solid" aria-hidden="true"></i>
</a>
<a class="flix-tag flix-tag--small flix-tag--outlined flix-tag--danger" href="#">
  <i class="flix-tag__icon flix-icon flix-icon-person-solid" aria-hidden="true"></i>
  <span class="flix-tag__text">Tiny tag with cosmetic icon</span>
</a>

Tags with close (or dismiss) control

If you want to add a close button (or dismiss) to your tag, you can do so by adding a button.flix.tag__close element next to the text. Attach any event handlers to it and you should be good to go.

Tag with close button Small tag with close button 
<span class="flix-tag">
  <span class="flix-tag__text">Tag with close button</span>
  <button class="flix-tag__close" aria-label="Dismiss Tag"></button>
</span>
<span class="flix-tag flix-tag--small">
  <span class="flix-tag__text">Small tag with close button</span>
  <button class="flix-tag__close" aria-label="Dismiss Tag"></button>
</span>

Icons and Acessibility

  • If the icon in your tag is purely decorative and the tag has a meaningful text then you can hide your icon from assistive technologies using aria-hidden="true". This will reduce the amount of text read by a screen reader that can be redundant.
  • If your icon has a function or is the only thing responsible for conveying information then you MUST provide the required labels to that feature.
Made with 🍯 by FlixMobility 2022