React Chip Overview

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

    React Chip Example


    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';

    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>



    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>


    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.


    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">
    <IgrChip size="medium" selectable="true" removable="true">
    <IgrChip size="large" selectable="true" removable="true">
    igc-chip {
        --ig-size: var(--ig-size-large);


    The chip component exposes a Base, Prefix, Sufix parts and several slots that can be used to change all of its style properties.

    igc-chip::part(base) {
        background: #011627;
        color: #ECAA53;
    igc-chip::part(suffix) {
        color: #B7B6C2;

    API References

    Additional Resources