React Chip Overview

    Ignite UI for React Chips help people enter information, make selections, filter content, or trigger actions.

    React Chip Example

    Usage

    First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

    npm install igniteui-react

    You will then need to import the IgrChip, its necessary CSS, and register its module, like so:

    import { IgrChipModule, IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrChipModule.register();

    <IgrChip></IgrChip>

    To display a selectable chip, you can use the selectable property of the chip.

    <IgrChip selectable="true"></IgrChip>

    To display a removable chip, you can use the removable property of the chip.

    <IgrChip removable="true"></IgrChip>

    Examples

    Variants

    The Ignite UI for React chip supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - Primary, Info, Success, Warning, or Danger to the variant property.

    <IgrChip variant="success"></IgrChip>

    Disabled

    The Ignite UI for React chip can be disabled by using the disabled property.

    <IgrChip disabled="true"></IgrChip>

    Prefix / Suffix

    With the Prefix and Suffix parts of the IgrChip component and their slots, we can add different content before and after the main content of the chip. We provide default select and remove icons but you can customize them using the IgrSelect and Remove slots. You can add additional content before or after the main content, using the Start and End slots.

    Size

    We allow the user to choose the size of the IgrChip by utilizing the --ig-size CSS variable:

    <IgrChip size="small" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="medium" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="large" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>

    igc-chip {
  --ig-size: var(--ig-size-large);
}

    Styling

    The IgrChip component exposes a base, prefix, suffix CSS parts that can be used to change all of its style properties.

    igc-chip::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-chip::part(suffix) {
  color: var(--ig-gray-400);
}

    API References

    Additional Resources