<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 tab'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>
| Name | Description |
|---|---|
| (default) | The tag's content. |
| Name | Description | Reflects | |
|---|---|---|---|
variantvariant
|
The tag's theme variant.
Type
'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'
Default
'neutral'
|
|
|
sizesize
|
The tag's size.
Type
'small' | 'medium' | 'large'
Default
'medium'
|
|
|
pillpill
|
Draws a pill-style tag with rounded edges.
Type
boolean
Default
false
|
|
|
removableremovable
|
Makes the tag removable and shows a remove button.
Type
boolean
Default
false
|
| Name | Description |
|---|---|
wa-remove |
Emitted when the remove button is activated. |
| Name | Description |
|---|---|
--background-color |
The tag's background color.
|
--border-color |
The color of the tag's border.
|
--border-radius |
The radius of the tag's corners.
|
--border-style |
The style of the tag's border.
|
--border-width |
The width of the tag's border.
|
--content-color |
The color of the tag's content.
|
| 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. Subdependencies, 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.4/dist/components/tag/tag.js';