Skip to content

Tag

Tags represent a set of interactive or non-interactive, keywords that help label, organize, and categorize objects. Tags can be added or removed.

Structurally .tag contains following elements:

  • .tag__remove-button

It also contains following class modifiers:

  • .tag_interactive
  • .tag_secondary
  • .tag_tertiary
  • .tag_success
  • .tag_info
  • .tag_error
  • .tag_notice

Examples

Below examples use pure html markup and css classes. This is only for a presentation purpose. We highly recommend to use a specialized web-component or macro, that abstracts away whole complexity with writing markup from the base.

Default (non-interactive)

Default

HTML
<span class="tag">Default</span>

Interactive

Interactive

HTML
<span class="tag tag_interactive">Interactive</span>

Removable

Interactive

HTML
<span class="tag tag_interactive">
    Interactive

    <button class="tag__remove-button">
        <svg class="icon">
            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
        </svg>
    </button>
</span>

Secondary

Secondary

HTML
<span class="tag tag_secondary">Secondary</span>

LESS

You can modify any tag less variable in your User Less section to change a tag styles.

Tag variables

Variables used to style a tag.

@baseTagBgColor: @neutralColors100;
@baseTagCloseButtonIconColor: @neutralColors500;
@baseTagInteractiveHoverBgColor: @neutralColors200;
@baseTagInteractiveHoverIconColor: @neutralColors800;

@tagFontSizeInPx: 14;
@tagLineHeightInPx: 20;

@tagBorderRadius: 1px;

@tagSecondaryPaddingHorizontal: @globalSpacing;
@tagSecondaryPaddingVertical: @globalSpacing * 0.5;
@tagSecondaryBorderRadius: 20;

@tagTertiaryPaddingHorizontal: @globalSpacing * 0.5;
@tagTertiaryPaddingVertical: @globalSpacing * 0.25;
@tagTertiaryBorderRadius: 20;

@tagSuccessBackgroundColor: @successColors50;
@tagSuccessColor: @successColors800;

@tagInfoBackgroundColor: @primaryColors50;
@tagInfoColor: @primaryColors900;

@tagErrorBackgroundColor: @errorColors100;
@tagErrorColor: @errorColors800;

@tagNoticeBackgroundColor: @neutralColors900;
@tagNoticeColor: @neutralColors0;

@tagQuaternaryPaddingHorizontal: @globalSpacing * 0.375;
@tagQuaternaryPaddingVertical: 0;
@tagQuaternaryBorderRadius: 2;
@tagQuartenaryFontSizeInPx: @fontSizeInPxXS;
@tagQuartenaryColor: @neutralColors900;
@tagQuartenaryBgColor: @neutralColors200;

@tagMinimalFontSize: @fontSizeInPxXS;
@tagMinimalLineHeight: @lineHeightInPxXS;
@tagMinimalFontWeight: @fontWeightSemibold;
@tagMinimalColor: @globalFontColor;
@tagMinimalBgColor: @neutralColors100;
@tagMinimalBorderWidth: 1px;
@tagMinimalBorderStyle: solid;
@tagMinimalBorderColor: @neutralColors200;
@tagMinimalBorder: @tagMinimalBorderWidth @tagMinimalBorderStyle @tagMinimalBorderColor;
@tagMinimalPaddingVertical: 0;
@tagMinimalPaddingHorizontal: @globalSpacing * 0.5;

@tagPromotionColor: @neutralColors0;
@tagPromotionBgColor: @secondaryColors500;
@tagPromotionBorderRadiusInPx: 2;

@tagGroupGapInPx: 4;

Tag styles

Here are standard tag styles.

.tag {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;

    .pixel-to-rem(gap, 4);

    .pixel-to-rem(padding-top, 4);
    .pixel-to-rem(padding-bottom, 4);
    .pixel-to-rem(padding-left, 6);
    .pixel-to-rem(padding-right, 6);

    background-color: @baseTagBgColor;
    border-right: @tagBorderRadius;

    .font-size(@tagFontSizeInPx);
    .line-height(@tagLineHeightInPx);

    vertical-align: top;
    text-align: center;
    height: fit-content;

    &_promotion {
        color: @tagPromotionColor;
        background-color: @tagPromotionBgColor;
        line-height: 1;
        .font-size(12);
        .pixel-to-rem(border-radius, @tagPromotionBorderRadiusInPx);
        .pixel-to-rem(padding-left, 4);
        .pixel-to-rem(padding-right, 4);
    }

    &_l {
        .pixel-to-rem(padding-top, 4);
        .pixel-to-rem(padding-bottom, 4);
        .pixel-to-rem(padding-left, 12);
        .pixel-to-rem(padding-right, 12);
    }

    &__remove-button {
        .icon-m();
        .line-height(16);

        .icon {
            stroke: @baseTagCloseButtonIconColor;
        }
    }

    &_interactive {
        cursor: pointer;

        &.tag:hover {
            background-color: @baseTagInteractiveHoverBgColor;

            .icon {
                cursor: pointer;

                stroke: @baseTagInteractiveHoverIconColor;
            }
        }
    }

    &_secondary {
        padding: @tagSecondaryPaddingVertical @tagSecondaryPaddingHorizontal;
        .pixel-to-rem(border-radius, @tagSecondaryBorderRadius);
    }

    &_tertiary {
        padding: @tagTertiaryPaddingVertical @tagTertiaryPaddingHorizontal;
        .pixel-to-rem(border-radius, @tagTertiaryBorderRadius);
    }

    &_quaternary {
        display: inline-block;
        color: @tagQuartenaryColor;
        background-color: @tagQuartenaryBgColor;
        .font-size(@tagQuartenaryFontSizeInPx);
        padding: @tagQuaternaryPaddingVertical @tagQuaternaryPaddingHorizontal;
        .pixel-to-rem(border-radius, @tagQuaternaryBorderRadius);
    }

    &_minimal {
        .font-size(@tagMinimalFontSize);
        .line-height(@tagMinimalLineHeight);
        font-weight: @tagMinimalFontWeight;
        color: @tagMinimalColor;
        background-color: @tagMinimalBgColor;
        border: @tagMinimalBorder;
        padding: @tagMinimalPaddingVertical @tagMinimalPaddingHorizontal;
    }

    &_success {
        background-color: @tagSuccessBackgroundColor;
        color: @tagSuccessColor;
    }

    &_info {
        background-color: @tagInfoBackgroundColor;
        color: @tagInfoColor;
    }

    &_error {
        background-color: @tagErrorBackgroundColor;
        color: @tagErrorColor;
    }

    &_notice {
        background-color: @tagNoticeBackgroundColor;
        color: @tagNoticeColor;
    }

    &__group {
        display: inline-flex;
        flex-wrap: wrap;
        .pixel-to-rem(gap, @tagGroupGapInPx);
        vertical-align: text-top;
    }
}

Webcomponents reference

Macros reference