Tags

figma:ready
scss:ready
freemarker:ready
vue:ready
webComponent:ready
Usage
Code
Accessibility
Specs
Design

Import


@import 'settings-tools/all-settings';
@import 'components/c.tag';

Available types of tags

  • text
  • link
  • selectable
  • removable

Each tag type requires a different dom structure and classes names. Each tag type comes in 2 sizes and with a dark color scheme.

The text tag

Apply the mc-tag-text to a non-clickable element, like a p, a div or a span element, and wrap the label inside a span with a mc-tag-text__label class.

Available modifiers :

  • m (default size): mc-tag-text--m
  • s : mc-tag-text--s
  • dark : mc-tag-text--dark

Apply the mc-tag-link to a a element, and wrap the label inside a span span with a mc-tag-link__label class. It is the same as the text tag but with hover, active and focus behavior.

Available modifiers :

  • m (default size): mc-tag-link--m
  • s : mc-tag-link--s
  • dark : mc-tag-link--dark

<a href="#" class="mc-tag-link">
<span class="mc-tag-link__label"> link </span>
</a>

The selectable tag

The selectable tag is based on a checkbox and his associated label.

Available modifiers :

  • m (default size): mc-tag-selectable--m
  • s : mc-tag-selectable--s
  • dark : mc-tag-selectable--dark

You can disable the selectable tag using a disabled attribute on the input


<span class="mc-tag-selectable">
<input
class="mc-tag-selectable__input"
type="checkbox"
name=""
id="selectable"
/>
<label class="mc-tag-selectable__pill" for="selectable">
<span class="mc-tag-selectable__label"> selectable </span>
</label>
</span>

The removable tag

The removable tag is a tag with a button dedicated to remove the tag.

Available modifiers :

  • m (default size): mc-tag-removable--m
  • s : mc-tag-removable--s
  • dark : mc-tag-removable--dark

<span class="mc-tag-removable">
<span class="mc-tag-removable__label"> removable </span>
<button class="mc-tag-removable__remove">
<span class="mc-tag-removable__remove-text"> Delete tag </span>
</button>
</span>

The tag list

Use a ul > li structure with the mc-tag-list classes to create a tag list.


<ul class="mc-tag-list">
<li class="mc-tag-list__item">tag 1</li>
<li class="mc-tag-list__item">tag 2</li>
</ul>