Tag
Migration
Examples
Appearance
Sizes
Removable
Truncation
With tooltip
Prefix & Suffix icons
Slots
Properties
Events
Parts
Dependencies

Tag

<sl-tag> | SlTag

Since 1.0

stable

Tags are used as labels to organize things or to indicate a selection or present a data point.

Grey

Blue

Navy

Purple

Green

Orange

Red

<sl-tag variant="grey">Grey</sl-tag>
<sl-tag variant="blue">Blue</sl-tag>
<sl-tag variant="navy">Navy</sl-tag>
<sl-tag variant="purple">Purple</sl-tag>
<sl-tag variant="green">Green</sl-tag>
<sl-tag variant="orange">Orange</sl-tag>
<sl-tag variant="red">Red</sl-tag>

Migration

Deprecated tag variants are automatically migrated to the current variants from version 2.3.0. Use the current variant names in new code.

primary → navy
secondary → blue
success → green
warning → orange
danger → red
neutral → grey

Examples

Appearance

Tag component has 2 appearance: soft and solid. Default is soft. Note: At the moment, only purple variant has distinct solid appearance.

Grey

Blue

Navy

Purple

Green

Orange

Red

<sl-tag variant="grey" appearance="solid">Grey</sl-tag>
<sl-tag variant="blue" appearance="solid">Blue</sl-tag>
<sl-tag variant="navy" appearance="solid">Navy</sl-tag>
<sl-tag variant="purple" appearance="solid">Purple</sl-tag>
<sl-tag variant="green" appearance="solid">Green</sl-tag>
<sl-tag variant="orange" appearance="solid">Orange</sl-tag>
<sl-tag variant="red" appearance="solid">Red</sl-tag>

Sizes

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

Small

Medium

Large

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

Removable

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

Small

Medium

Large

Grey

Blue

Navy

Purple

Green

Orange

Red

<div class="tags-removable">
  <sl-tag size="small" removable>Small</sl-tag>
  <sl-tag size="medium" removable>Medium</sl-tag>
  <sl-tag size="large" removable>Large</sl-tag>
  <sl-tag removable variant="grey" appearance="solid">Grey</sl-tag>
  <sl-tag removable variant="blue" appearance="solid">Blue</sl-tag>
  <sl-tag removable variant="navy" appearance="solid">Navy</sl-tag>
  <sl-tag removable variant="purple" appearance="solid">Purple</sl-tag>
  <sl-tag removable variant="green" appearance="solid">Green</sl-tag>
  <sl-tag removable variant="orange" appearance="solid">Orange</sl-tag>
  <sl-tag removable variant="red" appearance="solid">Red</sl-tag>
</div>

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

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

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

Truncation

End

We have utility class name truncate-text to truncate text content at end. We only need to provide a max-width for when truncation happens.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div>
    <sl-tag size="small">
      <div class="text-truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </sl-tag>

    <sl-tag>
      <div class="text-truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </sl-tag>

    <sl-tag size="large">
      <div class="text-truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </sl-tag>
</div>

<style>
  .text-truncate {
    max-width: 240px;
  }
</style>

Middle

For middle truncation, we can use sl-format-text component to truncate the content, use max-length, start, end attributes to control the maximum number of letters, the number of letters at the start, the number of letters at the end respectively. See sl-format-text for more details.

A normal text

<div>
    <sl-tag size="small" truncate="middle">
      A normal text
    </sl-tag>

    <sl-tag size="small">
      <sl-format-text truncate="middle" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></sl-format-text>
    </sl-tag>

    <sl-tag>
      <sl-format-text truncate="middle" start="5" end="5" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></sl-format-text>
    </sl-tag>

    <sl-tag size="large">
      <sl-format-text truncate="middle" max-length="9" start="1" end="1" text="0123456789"></sl-format-text>
    </sl-tag>
</div>

Auto middle truncation

if provided start or end is 0 or sum of start and end, plus 3 of ellipsis letters, is bigger than max-length, the component will automatically use half of max-length - 3 for front and the other half for end.

<sl-tag>
    <sl-format-text truncate="middle" max-length="10" start="35" end="35" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></sl-format-text>
    </sl-tag>
<br/>
<sl-tag>
    <sl-format-text truncate="middle" start="0" end="0" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></sl-format-text>
</sl-tag>

We can add sl-tooltip to wrap the sl-tag to provide full content on hover.

<sl-tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">
  <sl-tag size="small">
    <div class="text-truncate">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </sl-tag>
</sl-tooltip>

End truncation

To dynamically show tooltip based on the whether the content is overflown, we can use ResizeObserver.

Normal text

<div>
  <sl-tooltip content="Normal text" disabled>
    <sl-tag>
      <div class="text-truncate">
        Normal text
      </div>
    </sl-tag>
  </sl-tooltip>
  <sl-tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." disabled>
  <sl-tag>
    <div class="text-truncate">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </sl-tag>
</sl-tooltip>
</div>
<script type="module">
  await Promise.all([
    customElements.whenDefined('sl-tooltip'),
    customElements.whenDefined('sl-tag')
  ]);

  const tooltips = Array.from(document.querySelectorAll("sl-tooltip"));

  for (const tooltip of tooltips) {
    const tag = tooltip.querySelector("sl-tag");
    const container = tag?.shadowRoot.querySelector("[part=base]");
    const content = tag?.querySelector(".text-truncate");

    if (!content) continue;

    const checkOverflow = () => {
      if (!container) {
        return;
      }

      // Check if the container itself is overflowing
      const isOverflowing = content.scrollWidth > content.clientWidth;

      if (tooltip) {
        tooltip.disabled = !isOverflowing
      }
    }

    const resizeObserver = new ResizeObserver(checkOverflow);
    resizeObserver.observe(container);
  };
</script>

Middle truncation

For middle truncation, you should know the maximum text length and the element’s text length, so we can use those to determine whether the tooltip should be shown.

<div>
  <sl-tooltip content="Normal text" disabled>
    <sl-tag>
      <sl-format-text truncate="middle" text="Normal text"></sl-format-text>
    </sl-tag>
  </sl-tooltip>

  <sl-tooltip content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." disabled>
    <sl-tag>
      <sl-format-text truncate="middle" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></sl-format-text>
    </sl-tag>
  </sl-tooltip>
</div>

<script type="module">
  await Promise.all([
    customElements.whenDefined('sl-tooltip'),
    customElements.whenDefined('sl-tag'),
    customElements.whenDefined('sl-format-text')
  ]);

  const tooltips = Array.from(document.querySelectorAll("sl-tooltip"));

  for (const tooltip of tooltips) {
    const tag = tooltip.querySelector("sl-tag");
    const content = tag?.querySelector("sl-format-text");

    if (!content) continue;

    tooltip.disabled = content.maxLength > content.text.length;
  };
</script>

Prefix & Suffix icons

Use the prefix and suffix slot to add icons.

It is recommended to not use a suffix when remove button is included.
It is recommended to not use both prefix and suffix in one tag.

Settings

<div style="display: flex; flex-direction: column; gap: 20px;">
  <div class="tag-row">
    <sl-tag size="small">
      <sl-icon slot="prefix" name="gear"></sl-icon>
      Settings
    </sl-tag>

    <sl-tag size="small">
      <sl-icon slot="suffix" name="gear"></sl-icon>
      Settings
    </sl-tag>

    <sl-tag size="small" removable>
      <sl-icon slot="prefix" name="gear"></sl-icon>
      Settings
    </sl-tag>
  </div>
  <div class="tag-row">
    <sl-tag size="medium">
      <sl-icon slot="prefix" name="gear"></sl-icon>
      Settings
    </sl-tag>

    <sl-tag size="medium">
      <sl-icon slot="suffix" name="gear"></sl-icon>
      Settings
    </sl-tag>

    <sl-tag size="medium" removable>
      <sl-icon slot="prefix" name="gear"></sl-icon>
      Settings
    </sl-tag>
  </div>
  <div class="tag-row">
    <sl-tag size="large">
      <sl-icon slot="prefix" name="gear"></sl-icon>
      Settings
    </sl-tag>

    <sl-tag size="large">
      <sl-icon slot="suffix" name="gear"></sl-icon>
      Settings
    </sl-tag>

    <sl-tag size="large" removable>
      <sl-icon slot="prefix" name="gear"></sl-icon>
      Settings
    </sl-tag>
  </div>
</div>

<style>
  .tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }
</style>

Slots

Name	Description
(default)	The tag’s content.
`prefix`	A presentational prefix or similar element.
`suffix`	A presentational suffix or similar element.

Learn more about using slots.

Properties

Name	Description	Type	Default
`variant`	The tag’s theme variant.	`"blue" \| "navy" \| "purple" \| "green" \| "orange" \| "red" \| "grey"`	`'grey'`
`appearance`	The tag’s appearance style.	`'soft' \| 'solid'`	`'soft'`
`size`	The tag’s size.	`'small' \| 'medium' \| 'large'`	`'medium'`
`pill`	Draws a pill-style tag with rounded edges.	`boolean`	`false`
`removable`	Makes the tag removable and shows a remove button.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`sl-remove`		Emitted when the remove button is activated.	-

Learn more about events.

Parts

Name	Description
`base`	The component’s base wrapper.
`content`	The tag’s content.
`prefix`	The container that wraps the prefix.
`suffix`	The container that wraps the suffix.
`remove-button`	The tag’s remove button, an `<sl-icon-button>`.
`remove-button__base`	The remove button’s exported `base` part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>
<sl-icon-button>

Migration

Examples

Appearance

Sizes

Removable

Truncation

End

Middle

Auto middle truncation

With tooltip

Dynamically show tooltip

End truncation

Middle truncation

Prefix & Suffix icons

Slots

Properties

Events

Parts

Dependencies