Chip

The Chip component allows the user to select a value from a defined range. Either by using continuous Chip, stepped Chip or buffered Chip.

// with @dhl-official/react-library:
import { DhlChip } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlChip } from "@dhl-official/ui-libraries/react-library"

If the DUIL has been installed, you can use the web component directly:

<dhl-chip></dhl-chip>

// with @dhl-official/vue-library:
import { DhlChip } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlChip } from "@dhl-official/ui-libraries/vue-library"

<DhlChip />

<dhl-chip />

<dhl-chip />

<DhlChip variant="selected-neutral" label="Chip" showCloseButton isSelected></DhlChip>

Properties

Property	Attribute	Description	Type	Default
`clickEvent`	`click-event`	An optional onClick callback handler.	`(e: any) => void`	`undefined`
`dataTestid`	`data-testid`	An optional prop. The test id attached to the component as a data-testid attribute.	`string`	`undefined`
`isDisabled`	`is-disabled`	An optional flag to define if the component is disabled.	`boolean`	`false`
`isSelected`	`is-selected`	An optional boolean to define if component is selected.	`boolean`	`false`
`keyDownEvent`	`key-down-event`	An optional onKeyDown callback handler.	`(event: KeyboardEvent) => void`	`undefined`
`label`	`label`	An optional prop to set component label.	`string`	`undefined`
`leftAssetSrc`	`left-asset-src`	An optional prop to define left asset src.	`string`	`undefined`
`leftAssetType`	`left-asset-type`	An optional prop to define left asset type.	`"icon" \| "image"`	`DHL_CHIP.LEFT_ASSET_TYPE.ICON`
`showCloseButton`	`show-close-button`	An optional boolean to show the close button.	`boolean`	`true`
`showLeftAsset`	`show-left-asset`	An optional boolean prop to show left asset.	`boolean`	`true`
`size`	`size`	An optional size prop for the component.	`"md" \| "sm"`	`DHL_CHIP.SIZE.MD`
`variant`	`variant`	An optional prop to select a component color variant.	`"selected-neutral" \| "selected-positive" \| "white"`	`DHL_CHIP.VARIANT.WHITE`