Tag

<wa-tag>

Stable

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

Brand
Success
Neutral
Warning
Danger
Info

                  
                

<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>
<wa-tag variant="info">Info</wa-tag>

Examples

Link to This Section

Appearance

Link to This Section

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

Accent Filled-Outlined Filled Outlined

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

  <p>
    <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
    <wa-tag variant="neutral" appearance="filled-outlined">Filled-Outlined</wa-tag>
    <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
    <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
  </p>

  <p>
    <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
    <wa-tag variant="warning" appearance="filled-outlined">Filled-Outlined</wa-tag>
    <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
    <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
  </p>

  <p>
    <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
    <wa-tag variant="danger" appearance="filled-outlined">Filled-Outlined</wa-tag>
    <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
    <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
  </p>

  <p>
    <wa-tag variant="info" appearance="accent">Accent</wa-tag>
    <wa-tag variant="info" appearance="filled-outlined">Filled-Outlined</wa-tag>
    <wa-tag variant="info" appearance="filled">Filled</wa-tag>
    <wa-tag variant="info" appearance="outlined">Outlined</wa-tag>
  </p>
</div>

Sizes

Link to This Section

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

Extra Small
Small
Medium
Large
Extra Large

                  
                

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

Pill

Link to This Section

Use the pill attribute to give tabs rounded edges.

Extra Small
Small
Medium
Large
Extra Large

                  
                

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

Removable

Link to This Section

Use the with-remove attribute to add a remove button to the tag.

  Extra Small
  Small
  Medium
  Large
  Extra Large

                  
                

<div class="tags-removable">
  <wa-tag size="xs" with-remove>Extra Small</wa-tag>
  <wa-tag size="s" with-remove>Small</wa-tag>
  <wa-tag size="m" with-remove>Medium</wa-tag>
  <wa-tag size="l" with-remove>Large</wa-tag>
  <wa-tag size="xl" with-remove>Extra 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>

Importing

Link to This Section

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

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.17.0/components/tag/tag.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/tag/tag.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/tag/tag.js';

To import this component for React 18 or below, use the following code:

import WaTag from '@awesome.me/webawesome/dist/react/tag/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	The tag's content.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

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

Events

Link to This Section

Learn more about events.

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

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`base`	The component's base wrapper.	`::part(base)`
`content`	The tag's content.	`::part(content)`
`remove-button`	The tag's remove button, a `<wa-button>`.	`::part(remove-button)`
`remove-button__base`	The remove button's exported `base` part.	`::part(remove-button__base)`

Dependencies

Link to This Section

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

Need a hand?

Report a bug

Ask for help

Tag

Examples

Appearance

Sizes

Pill

Removable

Importing

Slots

Attributes & Properties

Events

CSS Parts

Dependencies

Quick Links

Recent Searches