Chip

Skip to page content

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<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 appearance Attribute appearance	This prop should not be used anymore. Use variant prop instead.
Property customColor Attribute custom-color	The custom chip colour. This prop will be applied to the chip component if`dismissible` is set to`false` . 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 dismissLabel Attribute dismiss-label	The text in the dismiss button tooltip and aria label. type: string	"Dismiss"
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 - "default" \| "large" \| "small"	"default"
Property transparentBackground Attribute transparent-background	If`true` , the outlined variant of chip will have a transparent background rather than white. 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

appearance

Attribute

appearance

This prop should not be used anymore. Use variant prop instead.

Property

customColor

Attribute

custom-color

The custom chip colour. This prop will be applied to the chip component ifdismissible is set tofalse . 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

dismissLabel

Attribute

dismiss-label

The text in the dismiss button tooltip and aria label.

type: string

Default: "Dismiss"

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 - "default" | "large" | "small"

Default: "default"

Property

transparentBackground

Attribute

transparent-background

Iftrue , the outlined variant of chip will have a transparent background rather than white.

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 dismiss React onDismiss	This event should not be used anymore. Use icDismiss instead.	void
Web component icDismiss React onIcDismiss	Is emitted when the user dismisses the chip.	void

Web component

dismiss

React

onDismiss

This event should not be used anymore. Use icDismiss instead.

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

Web component

React

Show full code

<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

Web component

React

Show full code

<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

Web component

React

Show full code

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

Last reviewed 31 May 2024 .