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;
flix-tag--success: success color;flix-tag--warning: warning color;flix-tag--danger: danger color;
Accessibility of appearance tags
As you can see, the warning and danger tags are quite similar in color. It can be difficult to differenciate which is which when they are used together. Also, it can be difficult for people with different visual impairements, such as colorblindness, to differenciate 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 icons 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.
<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;
<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><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;
<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><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.
<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;
<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="bus" solid=""></flix-icon>
U5
</span>
<span class="flix-tag flix-tag--subtle u5">
<flix-icon class="flix-tag__icon" aria-hidden="true" name="bus" solid=""></flix-icon>
U5
</span>
<span class="flix-tag flix-tag--outlined u5">
<flix-icon class="flix-tag__icon" aria-hidden="true" name="bus" 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.