Toggle button

BETA

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)}
/>

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