Tag - Web Component ​

...

Browser support ​

Parameters ​

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

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

NameTypeDescription
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
(optional)		stringDefines the text for the tag.

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
html
<link rel="stylesheet" href="/0.4.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.2/@zurich/web-components/tag.js"></script>
Code
html
<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>