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 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">
  Normal tag
</span>
<span class="flix-tag flix-tag--success">
  Success tag
</span>
<span class="flix-tag flix-tag--warning">
  Warning tag
</span>
<span class="flix-tag flix-tag--danger">
  Danger tag
</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 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">
  Disabled tag
</span>
<span class="flix-tag flix-tag--success flix-tag--disabled">
  Success tag
</span>
<span class="flix-tag flix-tag--warning flix-tag--disabled">
  Warning tag
</span>
<span class="flix-tag flix-tag--danger flix-tag--disabled">
  Danger tag
</span>
Default tag Default Default
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">
    Default tag
  </span>
  <span class="flix-tag flix-tag--small">
    Default
  </span>
  <span class="flix-tag flix-tag--small flix-tag--outlined">
    Default
  </span>
</div>

<div class="flix-space-4-bottom">
  <span class="flix-tag flix-tag--outlined flix-tag--success">
    Success tag
  </span>
  <span class="flix-tag flix-tag--small flix-tag--success">
    Success
  </span>
  <span class="flix-tag flix-tag--small flix-tag--outlined flix-tag--success">
    Success
  </span>
</div>

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

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

Tags with Icons

It's possible to put any flix-icon inside of the tag element. Depending on your needs in terms of spacing you can optionally use flix-icon--fill-canvas modifier for icons to remove side spacing.

The span.flix-tag__text element is no longer required but keeping it has no effect.

Deprecated __text element does no harm 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">Deprecated __text element does no harm</span>
</a>
<a class="flix-tag flix-tag--success" href="#">
  Tag with cosmetic icon
  <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>
  Tiny tag with cosmetic icon
</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">
  Tag with close button
  <button type="button" aria-label="Dismiss Tag" class="flix-tag__close flix-btn flix-btn--sm flix-btn--has-icon flix-btn--square flix-btn--link">
  </button>
</span>
<span class="flix-tag flix-tag--small">
  Small tag with close button
  <button type="button" aria-label="Dismiss Tag" class="flix-tag__close flix-btn flix-btn--sm flix-btn--has-icon flix-btn--square flix-btn--link">
  </button>
</span>

Icons and Accessibility

  • 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 2023