Chip

Browser support

Detected engine:

The Web component uses the <z-chip> tag:

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

Name	Type	Description	Slot
`content`	`string`	The text to be displayed in the chip.	`default`
`disabled` (optional)	`boolean`	Blocks the interaction with the component.
`readonly` (optional)	`boolean`	Transforms the chip into an output.

The events emitted from the component are:

Name	Payload	Description
`onclick`	`MouseEvent`	The `z-chip` receives a `click` event that can be used to trigger some action when the chip is clicked.

The available slots for the component are:

Name	Tags	Description
`default`	`span`

The attribute disabled will block the interaction with the component

Disabled chip

The attribute readonly will make the component to behave as a readonly component.

Readonly chip

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

Custom chip

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

Custom chip

Imports

html

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

Code

html

<z-chip>Chip</z-chip>
<z-chip disabled>Disabled chip</z-chip>
<z-chip readonly>Readonly chip</z-chip>