Tag

<cs-tag>

Stable

Since 0.1

Tags label, categorize, or represent selections with a compact visual marker. Use them for status indicators, filters, or removable chips.

Featured

<cs-tag>Featured</cs-tag>

Featured

<cs-tag><cs-icon name="star" variant="fill"></cs-icon> Featured</cs-tag>

Examples

Variant

Set the variant attribute to match the tag to its meaning.

Brand
Success
Neutral
Warning
Danger

<cs-tag variant="brand">Brand</cs-tag>
<cs-tag variant="success">Success</cs-tag>
<cs-tag variant="neutral">Neutral</cs-tag>
<cs-tag variant="warning">Warning</cs-tag>
<cs-tag variant="danger">Danger</cs-tag>

Appearance

Use the appearance attribute to change the tag’s visual style. The default is filled-outlined.

Accent Filled-Outlined Filled Outlined

<div class="cs-stack">
  <p>
    <cs-tag variant="brand" appearance="accent">Accent</cs-tag>
    <cs-tag variant="brand" appearance="filled-outlined">Filled-Outlined</cs-tag>
    <cs-tag variant="brand" appearance="filled">Filled</cs-tag>
    <cs-tag variant="brand" appearance="outlined">Outlined</cs-tag>
  </p>
  <p>
    <cs-tag variant="success" appearance="accent">Accent</cs-tag>
    <cs-tag variant="success" appearance="filled-outlined">Filled-Outlined</cs-tag>
    <cs-tag variant="success" appearance="filled">Filled</cs-tag>
    <cs-tag variant="success" appearance="outlined">Outlined</cs-tag>
  </p>
  <p>
    <cs-tag variant="neutral" appearance="accent">Accent</cs-tag>
    <cs-tag variant="neutral" appearance="filled-outlined">Filled-Outlined</cs-tag>
    <cs-tag variant="neutral" appearance="filled">Filled</cs-tag>
    <cs-tag variant="neutral" appearance="outlined">Outlined</cs-tag>
  </p>
  <p>
    <cs-tag variant="warning" appearance="accent">Accent</cs-tag>
    <cs-tag variant="warning" appearance="filled-outlined">Filled-Outlined</cs-tag>
    <cs-tag variant="warning" appearance="filled">Filled</cs-tag>
    <cs-tag variant="warning" appearance="outlined">Outlined</cs-tag>
  </p>
  <p>
    <cs-tag variant="danger" appearance="accent">Accent</cs-tag>
    <cs-tag variant="danger" appearance="filled-outlined">Filled-Outlined</cs-tag>
    <cs-tag variant="danger" appearance="filled">Filled</cs-tag>
    <cs-tag variant="danger" appearance="outlined">Outlined</cs-tag>
  </p>
</div>

Size

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

Extra Small
Small
Medium
Large
Extra Large

<cs-tag size="xs">Extra Small</cs-tag>
<cs-tag size="s">Small</cs-tag>
<cs-tag size="m">Medium</cs-tag>
<cs-tag size="l">Large</cs-tag>
<cs-tag size="xl">Extra Large</cs-tag>

Pill

Use the pill attribute to give tags rounded edges.

Extra Small
Small
Medium
Large
Extra Large

<cs-tag size="xs" pill>Extra Small</cs-tag>
<cs-tag size="s" pill>Small</cs-tag>
<cs-tag size="m" pill>Medium</cs-tag>
<cs-tag size="l" pill>Large</cs-tag>
<cs-tag size="xl" pill>Extra Large</cs-tag>

Removable

Use the with-remove attribute to add a remove button to the tag. The button carries a built-in Remove label for assistive technology, and activating it emits the cs-remove event so you can handle the removal.

  Extra Small
  Small
  Medium
  Large
  Extra Large

<div class="tags-removable">
  <cs-tag size="xs" with-remove>Extra Small</cs-tag>
  <cs-tag size="s" with-remove>Small</cs-tag>
  <cs-tag size="m" with-remove>Medium</cs-tag>
  <cs-tag size="l" with-remove>Large</cs-tag>
  <cs-tag size="xl" with-remove>Extra Large</cs-tag>
</div>

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

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

<style>
  .tags-removable cs-tag {
    transition: opacity var(--cs-transition-normal);
  }
</style>

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.

npm

Self-Hosted

React

import '@cruglobal/cornerstone-components/components/tag/tag.js';

import './cornerstone/components/tag/tag.js';

import CsTag from '@cruglobal/cornerstone-components/react/tag/index.js';

Slots

Learn more about using slots.

Name	Description
(default)	The tag's content.

Attributes & Properties

Learn more about attributes and properties.

Property	Attribute	Description	Type	Default	Reflects
`appearance`	`appearance`	The tag's visual appearance.	`'accent' \| 'filled' \| 'outlined' \| 'filled-outlined'`	`'filled-outlined'`	Yes
`pill`	`pill`	Draws a pill-style tag with rounded edges.	`boolean`	`false`	Yes
`size`	`size`	The tag's size.	`'xs' \| 's' \| 'm' \| 'l' \| 'xl'`	`'m'`	Yes
`variant`	`variant`	The tag's theme variant. Defaults to `neutral` if not within another element with a variant.	`'brand' \| 'neutral' \| 'highlight' \| 'information' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Yes
`withRemove`	`with-remove`	Makes the tag removable and shows a remove button.	`boolean`	`false`	—

Events

Learn more about events.

Name	Description
`cs-remove`	Emitted when the remove button is activated.

CSS Parts

Learn more about CSS parts.

Name	Description	CSS selector
`content`	The tag's content.	`::part(content)`
`remove-button`	The tag's remove button, a `<cs-button>`.	`::part(remove-button)`
`remove-button__button`	The remove button's exported `button` part.	`::part(remove-button__button)`

Dependencies

This component automatically imports the following elements. Sub-dependencies, if any exist, are included in this list.

Quick Links

Recent Searches

Tag