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

    EXAMPLE
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

    npm install igniteui-webcomponents
    cmd

    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);
    ts

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

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

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

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

    <igc-chip removable></igc-chip>
    html
    Ignite UI for Web Components | CTA Banner

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

    EXAMPLE
    TS
    HTML
    CSS

    Disabled

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

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

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

    EXAMPLE
    TS
    HTML
    CSS

    Size

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

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

    EXAMPLE
    TS
    HTML
    ChipSize.css
    index.css

    Styling

    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;
    }
    css

    EXAMPLE
    TS
    HTML
    ChipStyle.css
    index.css

    API References

    Additional Resources