<!DOCTYPE html><html><head><title>Default Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-chipselectableremovable>
Chip
</igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */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:
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-chipselectable></igc-chip>html
To display a removable chip, you can use the removable property of the chip.
<igc-chipremovable></igc-chip>html
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.
<!DOCTYPE html><html><head><title>Default Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"style="flex-direction: row; gap: 8px;"><igc-chipvariant="primary"selectableremovable>
Primary
</igc-chip><igc-chipvariant="info"selectableremovable>
Info
</igc-chip><igc-chipvariant="success"selectableremovable>
Success
</igc-chip><igc-chipvariant="warning"selectableremovable>
Warning
</igc-chip><igc-chipvariant="danger"selectableremovable>
Danger
</igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Disabled
The Ignite UI for Web Components chip can be disabled by using the disabled property.
<igc-chipdisabled></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.
<!DOCTYPE html><html><head><title>Default Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"style="flex-direction: row; gap: 8px"><igc-chipselectableremovable><spanslot="select"><igc-iconname="custom-select"></igc-icon></span>
Custom Icons
<spanslot="remove"><igc-iconname="custom-remove"></igc-icon></span></igc-chip><igc-chipremovable><spanslot="start"><igc-iconname="brush"></igc-icon></span>
Start Slot
</igc-chip><igc-chipselectable>
End Slot
<spanslot="end"><igc-iconname="brick-wall"></igc-icon></span></igc-chip><igc-chipdisabled>
Disabled Chip
<spanslot="end"><igc-iconname="dog-icon"></igc-icon></span></igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Size
We allow the user to choose the size of the IgcChipComponent by utilizing the --ig-size CSS variable:
<!DOCTYPE html><html><head><title>Default Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"style="flex-direction: row; gap: 8px; align-items: baseline;"><igc-chipclass="small"selectableremovable>
Chip
</igc-chip><igc-chipclass="medium"selectableremovable>
Chip
</igc-chip><igc-chipclass="large"selectableremovable>
Chip
</igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Styled Chip</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"style="flex-direction: row; gap: 8px;"><igc-chipselectableremovable>
Chip
</igc-chip></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html