Web Components Chip Overview

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

Web Components Chip Example

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents

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

import { defineComponents, IgcChipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcChipComponent);

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

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

<igc-chip></igc-chip>

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

<igc-chip selectable></igc-chip>

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

<igc-chip removable></igc-chip>

Examples

Variants

The Ignite UI for Web Components 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.

<igc-chip variant="success"></igc-chip>

Disabled

The Ignite UI for Web Components chip can be disabled by using the Disabled property.

<igc-chip disabled></igc-chip>

Slots

With the exposed component slots, you can add custom content to different parts of the Chip. 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.

<igc-chip selectable removable>
    <igc-icon slot="select" name="verified-account"></igc-icon>
    <igc-icon slot="start" name="brush"></igc-icon>
    Chip
    <igc-icon slot="end" name="blood"></igc-icon>
    <igc-icon slot="remove" name="pacifier"></igc-icon>
</igc-chip>

Size

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

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

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub