Tag

<pc-tag>

0.5.1

experimental

Tags are used as labels to organise things or to indicate a selection.

<pc-tag>Tag</pc-tag>

Code

Edit

Appearances#

Use the appearance attribute to change the tag’s appearance.

<pc-tag appearance="primary">Primary</pc-tag>
<pc-tag appearance="success">Success</pc-tag>
<pc-tag appearance="neutral">Neutral</pc-tag>
<pc-tag appearance="warning">Warning</pc-tag>
<pc-tag appearance="danger">Danger</pc-tag>

Code

Edit

Variants#

Use the variant attribute to change the tag’s variant.

<div style="margin-block-end: var(--pc-spacing-m)">
    <pc-tag appearance="primary" variant="accent">Accent</pc-tag>
    <pc-tag appearance="primary" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="primary" variant="filled">Filled</pc-tag>
    <pc-tag appearance="primary" variant="outlined">Outlined</pc-tag>
</div>
<div style="margin-block-end: var(--pc-spacing-m)">
    <pc-tag appearance="success" variant="accent">Accent</pc-tag>
    <pc-tag appearance="success" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="success" variant="filled">Filled</pc-tag>
    <pc-tag appearance="success" variant="outlined">Outlined</pc-tag>
</div>
<div style="margin-block-end: var(--pc-spacing-m)">
    <pc-tag appearance="neutral" variant="accent">Accent</pc-tag>
    <pc-tag appearance="neutral" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="neutral" variant="filled">Filled</pc-tag>
    <pc-tag appearance="neutral" variant="outlined">Outlined</pc-tag>
</div>
<div style="margin-block-end: var(--pc-spacing-m)">
    <pc-tag appearance="warning" variant="accent">Accent</pc-tag>
    <pc-tag appearance="warning" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="warning" variant="filled">Filled</pc-tag>
    <pc-tag appearance="warning" variant="outlined">Outlined</pc-tag>
</div>
<div>
    <pc-tag appearance="danger" variant="accent">Accent</pc-tag>
    <pc-tag appearance="danger" variant="filled outlined">F + O</pc-tag>
    <pc-tag appearance="danger" variant="filled">Filled</pc-tag>
    <pc-tag appearance="danger" variant="outlined">Outlined</pc-tag>
</div>

Code

Edit

Sizes#

Use the size attribute to change the tag’s size.

<pc-tag size="small">Small</pc-tag>
<pc-tag size="medium">Medium</pc-tag>
<pc-tag size="large">Large</pc-tag>

Code

Edit

Pill#

Use the pill attribute to give tags a pill‐shaped look.

<pc-tag size="small" pill>Small</pc-tag>
<pc-tag size="medium" pill>Medium</pc-tag>
<pc-tag size="large" pill>Large</pc-tag>

Code

Edit

Removable#

Use the removable attribute to add a remove button to the tag.

<div class="tags-removable">
    <pc-tag size="small" removable>Small</pc-tag>
    <pc-tag size="medium" removable>Medium</pc-tag>
    <pc-tag size="large" removable>Large</pc-tag>
</div>

<script>
    const tags = document.querySelector(".tags-removable");

    tags.addEventListener("pc-remove", (event) => {
        const tag = event.target;
        tag.style.opacity = "0";
        setTimeout(() => {
            tag.style.opacity = "1";
        }, 2000);
    });
</script>

<style>
    .tags-removable pc-tag {
        transition: opacity var(--pc-transition-fast) ease-in-out;
    }
</style>

Code

Edit

Properties#

Name	Description	Default
`appearance`	The tag’s appearance. Type: `"primary" \| "success" \| "neutral" \| "warning" \| "danger"`	`"neutral"`
`variant`	The tag’s variant. Type: `"accent" \| "filled" \| "outlined" \| "filled outlined"`	`"filled outlined"`
`size`	The tag’s size. Type: `"small" \| "medium" \| "large"`	`"medium"`
`pill`	Draws a pill‐style tag. Type: `boolean`	`false`
`removable`	Adds a remove button to the tag. Type: `boolean`	`false`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	‐

Learn more about attributes and properties.

Slots#

Name	Description
(default)	The tag’s content.

Learn more about using slots.

Events#

Name	Description	Event detail
`pc-remove`	Emitted when the remove button is pressed.	‐

Learn more about events.

Parts#

Name	Description
`content`	The tag’s content.
`remove-button`	The tag’s remove button, a `<pc-button>`.
`remove-button-base`	The remove button’s base part.

Learn more about customising CSS parts.

Importing#

If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

CDN (script tag)

CDN (import)

npm (import)

To manually import this component from the CDN, copy this code snippet and paste it in your HTML.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/tag/tag.js"></script> 

To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/tag/tag.js"; 

To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.

import "placer-toolkit/dist/components/tag/tag.js";

Dependencies#

This component automatically imports these components:

Button