Tag
Tag component for displaying labels or values with optional dismiss functionality.
Usage
<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.
<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.
<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