Chip

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

Props

Name	Default	Description
label: string		Text to be placed on the chip.
prefixIcon: node \| string		Element used as icon, placed before the chip label. Note that if the passed value is an URL (string), the color styling tokens will not be applied to the image. For the icon to display correctly, an SVG must be provided to the prop inheriting the component's styles.
suffixIcon: node \| string		Element used as icon, placed after the chip label. Note that if the passed value is an URL (string), the color styling tokens will not be applied to the image. For the icon to display correctly, an SVG must be provided to the prop inheriting the component's styles.
onClickPrefix: function		If defined, the prefix icon will be considered a button element. This function will be called when it is clicked.
onClickSuffix: function		If defined, the suffix icon will be considered a button element. This function will be called when it 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
      xmlns="http://www.w3.org/2000/svg"
      height="48"
      viewBox="0 -960 960 960"
      width="48"
      fill="currentColor"
    >
      <path d="m330-288 150-150 150 150 42-42-150-150 150-150-42-42-150 150-150-150-42 42 150 150-150 150 42 42ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z" />
    </svg>
  );
  const onClickSuffix = () => {
    console.log("Copied.");
  };

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

() => {
  const icon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="48"
      viewBox="0 -960 960 960"
      width="48"
      fill="currentColor"
    >
      <path d="m330-288 150-150 150 150 42-42-150-150 150-150-42-42-150 150-150-150-42 42 150 150-150 150 42 42ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z" />
    </svg>
  );
  const onClickSuffix = () => {
    console.log("Copied.");
  };

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

Props
Examples
- Basic usage
- Icons

Edit this page on GitHub

Report an issue on GitHub

Checkbox

NextDate Input

Chip

Props

Examples

Basic usage

Icons

Contents