Tag - Web Component

...

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-tag> tag:

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description	Slot
fill (optional)	string	Defines the color for the tag. The default value is azure or default. The possible values are: teal, moss, lilac, candy, peach, mint,lime, lemon, powder-pink
content	string	Defines the text for the tag.	default

The available slots for the component are:

Name	Tags	Description
default	span

fill

The fill parameter is used to define the color of the tag. Being omitted the default value is azure.

The possible values are: teal, moss, lilac, candy, peach, mint,lime, lemon, powder-pink

Tag labelTag labelTag labelTag labelTag labelTag labelTag labelTag labelTag labelTag label

Both the background color and the text color can be customized using the --z-tag--bg and --z-tag--color CSS custom properties, respectively.

Custom tag

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.3/@zurich/web-components/tag.js"></script>

Code

<z-tag>Tag label</z-tag>
<z-tag fill="teal">Tag label</z-tag>
<z-tag fill="moss">Tag label</z-tag>
<z-tag fill="lilac">Tag label</z-tag>
<z-tag fill="peach">Tag label</z-tag>