Tag

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

<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

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

Outlined

Use the outlined attribute to draw outlined tags with transparent backgrounds.

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

Code

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

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

Properties

Name	Description	Default
`appearance`	The tag’s appearance. `"primary" \| "success" \| "neutral" \| "warning" \| "danger"`	`"neutral"`
`size`	The tag’s size. `"small" \| "medium" \| "large"`	`"medium"`
`outlined`	Draws an outlined tag. `boolean`	`false`
`pill`	Draws a pill‐style tag. `boolean`	`false`
`removable`	Adds a remove button to the tag. `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
`base`	The tag’s base wrapper.
`content`	The tag’s content.
`remove-button`	The tag’s remove button, a `<pc-icon-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 ignore this section. If you’re cherry picking, you can use any of the following snippets to import this component.

Script

Import

Bundler

To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML.

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

To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript:

import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/tag/tag.js";

To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript:

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

Dependencies

This component automatically imports these components:

Icon Button