Comet Tags

Default

tag

another tag

different tag

also a tag

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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-hidden="true" focusable="false">
            <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-hidden="true" focusable="false">
            <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-hidden="true" focusable="false">
            <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-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
        </svg>
    </button>
</div>

Copy to Clipboard Press Ctrl + C to copy

{{ 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

HTML Macro

Copy to Clipboard Press Ctrl + C to copy

<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-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
        </svg>
    </button>
</div>

Copy to Clipboard Press Ctrl + C to copy

{{ 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.