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 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
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 with-remove attribute to add a remove button to the tag.
<div class="tags-removable"> <wa-tag size="small" with-remove>Small</wa-tag> <wa-tag size="medium" with-remove>Medium</wa-tag> <wa-tag size="large" with-remove>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
Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/tag/tag.js';
To manually import this component from React, use the following code.
import WaTag from '@awesome.me/webawesome/dist/react/tag';
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 | |
|---|---|---|---|
appearanceappearance |
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 | undefinedDefault
[styles, variantStyles, sizeStyles] |
||
customStates |
Methods for setting and checking custom states.
Type
objectDefault
{ /** Adds or removes the specified custom state. / set: (customState: string, active: boolean) => { if (!Boolean(this.internals?.states)) return; try { if (active) { this.internals.states.add(customState); } else { this.internals.states.delete(customState); } } catch (e) { if (String(e).includes("must start with '--'")) { / eslint-disable-next-line / console.error('Your browser implements an outdated version of CustomStateSet. Consider using a polyfill'); } else { throw e; } } }, /* Determines whether or not the element currently has the specified state. */ has: (customState: string) => { if (!Boolean(this.internals?.states)) return false; try { return this.internals.states.has(customState); } catch { return false; } }, } |
||
pillpill |
Draws a pill-style tag with rounded edges.
Type
booleanDefault
false |
|
|
sizesize |
The tag's size.
Type
'small' | 'medium' | 'large'Default
'medium' |
|
|
variantvariant |
The tag's theme variant. Defaults to
neutral if not within another element with a variant.Type
'brand' | 'neutral' | 'success' | 'warning' | 'danger'Default
'neutral' |
|
|
withRemovewith-remove |
Makes the tag removable and shows a remove button.
Type
booleanDefault
false |
Methods
Jump to heading
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
relayNativeEvent() |
Given a native event, this function cancels it and dispatches it again from the host element using the desired event options. |
event: Event,
eventOptions: EventInit
|
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 | 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
Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.