Chip

Skip to page content

BETA

Component demo

Interactive example

Americano

Cappuccino

Web component

React

<ic-chiplabel="Americano"dismissible="true"id='my-chip'>
<svg
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-chip>
<ic-chiplabel="Cappuccino">
<svg
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-chip>

<IcChiplabel="Americano"dismissibleonIcDismiss={(ev)=>console.log(ev)}>
<SlottedSVG
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</SlottedSVG>
</IcChip>
<IcChiplabel="Cappuccino">
<SlottedSVG
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</SlottedSVG>
</IcChip>

Chip details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The text rendered within the chip. Required type: string
Property customColor Attribute custom-color	The custom chip colour. This will override the theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)". type: IcColor - `#${string}` \| `rgb(${string})` \| `rgba(${string})`	null
Property disabled Attribute disabled	If`true` , the chip will appear disabled. type: boolean	false
Property dismissible Attribute dismissible	If`true` , the chip will have a close button at the end to dismiss it. type: boolean	false
Property size Attribute size	The size of the chip. type: IcSizes - "large" \| "medium" \| "small"	"medium"
Property theme Attribute theme	Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. Setting the "customColor" prop will override this. type: "dark" \| "light" \| "inherit" - "dark" \| "inherit" \| "light"	"inherit"
Property transparentBackground Attribute transparent-background	If`true` , the outlined variant of chip will have a transparent background rather than the theme defined color. type: boolean	true
Property variant Attribute variant	The emphasis of the chip. type: IcEmphasisType - "filled" \| "outlined"	"filled"

Property

label

Attribute

label

The text rendered within the chip.

Required

type: string

Property

customColor

Attribute

custom-color

The custom chip colour. This will override the theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".

type: IcColor - `#${string}` | `rgb(${string})` | `rgba(${string})`

Default: null

Property

disabled

Attribute

disabled

Iftrue , the chip will appear disabled.

type: boolean

Default: false

Property

dismissible

Attribute

dismissible

Iftrue , the chip will have a close button at the end to dismiss it.

type: boolean

Default: false

Property

size

Attribute

size

The size of the chip.

type: IcSizes - "large" | "medium" | "small"

Default: "medium"

Property

theme

Attribute

theme

Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. Setting the "customColor" prop will override this.

type: "dark" | "light" | "inherit" - "dark" | "inherit" | "light"

Default: "inherit"

Property

transparentBackground

Attribute

transparent-background

Iftrue , the outlined variant of chip will have a transparent background rather than the theme defined color.

type: boolean

Default: true

Property

variant

Attribute

variant

The emphasis of the chip.

type: IcEmphasisType - "filled" | "outlined"

Default: "filled"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot badge	Badge component overlaying the top right of the chip.
Slot icon	Content will be rendered at the start of the chip.

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icDismiss React onIcDismiss	Is emitted when the user dismisses the chip.	void

Web component

icDismiss

React

onIcDismiss

Is emitted when the user dismisses the chip.

void

Methods

Name	Description	Signature
Method setFocus	Sets focus on the chip.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the chip.

setFocus() => Promise<void>

Variants

Outline

Interactive example

Americano

Web component

React

<ic-chiplabel="Americano"variant="outlined">
<svg
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
</svg>
</ic-chip>

<IcChiplabel="Americano"variant="outlined">
<SlottedSVG
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
</SlottedSVG>
</IcChip>

Dismissible

Interactive example

Americano

Web component

React

<ic-chiplabel="Americano"dismissible="true"id='my-chip'>
<svg
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-chip>
<script>
  const chip = document.querySelector('#my-chip');
  chip.addEventListener('icDismiss', (ev) => console.log(ev));
</script>

<IcChiplabel="Americano"dismissibleonIcDismiss={(ev)=>console.log(ev)}>
<SlottedSVG
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</SlottedSVG>
</IcChip>

Disabled

Interactive example

Americano

Web component

React

<ic-chiplabel="Americano"dismissible="true"disabled="true">
<svg
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-chip>
<ic-chiplabel="Americano"variant="outlined"dismissible="true"disabled="true">
<svg
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
</svg>
</ic-chip>

<IcChiplabel="Americano"dismissibledisabled>
<SlottedSVG
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</SlottedSVG>
</IcChip>
<IcChiplabel="Americano"variant="outlined"dismissibledisabled>
<SlottedSVG
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
</SlottedSVG>
</IcChip>

Theme

Interactive example

Americano

Cappuccino

Web component

React

<ic-chiplabel="Americano"dismissible="true"id='my-chip'theme="dark">
<svg
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-chip>
<ic-chiplabel="Cappuccino">
<svg
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-chip>

<IcChiplabel="Americano"dismissibletheme="dark">
<SlottedSVG
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</SlottedSVG>
</IcChip>
<IcChiplabel="Cappuccino">
<SlottedSVG
slot="icon"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="coffee"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</SlottedSVG>
</IcChip>

Last reviewed 31 May 2024 .