Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Chip

Guidance Code Accessibility

Component demo

Interactive example

Web component React
StackBlitz
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>

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})` | undefined
Property disabled
Attribute disabled

Iftrue , the chip will appear disabled.

type: boolean - boolean | undefined
false
Property dismissLabel
Attribute dismiss-label

The text in the dismiss button tooltip and aria label.

type: string - string | undefined
"Dismiss"
Property dismissible
Attribute dismissible

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

type: boolean - boolean | undefined
false
Property size
Attribute size

The size of the chip.

type: IcSizes - "large" | "medium" | "small" | undefined
"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" | undefined
"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 - boolean | undefined
true
Property variant
Attribute variant

The emphasis of the chip.

type: IcEmphasisType - "filled" | "outlined" | undefined
"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})` | undefined
Property disabled
Attribute disabled

Iftrue , the chip will appear disabled.

type: boolean - boolean | undefined
Default: false
Property dismissLabel
Attribute dismiss-label

The text in the dismiss button tooltip and aria label.

type: string - string | undefined
Default: "Dismiss"
Property dismissible
Attribute dismissible

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

type: boolean - boolean | undefined
Default: false
Property size
Attribute size

The size of the chip.

type: IcSizes - "large" | "medium" | "small" | undefined
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" | undefined
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 - boolean | undefined
Default: true
Property variant
Attribute variant

The emphasis of the chip.

type: IcEmphasisType - "filled" | "outlined" | undefined
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.

Read more about slots .


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

Web component React
StackBlitz
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>

Dismissible

Interactive example

Web component React
StackBlitz
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>

Disabled

Interactive example

Web component React
StackBlitz
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>

Update colour

Interactive example

Update to Pink Update to Blue
Web component React
StackBlitz
Show full code 
<ic-chipLabel="Americano"custom-color="#F8C8DC">
<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-button
variant="primary"
id="default-btn"
onClick="document.querySelector('ic-chip').customColor='#F8C8DC'"
>
  Update to Pink
</ic-button>
<ic-button
variant="primary"
id="custom-btn"
onClick="document.querySelector('ic-chip').customColor='#00008B'"
>
  Update to Blue
</ic-button>

Theme

Interactive example

Web component React
StackBlitz
Show full code 
<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>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Chip - Intelligence Community Design System