Tag

Display an item's category, attributes, or status as a short label.

<sy-tag>Installation guide Basic usage

Live preview

Interact with the component to see results here.

View code

HTML

<sy-tag color="purple" size="medium">Design</sy-tag>

Usage guide

Display categories, filters, or status with short labels. Use Button for actions and Badge for counts.

Selectable tags

Use selectable to allow toggling, as with a filter.

Removable tags

Use removable to remove selected values from a list. Restrict interaction with disabled or readonly.

Examples

Category colors

Convey meaning with text as well as color.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-tag color="gray">gray</sy-tag>
  <sy-tag color="purple">purple</sy-tag>
  <sy-tag color="blue">blue</sy-tag>
  <sy-tag color="green">green</sy-tag>
  <sy-tag color="cyan">cyan</sy-tag>
  <sy-tag color="yellow">yellow</sy-tag>
  <sy-tag color="orange">orange</sy-tag>
  <sy-tag color="red">red</sy-tag>
</div>

Size and shape

Choose a size that matches surrounding text.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-tag
    size="small"
    rounded
    color="purple"
  >Syidax</sy-tag>
  <sy-tag
    size="medium"
    rounded
    color="purple"
  >Syidax</sy-tag>
  <sy-tag
    size="large"
    rounded
    color="purple"
  >Syidax</sy-tag>
</div>

Removable tags

Remove the current tag with its close button.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-tag removable color="blue">Frontend</sy-tag>
  <sy-tag removable color="green">Design</sy-tag>
</div>

Interaction states

Distinguish selectable, disabled, and read-only states.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-tag selectable>Optional</sy-tag>
  <sy-tag disabled removable>Inactive</sy-tag>
  <sy-tag readonly removable>Read only</sy-tag>
</div>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-tag color="purple" size="medium">Design</sy-tag>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["selected", "removed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Remove tags programmatically

Call setRemove() to remove a tag. Handle the removal event to update the app's selection list as well.

View code

HTML

<sy-tag removable id="sample">Design</sy-tag>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Remove tag</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setRemove();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Feature examples

Choose a feature from 12 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.