DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Chip

A chip is a compact, interactive UI element used to represent small pieces of information, actions, or selections.

Overview
Code

Props

NameTypeDescriptionDefault
disabledbooleanIf true, the component will be disabled.false
labelstringText to be placed on the chip.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize 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.-
onClickPrefix() => voidIf defined, the prefix icon will be considered a button element. This function will be called when it is clicked.-
onClickSuffix() => voidIf defined, the suffix icon will be considered a button element. This function will be called when it is clicked.-
prefixIconstring | (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_".-
suffixIconstring | (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_".-
tabIndexnumberValue 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="var(--spacing-padding-xl)">
      <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="var(--spacing-padding-xl)">
      <DxcFlex gap="var(--spacing-gap-ml)">
        <DxcChip label="Home" suffixIcon={icon} onClickSuffix={onClickSuffix} />
        <DxcChip label="Home" prefixIcon="favorite" onClickPrefix={onClickPrefix} />
      </DxcFlex>
    </DxcInset>
  );
}
On this page