<wa-tag>
Tags are used as labels to organize things or to indicate a selection.
<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>
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>
Use the size
attribute to change a tag's size.
<wa-tag size="small">Small</wa-tag> <wa-tag size="medium">Medium</wa-tag> <wa-tag size="large">Large</wa-tag>
Use the pill
attribute to give tabs rounded edges.
<wa-tag size="small" pill>Small</wa-tag> <wa-tag size="medium" pill>Medium</wa-tag> <wa-tag size="large" pill>Large</wa-tag>
Use the removable
attribute to add a remove button to the tag.
<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>
Learn more about using slots.
Name | Description |
---|---|
(default) | The tag's content. |
Learn more about attributes and properties.
Name | Description | Reflects | |
---|---|---|---|
variant variant |
The tag's theme variant.
Type
'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' Default
'neutral' |
|
|
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' Default
'medium' |
|
|
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 |
Learn more about events.
Name | Description |
---|---|
wa-remove |
Emitted when the remove button is activated. |
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. |
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/components/tag/tag.js';