Chip - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses a <button> or <output> tag with the z-chip HTML custom attribute.

z-chip ​

The z-chip attribute is the main attribute used to implement the styling to the chip component.

Both background and text color can be customized using the --z-chip--bg and --z-chip--color CSS custom properties respectively.

Also, the hover state can be customized using the --z-chip--bg--hover and --z-chip--color--hover CSS custom properties.

disabled ​

The attribute disabled will block the interaction with the component.

INFO

If the z-chip attribute it's set to an <output> tag, the component will behave as a readonly component.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/Chip.css" />
Code
html
<button z-chip>Chip</button>
<button z-chip disabled>Disabled chip</button>
<output z-chip>Readonly chip</output>