Chip

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

Props

Name	Type	Description	Default
label	`string`	Text to be placed on the chip.	-
prefixIcon	`string \| (React.ReactNode & React.SVGProps <SVGSVGElement>)`	Material Symbol name or SVG element as the icon that will be placed before the chip label. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with `"filled_"`.	-
suffixIcon	`string \| (React.ReactNode & React.SVGProps <SVGSVGElement>)`	Material Symbol name or SVG element as the icon that will be placed after the chip label. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with `"filled_"`.	-
onClickPrefix	`() => void`	If defined, the prefix icon will be considered a button element. This function will be called when it is clicked.	-
onClickSuffix	`() => void`	If defined, the suffix icon will be considered a button element. This function will be called when it is clicked.	-
disabled	`boolean`	If true, the component will be disabled.	`false`
margin	`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| Margin`	Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.	-
tabIndex	`number`	Value of the `tabindex` attribute applied to both the component and the prefix and suffix icons when a function is given.	`0`

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("Delete.");
  };
  const onClickPrefix = () => {
    console.log("Favorite.");
  };
  return (
    <DxcInset space="2rem">
      <DxcFlex gap="1rem">
        <DxcChip label="Home" suffixIcon={icon} onClickSuffix={onClickSuffix} />
        <DxcChip label="Home" prefixIcon="favorite" onClickPrefix={onClickPrefix} />
      </DxcFlex>
    </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("Delete.");
  };
  const onClickPrefix = () => {
    console.log("Favorite.");
  };
  return (
    <DxcInset space="2rem">
      <DxcFlex gap="1rem">
        <DxcChip label="Home" suffixIcon={icon} onClickSuffix={onClickSuffix} />
        <DxcChip label="Home" prefixIcon="favorite" onClickPrefix={onClickPrefix} />
      </DxcFlex>
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- Icons

Edit this page on GitHub

Report an issue on GitHub

Checkbox

NextContainer

Chip

Props

Examples

Basic usage

Icons

Contents