Open Source

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 and its necessary CSS, like so:

import { IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

The simplest way to start using the IgrChip is as follows:

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

Slots

With the exposed component slots, you can add custom content to different parts of the IgrChip. The component provides default select and remove icons, but you can customize them using the select and remove slots. You can also add additional content before or after the main content using the start and end slots.

We recommend using a <span> element when adding simple text, symbols, or emojis, and an <igc-icon> component when adding icons to the remove, select, start, and end slots.

<IgrChip selectable={true} removable={true}>
    <IgrIcon slot="select" name="verified-account"></IgrIcon>
    <IgrIcon slot="start" name="brush"></IgrIcon>
    <span>Chip</span>
    <IgrIcon slot="end" name="blood"></IgrIcon>
    <IgrIcon slot="remove" name="pacifier"></IgrIcon>
</IgrChip>

Size

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

<IgrChip className="size-small" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>
<IgrChip className="size-medium" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>
<IgrChip className="size-large" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>

.size-small {
  --ig-size: var(--ig-size-small);
}

.size-medium {
  --ig-size: var(--ig-size-medium);
}

.size-large {
  --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);
}