Toggle button

BETA

Component demo

Interactive example

Web component

React

<ic-toggle-button
id="toggle-btn"
label="Switch to oat milk"
></ic-toggle-button>

<IcToggleButton
label="Switch to oat milk"
onIcToggleChecked={(event)=>console.log(event.detail.checked)}
/>

Toggle button details

Props

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

Name	Description	Default
Property accessibleLabel Attribute accessible-label	The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons. type: string
Property appearance Attribute appearance	The appearance of the toggle button. type: IcThemeForeground - "dark" \| "default" \| "light"	"default"
Property disabled Attribute disabled	If`true` , the toggle button will be in disabled state. type: boolean	false
Property fullWidth Attribute full-width	If`true` , the toggle button will fill the width of the container. type: boolean	false
Property iconPlacement Attribute icon-placement	The placement of the icon in relation to the toggle button label. type: "left" \| "right" \| "top"
Property label Attribute label	The label to display in the toggle button. This is required for the default variant of toggle buttons. type: string
Property loading Attribute loading	If`true` , the toggle button will be in loading state. type: boolean	false
Property size Attribute size	The size of the toggle button to be displayed. type: IcSizes - "default" \| "large" \| "small"	"default"
Property toggleChecked Attribute toggle-checked	If`true` , the toggle button will be in a checked state. type: boolean	false
Property variant Attribute variant	The variant of the toggle button. type: "default" \| "icon"	"default"

Property

accessibleLabel

Attribute

accessible-label

The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.

type: string

Property

appearance

Attribute

appearance

The appearance of the toggle button.

type: IcThemeForeground - "dark" | "default" | "light"

Default: "default"

Property

disabled

Attribute

disabled

Iftrue , the toggle button will be in disabled state.

type: boolean

Default: false

Property

fullWidth

Attribute

full-width

Iftrue , the toggle button will fill the width of the container.

type: boolean

Default: false

Property

iconPlacement

Attribute

icon-placement

The placement of the icon in relation to the toggle button label.

type: "left" | "right" | "top"

Property

label

Attribute

label

The label to display in the toggle button. This is required for the default variant of toggle buttons.

type: string

Property

Attribute

Iftrue , the toggle button will be in loading state.

type: boolean

Default: false

Property

size

Attribute

size

The size of the toggle button to be displayed.

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

Default: "default"

Property

toggleChecked

Attribute

toggle-checked

Iftrue , the toggle button will be in a checked state.

type: boolean

Default: false

Property

variant

Attribute

variant

The variant of the toggle button.

type: "default" | "icon"

Default: "default"

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 toggle button.
Slot icon	Content will be displayed alongside the toggle button label.

Events

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

Name	Description	Signature
Web component icToggleChecked React onIcToggleChecked	Emitted when the user clicks a toggle button.	{ checked: boolean; }

Web component

icToggleChecked

React

onIcToggleChecked

Emitted when the user clicks a toggle button.

{ checked: boolean; }

Toggle button group details

Props

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

Name	Description	Default
Property accessibleLabel Attribute accessible-label	The accessible label of the toggle button group component to provide context for screen reader users. type: string	"Toggle button group"
Property appearance Attribute appearance	The appearance of the toggle button group, e.g dark, or light. type: IcThemeForeground - "dark" \| "default" \| "light"	"default"
Property disabled Attribute disabled	If`true` , the toggle button group will be set to the disabled state. type: boolean	false
Property fullWidth Attribute full-width	If`true` , the toggle button group will fill the width of the container. type: boolean	false
Property iconPlacement Attribute icon-placement	The placement of the icons in relation to the toggle button labels. type: "left" \| "right" \| "top"
Property loading Attribute loading	If`true` , the toggle button group will be in loading state. type: boolean	false
Property selectMethod Attribute select-method	If`auto` , controls are toggled automatically when navigated to. If`manual` , the controls must be actioned to change their toggled state. The value of this prop is ignored if`selectType` is set to`multi` . type: IcSelectMethodTypes - "auto" \| "manual"	"manual"
Property selectType Attribute select-type	Sets whether single or multiple options can be toggled. If`multi` , then the`selectMethod` is always`manual` . type: IcSelectTypes - "multi" \| "single"	"single"
Property size Attribute size	The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label. type: IcSizes - "default" \| "large" \| "small"	"default"
Property variant Attribute variant	The variant of the toggle button. type: "default" \| "icon"	"default"

Property

accessibleLabel

Attribute

accessible-label

The accessible label of the toggle button group component to provide context for screen reader users.

type: string

Default: "Toggle button group"

Property

appearance

Attribute

appearance

The appearance of the toggle button group, e.g dark, or light.

type: IcThemeForeground - "dark" | "default" | "light"

Default: "default"

Property

disabled

Attribute

disabled

Iftrue , the toggle button group will be set to the disabled state.

type: boolean

Default: false

Property

fullWidth

Attribute

full-width

Iftrue , the toggle button group will fill the width of the container.

type: boolean

Default: false

Property

iconPlacement

Attribute

icon-placement

The placement of the icons in relation to the toggle button labels.

type: "left" | "right" | "top"

Property

Attribute

Iftrue , the toggle button group will be in loading state.

type: boolean

Default: false

Property

selectMethod

Attribute

select-method

Ifauto , controls are toggled automatically when navigated to. Ifmanual , the controls must be actioned to change their toggled state. The value of this prop is ignored ifselectType is set tomulti .

type: IcSelectMethodTypes - "auto" | "manual"

Default: "manual"

Property

selectType

Attribute

select-type

Sets whether single or multiple options can be toggled. Ifmulti , then theselectMethod is alwaysmanual .

type: IcSelectTypes - "multi" | "single"

Default: "single"

Property

size

Attribute

size

The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.

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

Default: "default"

Property

variant

Attribute

variant

The variant of the toggle button.

type: "default" | "icon"

Default: "default"

Events

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

Name	Description	Signature
Web component icChange React onIcChange	Emitted when a toggle button is selected.	IcChangeEventDetail

Web component

icChange

React

onIcChange

Emitted when a toggle button is selected.

IcChangeEventDetail

Variants

Other states

Interactive example

Switch to oat milk

Web component

React

<ic-toggle-button
label="Switch to oat milk"
disabled="true"
></ic-toggle-button>
<ic-toggle-button
label="Switch to oat milk"
disabled="true"
toggle-checked="true"
></ic-toggle-button>
<ic-toggle-button
label="Switch to oat milk"
loading="true"
></ic-toggle-button>
<ic-toggle-button
label="Switch to oat milk"
loading="true"
toggle-checked="true"
></ic-toggle-button>

<IcToggleButtonlabel="Switch to oat milk"disabled/>
<IcToggleButtonlabel="Switch to oat milk"disabledtoggleChecked/>
<IcToggleButtonlabel="Switch to oat milk"loading/>
<IcToggleButtonlabel="Switch to oat milk"loadingtoggleChecked/>

With icon

Interactive example

Web component

React

<ic-toggle-buttonlabel="Switch to oat milk">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="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-toggle-button>

<IcToggleButtonlabel="Switch to oat milk">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<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>
</IcToggleButton>

Sizing

Interactive example

Web component

React

<ic-toggle-button
label="Switch to oat milk"
size="small"
></ic-toggle-button>
<ic-toggle-buttonlabel="Switch to oat milk"></ic-toggle-button>
<ic-toggle-button
label="Switch to oat milk"
size="large"
></ic-toggle-button>

<IcToggleButtonlabel="Switch to oat milk"size="small"/>
<IcToggleButtonlabel="Switch to oat milk"size="default"/>
<IcToggleButtonlabel="Switch to oat milk"size="large"/>

With badge

Interactive example

Web component

React

<ic-toggle-buttonlabel="Switch to oat milk">
<ic-badgetext-label="1"slot="badge"variant="success"></ic-badge>
</ic-toggle-button>

<IcToggleButtonlabel="Switch to oat milk">
<IcBadgetextLabel="1"slot="badge"variant="success"/>
</IcToggleButton>

Dark

Interactive example

Switch to oat milk

Web component

React

<ic-toggle-button
label="Switch to oat milk"
appearance="dark"
></ic-toggle-button>
<ic-toggle-button
label="Switch to oat milk"
appearance="dark"
loading="true"
></ic-toggle-button>
<ic-toggle-button
label="Switch to oat milk"
appearance="dark"
loading="true"
toggle-checked="true"
></ic-toggle-button>

<IcToggleButtonlabel="Switch to oat milk"appearance="dark"/>
<IcToggleButtonlabel="Switch to oat milk"appearance="dark"loading/>
<IcToggleButton
label="Switch to oat milk"
appearance="dark"
loading
toggleChecked
/>

Light

Interactive example

Switch to oat milk

Web component

React

<ic-toggle-buttonlabel="Switch to oat milk"appearance="light"></ic-toggle-button>
<ic-toggle-buttonlabel="Switch to oat milk"appearance="light"loading="true"></ic-toggle-button>
<ic-toggle-buttonlabel="Switch to oat milk"appearance="light"loading="true"toggle-checked="true"></ic-toggle-button>

<IcToggleButtonlabel="Switch to oat milk"appearance="light"/>
<IcToggleButtonlabel="Switch to oat milk"appearance="light"loading/>
<IcToggleButton
label="Switch to oat milk"
appearance="light"
loading
toggleChecked
/>

Full width

Interactive example

Web component

React

<ic-toggle-button-group
accessible-label="Alternatives to milk selection"
full-width="true"
select-type="single"
>
<ic-toggle-buttonlabel="Switch to oat milk"></ic-toggle-button>
<ic-toggle-buttonlabel="Switch to almond milk"></ic-toggle-button>
<ic-toggle-buttonlabel="Switch to coconut milk"></ic-toggle-button>
<ic-toggle-buttonlabel="Switch to rice milk"></ic-toggle-button>
</ic-toggle-button-group>

<IcToggleButtonGroup
accessibleLabel="Alternatives to milk selection"
fullWidth
selectType="single"
>
<IcToggleButtonlabel="Switch to oat milk"/>
<IcToggleButtonlabel="Switch to almond milk"/>
<IcToggleButtonlabel="Switch to coconut milk"/>
<IcToggleButtonlabel="Switch to rice milk"/>
</IcToggleButtonGroup>

Icon only

Interactive example

Web component

React

<ic-toggle-button-group
accessible-label="Coffee icon variants"
variant="icon"
>
<ic-toggle-buttonaccessible-label="Coffee icon"variant="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<path
d="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-toggle-button>
<ic-toggle-button
accessible-label="Loading coffee"
variant="icon"
loading="true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<path
d="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-toggle-button>
<ic-toggle-button
accessible-label="Disabled coffee"
variant="icon"
disabled="true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<path
d="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-toggle-button>
</ic-toggle-button-group>

<IcToggleButtonGroupaccessibleLabel="Coffee icon variants"variant="icon">
<IcToggleButtonvariant="icon"accessibleLabel="Coffee icon">
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<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>
</IcToggleButton>
<IcToggleButtonvariant="icon"accessibleLabel="Loading coffee"loading>
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<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>
</IcToggleButton>
<IcToggleButtonvariant="icon"accessibleLabel="Disabled coffee"disabled>
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<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>
</IcToggleButton>
</IcToggleButtonGroup>

Icon right

Interactive example

Web component

React

<ic-toggle-button-group
accessible-label="Alternatives to milk selection"
icon-placement="right"
>
<ic-toggle-buttonlabel="Switch to oat milk">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<path
d="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-toggle-button>
<ic-toggle-buttonlabel="Switch to almond milk">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<path
d="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-toggle-button>
</ic-toggle-button-group>

<IcToggleButtonGroup
accessibleLabel="Alternatives to milk selection"
iconPlacement="right"
>
<IcToggleButtonlabel="Switch to oat milk"iconPlacement="right">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<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>
</IcToggleButton>
<IcToggleButtonlabel="Switch to almond milk"iconPlacement="right">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<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>
</IcToggleButton>
</IcToggleButtonGroup>

Icon top

Interactive example

Web component

React

<ic-toggle-button-group
accessible-label="Alternatives to milk selection"
icon-placement="top"
>
<ic-toggle-buttonlabel="Switch to oat milk">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<path
d="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-toggle-button>
<ic-toggle-buttonlabel="Switch to almond milk">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<path
d="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-toggle-button>
</ic-toggle-button-group>

<IcToggleButtonGroup
accessibleLabel="Alternatives to milk selection"
iconPlacement="top"
>
<IcToggleButtonlabel="First toggle"iconPlacement="top">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
</SlottedSVG>
</IcToggleButton>
<IcToggleButtonlabel="Second toggle"iconPlacement="top">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
</SlottedSVG>
</IcToggleButton>
</IcToggleButtonGroup>

Last reviewed 31 May 2024 .