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="gray" 
  hasCancelIcon={true} 
  hasCheckIcon={true}>
  Chip
</DhlChip>

Chip

Properties

Property	Attribute	Description	Type	Default
`clickEvent`	--	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`
`label`	`label`	An optional prop to set component lable.	`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`
`showCancelIcon`	`show-cancel-icon`	An optional boolean to show cancel icon.	`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.	`ColorVariants.gray \\| ColorVariants.red \\| ColorVariants.white`	`DHL_CHIP.VARIANT.WHITE`