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

    Prefix / Suffix

    With the Prefix and Suffix parts of the IgcChipComponent 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 IgcSelectComponent and Remove slots. You can add additional content before or after the main content, using the Start and End slots.

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

    Size

    We allow the user to choose the size of the IgcChipComponent 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 IgcChipComponent 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