Components

Tag

<wa-tag> Since 2.0 Stable

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

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

Examples

Appearance

Use the size attribute to change a tag's visual appearance. The default appearance is outlined filled.

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

Sizes

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

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

Pill

Use the pill attribute to give tabs rounded edges.

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

Removable

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

Small Medium Large 
<div class="tags-removable">
  <wa-tag size="small" removable>Small</wa-tag>
  <wa-tag size="medium" removable>Medium</wa-tag>
  <wa-tag size="large" removable>Large</wa-tag>
</div>

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

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

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

Slots

Learn more about using slots.

Name Description
(default) The tag's content.

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
variant
variant
The tag's theme variant. Defaults to neutral if not within another element with a variant.
Type  'brand' | 'neutral' | 'success' | 'warning' | 'danger' | 'inherit'
Default 'inherit'
appearance
appearance
The tag's visual appearance.
Type 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled'
Default 'outlined filled'
size
size
The tag's size.
Type 'small' | 'medium' | 'large' | 'inherit'
Default 'inherit'
pill
pill
Draws a pill-style tag with rounded edges.
Type boolean
Default false
removable
removable
Makes the tag removable and shows a remove button.
Type boolean
Default false

Events

Learn more about events.

Name Description
wa-remove Emitted when the remove button is activated.

CSS parts

Learn more about CSS parts.

Name Description
base The component's base wrapper.
content The tag's content.
remove-button The tag's remove button, an <wa-icon-button>.
remove-button__base The remove button's exported base part.

Dependencies

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

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/tag/tag.js';
Coming soon! Coming soon!
    No results