Tag - Web Component

...

Browser support

Parameters

The Web component uses a <z-tag> tag.

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

Name	Type	Description
color (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.

Playground

Customization

HTML Examples

Imports

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

Code

<z-tag>Tag label</z-tag>
<z-tag color="teal">Tag label</z-tag>
<z-tag color="moss">Tag label</z-tag>
<z-tag color="liliac">Tag label</z-tag>
<z-tag color="peach">Tag label</z-tag>