Toggle button - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<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 - string \| undefined
Property checked Attribute checked	If`true` , the toggle button will be in a checked state. type: boolean - boolean \| undefined	false
Property disabled Attribute disabled	If`true` , the toggle button will be in disabled state. type: boolean - boolean \| undefined	false
Property fullWidth Attribute full-width	If`true` , the toggle button will fill the width of the container. type: boolean - boolean \| undefined	false
Property iconPlacement Attribute icon-placement	The placement of the icon in relation to the toggle button label. type: IcIconPlacementOptions - "left" \| "right" \| "top" \| undefined	"left"
Property label Attribute label	The label to display in the toggle button. This is required for the default variant of toggle buttons. type: string - string \| undefined
Property loading Attribute loading	If`true` , the toggle button will be in loading state. type: boolean - boolean \| undefined	false
Property monochrome Attribute monochrome	If`true` , the toggle button will display as black in the light theme, and white in dark theme. type: boolean - boolean \| undefined	false
Property size Attribute size	The size of the toggle button to be displayed. type: IcSizes - "large" \| "medium" \| "small" \| undefined	"medium"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property tooltipPlacement Attribute tooltip-placement	The position of the tooltip in relation to the toggle button. type: IcButtonTooltipPlacement - "bottom" \| "left" \| "right" \| "top" \| undefined	"bottom"
Property variant Attribute variant	The variant of the toggle button. type: "default" \| "icon" - "default" \| "icon" \| undefined	"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 - string | undefined

Property

checked

Attribute

checked

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

type: boolean - boolean | undefined

Default: false

Property

disabled

Attribute

disabled

Iftrue , the toggle button will be in disabled state.

type: boolean - boolean | undefined

Default: false

Property

fullWidth

Attribute

full-width

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

type: boolean - boolean | undefined

Default: false

Property

iconPlacement

Attribute

icon-placement

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

type: IcIconPlacementOptions - "left" | "right" | "top" | undefined

Default: "left"

Property

label

Attribute

label

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

type: string - string | undefined

Property

Attribute

Iftrue , the toggle button will be in loading state.

type: boolean - boolean | undefined

Default: false

Property

monochrome

Attribute

monochrome

Iftrue , the toggle button will display as black in the light theme, and white in dark theme.

type: boolean - boolean | undefined

Default: false

Property

size

Attribute

size

The size of the toggle button to be displayed.

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

Default: "medium"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

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

Default: "inherit"

Property

tooltipPlacement

Attribute

tooltip-placement

The position of the tooltip in relation to the toggle button.

type: IcButtonTooltipPlacement - "bottom" | "left" | "right" | "top" | undefined

Default: "bottom"

Property

variant

Attribute

variant

The variant of the toggle button.

type: "default" | "icon" - "default" | "icon" | undefined

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 - string \| undefined	"Toggle button group"
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 - boolean \| undefined	false
Property iconPlacement Attribute icon-placement	The placement of the icons in relation to the toggle button labels. type: "left" \| "right" \| "top" - "left" \| "right" \| "top" \| undefined
Property loading Attribute loading	If`true` , the toggle button group will be in loading state. type: boolean - boolean \| undefined	false
Property monochrome Attribute monochrome	If`true` , the toggle button group will display as black in the light theme, and white in dark theme. type: boolean - boolean \| undefined	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" \| undefined	"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" \| undefined	"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 - "large" \| "medium" \| "small" \| undefined	"medium"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property tooltipPlacement Attribute tooltip-placement	The position of the tooltip in relation to the toggle buttons. type: IcButtonTooltipPlacement - "bottom" \| "left" \| "right" \| "top"	"bottom"
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 - string | undefined

Default: "Toggle button group"

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

Default: false

Property

iconPlacement

Attribute

icon-placement

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

Property

Attribute

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

type: boolean - boolean | undefined

Default: false

Property

monochrome

Attribute

monochrome

Iftrue , the toggle button group will display as black in the light theme, and white in dark theme.

type: boolean - boolean | undefined

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

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

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 - "large" | "medium" | "small" | undefined

Default: "medium"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

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

Default: "inherit"

Property

tooltipPlacement

Attribute

tooltip-placement

The position of the tooltip in relation to the toggle buttons.

type: IcButtonTooltipPlacement - "bottom" | "left" | "right" | "top"

Default: "bottom"

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

Web component

React

Show full code

<ic-toggle-button
label="Switch to oat milk"
disabled="true"
></ic-toggle-button>
<ic-toggle-button
label="Switch to oat milk"
disabled="true"
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"
checked="true"
></ic-toggle-button>

<IcToggleButtonlabel="Switch to oat milk"disabled/>
<IcToggleButtonlabel="Switch to oat milk"disabledchecked/>
<IcToggleButtonlabel="Switch to oat milk"loading/>
<IcToggleButtonlabel="Switch to oat milk"loadingchecked/>

With icon

Interactive example

Web component

React

Show full code

<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

Show full code

<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="medium"/>
<IcToggleButtonlabel="Switch to oat milk"size="large"/>

With badge

Interactive example

Web component

React

Show full code

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

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

Monochrome

Interactive example

Web component

React

Show full code

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

<IcToggleButtonlabel="Switch to oat milk"monochrome="true"/>
<IcToggleButtonlabel="Switch to oat milk"monochrome="true"loading/>
<IcToggleButton
label="Switch to oat milk"
monochrome="true"
loading
checked
/>

Theme

Interactive example

Web component

React

Show full code

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

<IcToggleButtonlabel="Switch to oat milk"theme="dark"/>
<IcToggleButtonlabel="Switch to oat milk"theme="dark"loading/>
<IcToggleButton
label="Switch to oat milk"
theme="dark"
loading
checked
/>

Full width

Interactive example

Web component

React

Show full code

<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

Show full code

<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

Show full code

<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

Show full code

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