Chip

...

Browser support

...

Parameters

The CSS component uses a <button> tag. Setting to default the parameter z-chip will render the Chip component.

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

Name	Type	Description
z-chip	string	Setting this parameter to default will inject render the chip component.
content	string	The text to be displayed in the chip.
disabled	boolean	Blocks the interaction with the component.
readonly	boolean	Transforms the chip into an output.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Chip.css" />

Code

<button z-chip>Chip</button>
<button z-chip disabled>Disabled chip</button>
<output z-chip>Readonly chip</output>