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--neutral
flix-tag--success
flix-tag--warning
flix-tag--danger
Modify the tag state color.
flix-tag--ai
To be used to create AI Generated indicative tags.
flix-tag--selected
Selected tags have branded background colors.
flix-tag--subtle
Enable the subtle version, with a dimmed background.
flix-tag--outlined
Outlined tags have their state colors applied on the borders and text 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.

State color variations

Default Neutral Success Warning Danger 
<span class="flix-tag">
  Default
  <flix-icon class="flix-tag__icon" aria-hidden="true" name="bus-time" solid></flix-icon>
</span>
<span class="flix-tag flix-tag--neutral">
  <flix-icon class="flix-tag__icon" aria-hidden="true" name="info" solid></flix-icon>
  Neutral
</span>
<span class="flix-tag flix-tag--success">
  <flix-icon class="flix-tag__icon" aria-hidden="true" name="checkmark-strong" solid></flix-icon>
  Success
</span>
<span class="flix-tag flix-tag--warning">
  <flix-icon class="flix-tag__icon" aria-hidden="true" name="warning"></flix-icon>
  Warning
</span>
<span class="flix-tag flix-tag--danger">
  <flix-icon class="flix-tag__icon" aria-hidden="true" name="crossed" solid></flix-icon>
  Danger
</span>

Display variations

In addition to state color modifiers, two display options are available.

The subtle version has a dimmed background and applies the tag color to the text and border.

Default Neutral Success Warning Danger 
<span class="flix-tag flix-tag--subtle">
  Default
</span>
<span class="flix-tag flix-tag--neutral flix-tag--subtle">
  Neutral
</span>
<span class="flix-tag flix-tag--success flix-tag--subtle">
  Success
</span>
<span class="flix-tag flix-tag--warning flix-tag--subtle">
  Warning
</span>
<span class="flix-tag flix-tag--danger flix-tag--subtle">
  Danger
</span>

Outlined tags have their state colors applied on the borders and text instead of on their background.

Default Neutral Success Warning Danger 
<span class="flix-tag flix-tag--outlined">
  Default
</span>
<span class="flix-tag flix-tag--neutral flix-tag--outlined">
  Neutral
</span>
<span class="flix-tag flix-tag--success flix-tag--outlined">
  Success
</span>
<span class="flix-tag flix-tag--warning flix-tag--outlined">
  Warning
</span>
<span class="flix-tag flix-tag--danger flix-tag--outlined">
  Danger
</span>

Selected

The selected tag appearance can be used to distinguish a tag that has been selected or activated by the user. It is usually used within the context of many other similar neutral tags.

Please make sure to add the relevant aria attributes to mark the selected tags accordingly in an accessible way. The correct aria attribute depends on your use case and role the button tag represents on the user interface, and can be (but not limited to) one of the following:

<div class="flix-tag-group flix-tag-group--wrap">
  <button class="flix-tag flix-tag--subtle flix-tag--selected" aria-pressed="true">
    <flix-icon class="flix-tag__icon" aria-hidden="true" name="filter"></flix-icon>
    Filters: 1
  </button>
  <button class="flix-tag flix-tag--subtle flix-tag--selected" aria-pressed="true">
    Boarding/Dropping points: 1
    <flix-icon class="flix-tag__icon" aria-hidden="true" name="arrow-down"></flix-icon>
  </button>
  <button class="flix-tag flix-tag--outlined">
    Times
    <flix-icon class="flix-tag__icon" aria-hidden="true" name="arrow-down"></flix-icon>
  </button>
  <button class="flix-tag flix-tag--outlined">
    Seat types
    <flix-icon class="flix-tag__icon" aria-hidden="true" name="arrow-down"></flix-icon>
  </button>
</div>

Same as the state appearances, the selected tag also has different display options:

Default Subtle Outlined 
<div class="flix-tag-group flix-tag-group--wrap">
  <span class="flix-tag flix-tag--selected">Default</span>
  <span class="flix-tag flix-tag--selected flix-tag--subtle">Subtle</span>
  <span class="flix-tag flix-tag--selected flix-tag--outlined">Outlined</span>
</div>

AI signaling

The tag is the main component used to signal AI generated content at Flix. You can enable the AI appearance with the flix-tag--ai modifier and use the spark icon. As the other appearances, the AI tag also has support for the three display options.

AI Generated AI Generated AI Generated AI Generated 
<div class="flix-tag-group flix-tag-group--wrap">
  <span class="flix-tag flix-tag--ai">
    <flix-icon class="flix-tag__icon" aria-hidden="true" name="spark"></flix-icon>
    AI Generated
  </span>
  <span class="flix-tag flix-tag--ai flix-tag--subtle">
    <flix-icon class="flix-tag__icon" aria-hidden="true" name="spark"></flix-icon>
    AI Generated
  </span>
  <span class="flix-tag flix-tag--ai flix-tag--outlined">
    <flix-icon class="flix-tag__icon" aria-hidden="true" name="spark"></flix-icon>
    AI Generated
  </span>
  <span class="flix-tag flix-tag--ai flix-tag--subtle flix-tag--small">
    <flix-icon class="flix-tag__icon" aria-hidden="true" name="spark"></flix-icon>
    AI Generated
  </span>
</div>

Disabled

To enable the visual disabled state of a tag use the flix-tag--disabled modifier.

If you are using button tags, make sure to also add disabled attribute to truly disable the button behavior.

Please remember that it is not possible to properly disable a link.

<button class="flix-tag flix-tag--disabled" disabled>
  Disabled
</button>
<button class="flix-tag flix-tag--neutral flix-tag--disabled" disabled>
  Disabled
</button>
<button class="flix-tag flix-tag--success flix-tag--disabled" disabled>
  Disabled
</button>
<button class="flix-tag flix-tag--warning flix-tag--disabled" disabled>
  Disabled
</button>
<button class="flix-tag flix-tag--danger flix-tag--disabled" disabled>
  Disabled
</button>

Small

All tags support the small variation with the flix-tag--small modifier.

Small Small Small Small Small 
<span class="flix-tag flix-tag--small">
  Small
</span>
<span class="flix-tag flix-tag--neutral flix-tag--small">
  Small
</span>
<span class="flix-tag flix-tag--success flix-tag--small">
  Small
</span>
<span class="flix-tag flix-tag--warning flix-tag--small">
  Small
</span>
<span class="flix-tag flix-tag--danger flix-tag--small">
  Small
</span>

Closing tags

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.

Please remember that button tags cannot have close buttons inside because buttons cannot exist inside other buttons.

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 color is applied to both the background and border color on outlined variation;
  • --flix-tag-background-color: if you need to customize the background color independently from the border;
  • --flix-tag-border-color: if you need to customize the border color independently from the background;
  • --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.

Related Components

Related Guides