Chip

Chips are compact elements that represent an input, attribute, or action.

Idle

Label

Hover

Label

Hover remove

Label

Press

Label

Disabled

Label

Basic usage

import { Chip } from '@streamelements/frontend-ui';
...
<Chip.Root isDraggable>
  Label
  <Chip.Remove onClick={removeFromList} />
</Chip.Root>
...

Label

The Chip component exposes the following props for style changes:

Name	Type	Default value	Description
`asChild`	`boolean`	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
`isDraggable`	`boolean`	–	Renders an icon at the start of the chip. Drag implementation is up to the consumer to implement.
`isClickable`	`boolean`	–	Changes the cursor when hovering over the whole component to be pointer
`css`	`CSS`	–	Override styles
`disabled`	`boolean`	`false`	Disables interaction with the chip. Passed down to the remove button as well.

Name	Type	Default value	Description
`disabled`	`boolean`	`false`	Disables interaction with the button
`css`	`CSS`	–	Override styles