Skip to content

Tag - CSS Component

The Tag component can be used imported from:

Playground

Construction

The CSS component uses a <div> tag with the z-tag HTML custom attribute.

z-tag

The z-tag parameter is the main parameter used to render the tag component. Check the tag styling list here. Being omitted the style modifier, the tag will use the default style with Azure background color.

Tag label

Other styling options are teal, moss, lilac, candy, peach, mint, lime, lemon and powder-pink.

Tag label
Tag label
Tag label
Tag label
Tag label
Tag label
Tag label
Tag label
Tag label

Icon

We can add icons using the icon attribute with a proper icon value

Tag label
Tag label

With the icon-right flag we can reposition the icon:

Tag label
Tag label

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example