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:

Name	Type	Description
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)	string	Defines 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

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