Tag
<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>
Examples Jump to heading
Appearance Jump to heading
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 Jump to heading
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>
Pill Jump to heading
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>
Removable Jump to heading
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>
Slots Jump to heading
Learn more about using slots.
Name | Description |
---|---|
(default) | The tag's content. |
Attributes & Properties Jump to heading
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 Jump to heading
Learn more about events.
Name | Description |
---|---|
wa-remove |
Emitted when the remove button is activated. |
CSS parts Jump to heading
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 Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
Importing Jump to heading
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.12/dist/components/tag/tag.js';