ToggleButton

Toggle something on or off, such as set text to bold or italic.

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)

Open in Storybook

Name

Type

Default

onToggle
required
() => void

Function triggered when the toggle button is clicked.

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

size
"small"
"medium"
"large"

Determines size variation of Button component

testId
string

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