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.

Primary Secondary Success Neutral Warning Danger 
<sl-tag variant="primary">Primary</sl-tag>
<sl-tag variant="secondary">Secondary</sl-tag>
<sl-tag variant="success">Success</sl-tag>
<sl-tag variant="neutral">Neutral</sl-tag>
<sl-tag variant="warning">Warning</sl-tag>
<sl-tag variant="danger">Danger</sl-tag>

Examples

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 
<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>
</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>

Prefix icons

Use the prefix slot to add icons.

Settings 
<sl-tag>
  <sl-icon slot="prefix" name="gear"></sl-icon>
  Settings
</sl-tag>

Slots

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

Learn more about using slots.

Properties

Name Description Reflects Type Default
variant The tag’s theme variant. 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' 'neutral'
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.
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>