Tags

Tags are advanced pills designed to be used as an interactive indication of a selection.

Default

tag
another tag
different tag
also a tag
<div class="comet-pill comet-tag">
    <span class="comet-tag__content">tag</span>
    <button class="comet-tag__close-button">
        <svg class="comet-tag__icon" aria-labelledby="title">
            <title>x</title>
            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
        </svg>
    </button>
</div>
<div class="comet-pill comet-tag">
    <span class="comet-tag__content">another tag</span>
    <button class="comet-tag__close-button">
        <svg class="comet-tag__icon" aria-labelledby="title">
            <title>x</title>
            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
        </svg>
    </button>
</div>
<div class="comet-pill comet-tag">
    <span class="comet-tag__content">different tag</span>
    <button class="comet-tag__close-button">
        <svg class="comet-tag__icon" aria-labelledby="title">
            <title>x</title>
            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
        </svg>
    </button>
</div>
<div class="comet-pill comet-tag">
    <span class="comet-tag__content">also a tag</span>
    <button class="comet-tag__close-button">
        <svg class="comet-tag__icon" aria-labelledby="title">
            <title>x</title>
            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
        </svg>
    </button>
</div>
                
{{ comet.tag("tag") }} {{ comet.tag("another tag") }} {{ comet.tag("different tag") }} {{ comet.tag("also a tag") }}
                
Macro params reference

Tag with User Avatar

tag with avatar
<div class="comet-pill comet-tag comet-tag--avatar">
    <img src="/images/components/list-group/default.png" alt="" class="comet-tag__avatar">
    <span class="comet-tag__content">tag with avatar</span>
    <button class="comet-tag__close-button">
        <svg class="comet-tag__icon" aria-labelledby="title">
            <title>x</title>
            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
        </svg>
    </button>
</div>
                
{{ comet.tag("tag with avatar", avatar="/images/components/list-group/default.png") }}
                
Macro params reference

Guidelines

Interaction

Tags are added to a section of a page or an input as an indication of a selection. The close button on a tag should be used to remove the selected option.

Editorial

  • Minimize tag length to two- to three-words.

Class Reference

Class Applies to Outcome

.comet-pill

<span> or <li>

Displays element styled as a pill.

.comet-tag

.comet-pill

Adds additional styling to pill to display as tag

.comet-tag--avatar

.comet-tag

Identifies tag as having a user avatar

.comet-tag__avatar

<img>

Adds proper styles to Tag Avatar Image

.comet-tag__content

<span>

Wraps the tag's content

.comet-tag__close-button

<button>

Adds proper styles to the Tag Close Button

.comet-tag__icon

<svg>

Adds proper styles to the SVG

Macro Reference

Parameter Default Values Description

label

Default Tag Label

String

Full pill label. Omit styling or additional tags.

class

False

Modifier and custom classes

Add custom tags to a pill, including modifier classes.

avatar

False

URL

URL for the image of the user avatar

icon_path

False

String

Allows the definition of an icon path for custom icons.