Tag

Tag component for displaying labels or values with optional dismiss functionality.

Usage

Gray

Blue

Red

Green

Yellow


  <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.

Filled

Tonal

Elevated

Outlined


  <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.

Small

Medium


  <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>