Home
Tag
Tag component for displaying labels or values with optional dismiss functionality.
Usage
<wc-tag>Gray</wc-tag>
<wc-tag color="blue">Blue</wc-tag>
<wc-tag color="red">Red</wc-tag>
<wc-tag color="green">
<wc-icon name="home" slot="icon"></wc-icon>
Green
</wc-tag>
<wc-tag color="yellow" dismissible="true">Yellow</wc-tag>
Variants
Fancy larger or smaller tag? Add size attribute for additional sizes.
<wc-tag variant="filled" color="blue"><wc-icon name="home" slot="icon"></wc-icon> Filled</wc-tag>
<wc-tag variant="tonal" color="blue"><wc-icon name="home" slot="icon"></wc-icon> Tonal</wc-tag>
<wc-tag variant="elevated" color="blue"><wc-icon name="home" slot="icon"></wc-icon> Elevated</wc-tag>
<wc-tag variant="outlined" color="blue"><wc-icon name="home" slot="icon"></wc-icon> Outlined</wc-tag>
Sizes
Fancy larger or smaller tag? Add size attribute for additional sizes.
<wc-tag size="sm"><wc-icon name="home" slot="icon"></wc-icon> Small</wc-tag>
<wc-tag><wc-icon name="home" slot="icon"></wc-icon> Medium</wc-tag>
On this page
Usage Variants Sizes