Chip

Chips are elements that represent status, complementary information, or association between elements.

Code

Usage

Specifications

Props

Name	Default	Description
label: string		Text to be placed on the chip.
prefixIcon: node \| string		Element used as icon to be placed before the chip label.
suffixIcon: node \| string		Element used as icon to be placed after the chip label.
onClickPrefix: function		This function will be called when the prefix is clicked.
onClickSuffix: function		This function will be called when the suffix is clicked.
disabled: boolean	`false`	If true, the component will be disabled.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
tabIndex: number	`0`	Value of the tabindex, it also applies to prefix and suffix icons when a function is given.

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <DxcChip label="Experimental" />
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcChip label="Experimental" />
    </DxcInset>
  );
}

Icons

() => {
  const icon = (
    <svg
      x="0px"
      y="0px"
      width="24px"
      height="24px"
      viewBox="0 0 24 24"
      enableBackground="new 0 0 24 24"
      fill="currentColor"
    >
      <g id="Bounding_Box">
        <rect fill="none" width="24" height="24" />
      </g>
      <g id="Master">
        <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
      </g>
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcChip label="Home" prefixIcon={icon}/>
    </DxcInset>
  );
}

() => {
  const icon = (
    <svg
      x="0px"
      y="0px"
      width="24px"
      height="24px"
      viewBox="0 0 24 24"
      enableBackground="new 0 0 24 24"
      fill="currentColor"
    >
      <g id="Bounding_Box">
        <rect fill="none" width="24" height="24" />
      </g>
      <g id="Master">
        <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
      </g>
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcChip label="Home" prefixIcon={icon}/>
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- Icons

Edit this page on GitHub

Checkbox

NextDate Input

Chip

Props

Examples

Basic usage

Icons

Contents