ToggleButton

View on Github

ToggleButton allows users to toggle a selection on or off, for example switching between two states or modes.

Import

import { ToggleButton } from '@contentful/f36-components';
// or
import { ToggleButton } from '@contentful/f36-button';

Examples

Basic

Example of simple usage:

States

Example of active and disabled toggle buttons:

Grouped

You can group several ToggleButtons using ButtonGroup component.

Props (API reference)

Name

Type

Default

aria-label
string

Aria label is required when using icon only

children
ReactNode

className
string

CSS class to be appended to the root element

icon
ReactElement<any, string | JSXElementConstructor<any>>

Expects any of the icon components

isActive
false
true

Applies active styles

isDisabled
false
true

Disabled interaction and applies disabled styles

onToggle
() => void

Function triggered when the toggle button is clicked.

size
"small"
"medium"
"large"

Determines size variation of Button component

testId
string

A [data-test-id] attribute used for testing purposes