Chip

Browser support

Detected engine:

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

By default, all the parameters are optional or can be set in different, except for the ones marked as required

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`	`boolean`	Blocks the interaction with the component.
`readonly`	`boolean`	Transforms the chip into an output.

The events emitted from the component are:

Name	Payload	Description
`click`	`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`	Content of the chip.

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.