Action chip - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-action-chip
label="Summon a coffee"
onClick={()=>console.log("Coffee summoned")}>
</ic-action-chip>
<ic-action-chiplabel="See more beans"href="#"target="_blank"></ic-action-chip>

<IcActionChip
label="Summon a coffee"
onClick={()=>console.log("Coffee summoned")}
/>
<IcActionChiplabel="See more beans"href="#"target="_blank"/>

Action 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 disabled Attribute disabled	If`true` , the chip will appear disabled. type: boolean	false
Property download Attribute download	If`true` , the user can save the linked URL instead of navigating to it. type: string \| boolean - boolean \| string	false
Property form Attribute form	The <form> element to associate the chip with. type: string - string \| undefined
Property formaction Attribute formaction	The URL that processes the information submitted by the chip. It overrides the action attribute of the chip's form owner. Does nothing if there is no form owner. type: string - string \| undefined
Property formenctype Attribute formenctype	The way the submitted form data is encoded. type: string - string \| undefined
Property formmethod Attribute formmethod	The HTTP method used to submit the form. type: string - string \| undefined
Property formnovalidate Attribute formnovalidate	If`true` , the form will not be validated when submitted. type: boolean - boolean \| undefined
Property formtarget Attribute formtarget	The place to display the response from submitting the form. It overrides the target attribute of the chip's form owner. type: string - string \| undefined
Property href Attribute href	The URL that the link points to. This will render the chip as an "a" tag. type: string - string \| undefined
Property hreflang Attribute hreflang	The human language of the linked URL. type: string - string \| undefined
Property monochrome Attribute monochrome	If`true` , the button will display as monochromatic in either`light` or`dark` theme. type: boolean	false
Property referrerpolicy Attribute referrerpolicy	How much of the referrer to send when following the link. type: ReferrerPolicy - "" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url" \| undefined
Property rel Attribute rel	The relationship of the linked URL as space-separated link types. type: string - string \| undefined
Property size Attribute size	The size of the chip. type: IcSizes - "large" \| "medium" \| "small"	"medium"
Property target Attribute target	The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). type: string - string \| undefined
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. type: IcThemeMode - "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 type Attribute type	The type of the chip. type: IcButtonTypes - "button" \| "reset" \| "submit"	"button"
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

disabled

Attribute

disabled

Iftrue , the chip will appear disabled.

type: boolean

Default: false

Property

download

Attribute

download

Iftrue , the user can save the linked URL instead of navigating to it.

type: string | boolean - boolean | string

Default: false

Property

form

Attribute

form

The <form> element to associate the chip with.

type: string - string | undefined

Property

formaction

Attribute

formaction

The URL that processes the information submitted by the chip. It overrides the action attribute of the chip's form owner. Does nothing if there is no form owner.

type: string - string | undefined

Property

formenctype

Attribute

formenctype

The way the submitted form data is encoded.

type: string - string | undefined

Property

formmethod

Attribute

formmethod

The HTTP method used to submit the form.

type: string - string | undefined

Property

formnovalidate

Attribute

formnovalidate

Iftrue , the form will not be validated when submitted.

type: boolean - boolean | undefined

Property

formtarget

Attribute

formtarget

The place to display the response from submitting the form. It overrides the target attribute of the chip's form owner.

type: string - string | undefined

Property

href

Attribute

href

The URL that the link points to. This will render the chip as an "a" tag.

type: string - string | undefined

Property

hreflang

Attribute

hreflang

The human language of the linked URL.

type: string - string | undefined

Property

monochrome

Attribute

monochrome

Iftrue , the button will display as monochromatic in eitherlight ordark theme.

type: boolean

Default: false

Property

referrerpolicy

Attribute

referrerpolicy

How much of the referrer to send when following the link.

Property

rel

Attribute

rel

The relationship of the linked URL as space-separated link types.

type: string - string | undefined

Property

size

Attribute

size

The size of the chip.

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

Default: "medium"

Property

target

Attribute

target

The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).

type: string - string | undefined

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.

type: IcThemeMode - "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

type

Attribute

type

The type of the chip.

type: IcButtonTypes - "button" | "reset" | "submit"

Default: "button"

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.

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

Sizes

Interactive example

Web component

React

Show full code

<ic-action-chiplabel="Small"size="small"></ic-action-chip>
<ic-action-chiplabel="Medium"></ic-action-chip>
<ic-action-chiplabel="Large"size="large"></ic-action-chip>

<IcActionChiplabel="Small"size="small"/>
<IcActionChiplabel="Medium"/>
<IcActionChiplabel="Large"size="large"/>

Outlined

Interactive example

Web component

React

Show full code

<ic-action-chiplabel="Outlined"variant="outlined"></ic-action-chip>
<ic-action-chiplabel="Non transparent"variant="outlined"transparentBackground="false"></ic-action-chip>

<IcActionChiplabel="Outlined"variant="outlined"/>
<IcActionChiplabel="Non transparent"variant="outlined"transparentBackground={false}/>

Disabled

Interactive example

Web component

React

Show full code

<ic-action-chiplabel="Default"disabled="true"></ic-action-chip>
<ic-action-chiplabel="Outlined"disabled="true"variant="outlined"></ic-action-chip>
<ic-action-chip label="Non transparent" disabled variant="outlined" transparentBackground="false"}"></ic-action-chip>

<IcActionChiplabel="Default"disabled/>
<IcActionChiplabel="Outlined"disabledvariant="outlined"/>
<IcActionChiplabel="Non transparent"disabledvariant="outlined"transparentBackground={false}/>

Icon

Interactive example

Web component

React

Show full code

<ic-action-chiplabel="With icon">
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</ic-action-chip>

<IcActionChiplabel="With Icon">
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</IcActionChip>

Badge

Interactive example

Web component

React

Show full code

<ic-action-chiplabel="With badge"variant="outlined">
<ic-badge
label="1"
slot="badge"
position="near"
variant="success"
></ic-badge>
</ic-action-chip>

<IcActionChiplabel="With Badge">
<IcBadge
label="1"
slot="badge"
position="near"
variant="success"
/>
</IcActionChip>

Link

Interactive example

Web component

React

Show full code

<ic-action-chiplabel="View More Coffees"
href="#"
target="_blank"
/>
</ic-action-chip>

<IcActionChip
label="View More Coffees"
href="#"
target="_blank"
/>

Themes

Interactive example

Light

Dark

Web component

React

Show full code

<divstyle="display: flex;flex-direction: column">
<divstyle="background-color:white;padding:8px">
<ic-themetheme="light">
<ic-typographyvariant="body"><p>Light</p></ic-typography>
<ic-action-chiplabel="Default"style="margin-right:8px">
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</ic-action-chip>
<ic-action-chiplabel="Outlined"variant="outlined"style="margin-right:8px">
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</ic-action-chip>
<ic-action-chiplabel="Monochrome"monochrome="true"style="margin-right:8px">
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</ic-action-chip>
</ic-theme>
</div>
<divstyle="background-color:black;padding:8px">
<ic-themetheme="dark">
<ic-typographyvariant="body"><p>Dark</p></ic-typography>
<ic-action-chiplabel="Default"style="margin-right:8px">
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</ic-action-chip>
<ic-action-chiplabel="Outlined"variant="outlined"style="margin-right:8px">
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</ic-action-chip>
<ic-action-chiplabel="Monochrome"monochrome="true"style="margin-right:8px">
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</ic-action-chip>
</ic-theme>
</div>
</div>

<divstyle={{ display:"flex", flexDirection:"column"}}>
<divstyle={{ backgroundColor:"white", padding:"8px"}}>
<IcThemetheme="light">
<IcTypographyvariant="body"><p>Light</p></IcTypography>
<IcActionChiplabel="Default"style={{ marginRight:"8px"}}>
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</IcActionChip>
<IcActionChiplabel="Outlined"variant="outlined"style={{ marginRight:"8px"}}>
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</IcActionChip>
<IcActionChiplabel="Monochrome"monochromestyle={{ marginRight:"8px"}}>
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</IcActionChip>
</IcTheme>
</div>
<divstyle={{ backgroundColor:"black", padding:"8px"}}>
<IcThemetheme="dark">
<IcTypographyvariant="body"><p>Dark</p></IcTypography>
<IcActionChiplabel="Default"style={{ marginRight:"8px"}}>
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</IcActionChip>
<IcActionChiplabel="Outlined"variant="outlined"style={{ marginRight:"8px"}}>
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</IcActionChip>
<IcActionChiplabel="Monochrome"monochromestyle={{ marginRight:"8px"}}>
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="account"
>
<path
d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
/>
</svg>
</IcActionChip>
</IcTheme>
</div>
</div>

Last reviewed 16 September 2025 .