Tag - CSS Component
Playground
Customization
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
Both background and text color can be customized using the --z-tag--bg and --z-tag--color CSS custom properties respectively.
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