Skip to table of contents Tag
<pc-tag> 0.5.1 experimental Tags are used as labels to organise things or to indicate a selection.
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>
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>
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>
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>
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>
| Name | Description | Reflects | 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 customising animations.
| Name | Description |
|---|
| (default) | The tag’s content. |
Learn more about using slots.
| Name | Description | Event detail |
|---|
pc-remove | Emitted when the remove button is pressed. | ‐ |
Learn more about events.
| 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.
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";
This component automatically imports these components: