Tag

<wa-tag>

Stable

Since 2.0

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

<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

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>
</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/[email protected]/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'`
`css`	One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended. Type `CSSResultGroup \| undefined` Default `[styles, variantStyles, sizeStyles]`
`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'` 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

Getting Started

Resources

Theming & Utilities

Components

Data Visualization Pro Data Visualization components require access to Web Awesome Pro

Form Controls

Utility Components

Legal Stuff

Web Awesome

Tag

Examples

Appearance

Sizes

Pill

Removable

Importing

Slots

Attributes & Properties

Events

CSS parts

Dependencies

Getting Started

Resources

Theming & Utilities

Components

Data Visualization Pro Data Visualization components require access to Web Awesome Pro

Form Controls

Utility Components

Legal Stuff

Web Awesome

Web Awesome Elsewhere

Tag

Examples

Appearance

Sizes

Pill

Removable

Importing

Slots

Attributes & Properties

Events

CSS parts

Dependencies