Expand commentComment on line R9Resolved
Halstack Design System
next

Overview

Guidelines

Foundations

Migration

Utilities

Components

Chip

A chip is a compact element used to label, filter, or represent pieces of information within an interface.

Overview
Code

Props

NameTypeDescriptionDefault
disabledbooleanIf true, the component will be disabled. When mode is "dismissible", the chip cannot be disabled.false
labelstringText to be placed on the chip. When using an avatar as prefix or when mode is "dismissible", the label is required to ensure proper accessibility.-
New
mode
"selectable" | "dismissible"Determines the visual style and functionality of the chip. Available modes are:
  • selectable: The whole chip is an interactive element that allows users to activate or clear options directly within the interface.
  • dismissible: Dismissible chip is used to represent information generated by user input within an interface.
"selectable"
New
onClick
() => voidFunction to be called when the chip is clicked or the dismiss action is triggered.-
New
prefix
| string | SVG | AvatarProps

being AvatarProps an object with the following properties:

{ color: 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'neutral' | 'warning' | 'error'; icon?: string | SVG; imgSrc?: string; profileName?: string; };
Material Symbol name or SVG element used as the icon. When using Material Symbols, replace spaces with underscores. By default, symbols are outlined; to use the filled version, prefix the symbol name with "filled_". If a string or SVG is provided, it will be rendered as an icon placed before the chip label. If an avatar props object is provided, a DxcAvatar will be displayed to the left of the label.-
New
selected
booleanIf true, the component will be selected. If undefined, the component manages its own internal state (uncontrolled mode). This property is only applicable when the mode is "selectable".-
tabIndexnumberValue of the tabindex attribute applied to the component when mode is "selectable" and clear icon when mode is "dismissible".0

Examples

Selectable

() => {
  const [selectedFilters, setSelectedFilters] = useState({
    sports: true,
    art: false,
    music: false,
    reading: false,
  });

  const filters = [
    { key: "sports", label: "Sports", icon: "fitness_center" },
    { key: "art", label: "Art", icon: "palette" },
    { key: "music", label: "Music", icon: "music_note" },
    { key: "reading", label: "Reading", icon: "menu_book" },
  ];

  const handleToggle = (key) => {
    setSelectedFilters((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" gap="var(--spacing-gap-l)">
        <DxcFlex gap="var(--spacing-gap-m)" wrap="wrap">
          {filters.map((filter) => (
            <DxcChip
              key={filter.key}
              prefix={filter.icon}
              label={filter.label}
              selected={selectedFilters[filter.key]}
              onClick={() => handleToggle(filter.key)}
            />
          ))}
        </DxcFlex>

        <ActivitiesTable selectedFilters={selectedFilters} />
      </DxcFlex>
    </DxcInset>
  );
}

Dismissible

() => {
  const [selectedOptions, setSelectedOptions] = useState([options[0], options[2]]);

  const handleDismiss = (valueToRemove) => {
    setSelectedOptions(selectedOptions.filter(opt => opt.value !== valueToRemove));
  };

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" gap="var(--spacing-gap-m)">
        <TransportSelect selectedOptions={selectedOptions} onChange={setSelectedOptions} />

        {selectedOptions.length > 0 && (
          <DxcFlex gap="var(--spacing-gap-s)" wrap="wrap">
            {selectedOptions.map((option) => (
              <DxcChip
                key={option.value}
                mode="dismissible"
                label={option.label}
                prefix={option.icon}
                onClick={() => handleDismiss(option.value)}
              />
            ))}
          </DxcFlex>
        )}
      </DxcFlex>
    </DxcInset>
  );
}
On this page