Tag

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

Usage

Gray Blue Red Green Yellow

  <base-tag>Gray</base-tag>
  <base-tag color="blue">Blue</base-tag>
  <base-tag color="red">Red</base-tag>
  <base-tag color="green">
    <base-icon name="home" slot="icon"></base-icon>
    Green
  </base-tag>
  <base-tag color="yellow" dismissible="true">Yellow</base-tag>

Variants

Fancy larger or smaller tag? Add size attribute for additional sizes.

Filled Tonal Elevated Outlined

  <base-tag variant="filled" color="blue"><base-icon name="home" slot="icon"></base-icon> Filled</base-tag>
  <base-tag variant="tonal" color="blue"><base-icon name="home" slot="icon"></base-icon> Tonal</base-tag>
  <base-tag variant="elevated" color="blue"><base-icon name="home" slot="icon"></base-icon> Elevated</base-tag>
  <base-tag variant="outlined" color="blue"><base-icon name="home" slot="icon"></base-icon> Outlined</base-tag>

Sizes

Fancy larger or smaller tag? Add size attribute for additional sizes.

Small Medium

  <base-tag size="sm"><base-icon name="home" slot="icon"></base-icon> Small</base-tag>
  <base-tag><base-icon name="home" slot="icon"></base-icon> Medium</base-tag>

On this page

UsageVariantsSizes

Properties

Events

Methods

CSS Custom Properties