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.

Modifiers

flix-tag--success
flix-tag--warning
flix-tag--danger
Modify the tag state color.
flix-tag--subtle
Enable the subtle version, like solid but with a dimmed background.
flix-tag--outlined
Outlined tags have their state colors applied on the borders instead of on their background.
flix-tag--small
Shows smaller tags with smaller font size.
flix-tag--disabled
Shows the disabled state. If using on a button, prefer using `disabled` or `aria-disabled="true"` attributes.

As you can see, the warning and danger tags are quite similar in color. It can be difficult to differentiate which is which when they are used together. Also, it can be difficult for people with different visual impairments, such as colorblindness, to differentiate all of them by color alone.

So consider using an unique icon together with the text when you must convey the urgency of a tag, for example, when they are used to inform the delay status of a bus.

Any flix-icon inside of the tag element must contain the flix-tag__icon class name.

Depending on your needs in terms of spacing you can optionally use flix-icon--fill-canvas modifier for icon-fonts to remove side spacing.

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.

But if your icon has a function or if it is the only thing responsible for conveying information then you MUST provide the required labels to that feature.

My bus Success tag Warning tag Danger tag 
<span class="flix-tag">
  My bus
  <i class="flix-tag__icon flix-icon flix-icon-bus-time-solid" aria-hidden="true"></i>
</span>
<span class="flix-tag flix-tag--success">
  <i class="flix-tag__icon flix-icon flix-icon--fill-canvas flix-icon-checkmark-strong-solid" aria-hidden="true"></i>
  Success tag
</span>
<span class="flix-tag flix-tag--warning">
  <i class="flix-tag__icon flix-icon flix-icon--fill-canvas flix-icon-warning" aria-hidden="true"></i>
  Warning tag
</span>
<span class="flix-tag flix-tag--danger">
  <i class="flix-tag__icon flix-icon flix-icon--fill-canvas flix-icon-crossed-solid" aria-hidden="true"></i>
  Danger tag
</span>

Display variations

In addition to color modifiers, two display options are available:

  • flix-tag--subtle: enables the subtle version, like solid with a dimmed background;
  • flix-tag--outlined: enables the outlined version;
Disabled tag Success tag Warning tag Danger tag 
<span class="flix-tag flix-tag--subtle">
  Disabled tag
</span>
<span class="flix-tag flix-tag--success flix-tag--subtle">
  Success tag
</span>
<span class="flix-tag flix-tag--warning flix-tag--subtle">
  Warning tag
</span>
<span class="flix-tag flix-tag--danger flix-tag--subtle">
  Danger tag
</span>
Disabled tag Success tag Warning tag Danger tag 
<span class="flix-tag flix-tag--outlined">
  Disabled tag
</span>
<span class="flix-tag flix-tag--success flix-tag--outlined">
  Success tag
</span>
<span class="flix-tag flix-tag--warning flix-tag--outlined">
  Warning tag
</span>
<span class="flix-tag flix-tag--danger flix-tag--outlined">
  Danger tag
</span>

And you can also use two layout modifiers in combination with the display options to change the tags styles:

  • flix-tag--disabled: to any tag shows the disabled state;
  • flix-tag--small: to any tag enables the small variation;
Disabled tag Disabled tag Disabled tag Disabled tag 
<span class="flix-tag flix-tag--disabled">
  Disabled tag
</span>
<span class="flix-tag flix-tag--success flix-tag--disabled">
  Disabled tag
</span>
<span class="flix-tag flix-tag--warning flix-tag--disabled">
  Disabled tag
</span>
<span class="flix-tag flix-tag--danger flix-tag--disabled">
  Disabled tag
</span>
Small tag Small tag Small tag Small tag 
<span class="flix-tag flix-tag--small">
  Small tag
</span>
<span class="flix-tag flix-tag--success flix-tag--small">
  Small tag
</span>
<span class="flix-tag flix-tag--warning flix-tag--small">
  Small tag
</span>
<span class="flix-tag flix-tag--danger flix-tag--small">
  Small tag
</span>

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 with .flix-tag__close class name 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--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--square flix-btn--link">
  </button>
</span>

Custom tag colors

The tags use component CSS custom properties (variables) to configure the tag color and tag text color. This is useful for using tags for color coding UIs or referencing colors from other lines, e.g.: BVG U-Bahn lines.

You can override these variables on custom class names or inline and you can use theme-variables as custom properties too.

You must also provide adequate values for the --outlined and --subtle variations of your custom tags.

The custom properties that can be used are:

  • --flix-tag-color: the tag background or tag border color on outlined variation;
  • --flix-tag-text-color: the tag text and icon content color;
U5 U5 U5 Neutral 
<style>
  .u5 {
    --flix-tag-color: #7e5330;
    --flix-tag-text-color: #fff;
  }

  .u5.flix-tag--outlined,
  .u5.flix-tag--subtle {
    --flix-tag-text-color: #7e5330;
  }
</style>

<span class="flix-tag u5">
  <flix-icon class="flix-tag__icon" aria-hidden="true" name="train" solid></flix-icon>
  U5
</span>
<span class="flix-tag flix-tag--subtle u5">
  <flix-icon class="flix-tag__icon" aria-hidden="true" name="train" solid></flix-icon>
  U5
</span>
<span class="flix-tag flix-tag--outlined u5">
  <flix-icon class="flix-tag__icon" aria-hidden="true" name="train" solid></flix-icon>
  U5
</span>
<span class="flix-tag" style="--flix-tag-color: var(--flix-neutral-color); --flix-tag-text-color: var(--flix-grayscale-0-color);">
  <flix-icon class="flix-tag__icon" aria-hidden="true" name="drop" solid></flix-icon>
  Neutral
</span>

Choose accessible color combinations

When choosing your custom tag colors make sure they are accessible when used together. You can run Lighthouse accessibility checks to evaluate your entire page or use an online tool like WebAIM Contrast Checker to check for a specific color combination.

Tag group

You can use the flix-tag-group to organize your tags. The tag group allows you to configure the space, alignment and wrapping behavior of a group of tags. The "two-shaped tag" is achieved by using a tag group with no gap with two tags inside.

The following modifiers are available for the tag group:

flix-tag-group--gap-no
Minimal gap and removes the border radius of the tags in the middle.
flix-tag-group--gap-half
flix-tag-group--gap-2
These modifiers simply change the value of the gap between the tags.
flix-tag-group--wrap
Allows the tags to wrap to the next line if there is not enough horizontal space.
flix-tag-group--justify-center
flix-tag-group--justify-end
Aligns the tags at the desired position inside of the group.

Default tag group

Has spacing-1 gap between tags and is aligned to the left.

Label Label Label Label Label 
<div class="flix-tag-group">
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
</div>

Gap options

Here are some examples of the different gap options for the tag group.

Label Label Label Label Label 
<div class="flix-tag-group flix-tag-group--gap-no">
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
</div>
Label Label Label Label Label 
<div class="flix-tag-group flix-tag-group--gap-half">
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
</div>
Label Label Label Label Label 
<div class="flix-tag-group flix-tag-group--gap-2">
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
</div>

You can use the --gap-no modifier to create a "two-shaped" tag. The following tags use custom colors as shown in the custom colors example above.

<button class="flix-tag-group flix-tag-group--gap-no" type="button">
  <span class="flix-tag flix-tag--small" style="--flix-tag-color: #E5F9C0;--flix-tag-text-color: #353535;">FlixTrain</span>
  <span class="flix-tag flix-tag--outlined flix-tag--small">Direct <flix-icon class="flix-tag__icon" aria-hidden="true" name="arrow-down" ></flix-icon></span>
</button>

Content justification

You can also control the content justification of the tags.

Label Label Label Label Label 
<div class="flix-tag-group flix-tag-group--justify-center">
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
</div>
Label Label Label Label Label 
<div class="flix-tag-group flix-tag-group--justify-end">
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
</div>

Wrapping lines

If you have many tags and wish to allow them to wrap to a new line when you have less horizontal space available, you can use the --wrap modifier to do so.

Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label 
<div class="flix-tag-group flix-tag-group--wrap">
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
  <span class="flix-tag flix-tag--outlined">Label</span>
</div>

Groups inside groups

It is also possible to tag a tag group inside of a tag group. For example, you might wish to tag a "two-shaped" tag inside of a bigger tag group. For example:

Green Red
Label Label Label 
<div class="flix-tag-group flix-tag-group--wrap">
  <div class="flix-tag-group flix-tag-group--gap-no">
    <span class="flix-tag flix-tag--success">Green</span>
    <span class="flix-tag flix-tag--danger">Red</span>
  </div>
  <span class="flix-tag flix-tag--subtle">Label</span>
  <span class="flix-tag flix-tag--subtle">Label</span>
  <span class="flix-tag flix-tag--subtle">Label</span>
</div>

Related Components

Related Guides