Import

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

Examples

Basic

Example of simple usage:

function ToggleButtonBasicExample() {
  const [isActive, setIsActive] = useState(false);
  return (
    <ToggleButton
      isActive={isActive}
      onToggle={() => {
        setIsActive(!isActive);
      }}
      icon={<ThumbsUpIcon isActive={isActive} />}
    >
      Like
    </ToggleButton>
  );
}

Open in Playground

States

Example of active and disabled toggle buttons:

function ToggleButtonStatesExample() {
  return (
    <Stack>
      <ToggleButton isActive onToggle={() => {}}>
        Active State
      </ToggleButton>
      <ToggleButton isDisabled onToggle={() => {}}>
        Disabled State
      </ToggleButton>
    </Stack>
  );
}

Open in Playground

Icon only

Toggle buttons can display only an icon in the tiny, small, and medium sizes. Always provide an aria-label that describes the toggled state or action when no visible label is present.

function ToggleButtonIconOnlyExample() {
  const [isActive, setIsActive] = useState(false);

  return (
    <ToggleButton
      aria-label="Like"
      icon={<ThumbsUpIcon isActive={isActive} />}
      isActive={isActive}
      onToggle={() => setIsActive(!isActive)}
      size="tiny"
    />
  );
}

Open in Playground

Grouped

You can group several ToggleButtons using ButtonGroup component.

function ToggleButtonGroupedExample() {
  const [isItalic, setIsItalic] = useState(false);
  const [isBold, setIsBold] = useState(true);
  const [isUnderline, setIsUnderline] = useState(false);
  return (
    <ButtonGroup>
      <ToggleButton
        isActive={isItalic}
        icon={<TextItalicIcon isActive={isItalic} />}
        aria-label="Italic"
        size="small"
        onToggle={() => {
          setIsItalic(!isItalic);
        }}
      />
      <ToggleButton
        isActive={isBold}
        icon={<TextBIcon isActive={isBold} />}
        aria-label="Bold"
        size="small"
        onToggle={() => {
          setIsBold(!isBold);
        }}
      />
      <ToggleButton
        isActive={isUnderline}
        icon={<TextUnderlineIcon isActive={isUnderline} />}
        aria-label="Underline"
        size="small"
        onToggle={() => {
          setIsUnderline(!isUnderline);
        }}
      />
    </ButtonGroup>
  );
}

Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
onToggle required	() => void Function triggered when the toggle button is clicked.
aria-label	string Accessible label. Required when the button only displays an icon.
children	ReactNode
className	string CSS class to be appended to the root element
icon	ReactElement<unknown, string \| JSXElementConstructor<any>> Expects any of the icon components
isActive	false true Applies active styles	false
isDisabled	false true Disabled interaction and applies disabled styles	false
size	"small" "tiny" "medium" "large" Determines size variation of Button component	medium
testId	string A [data-test-id] attribute used for testing purposes

Import

Examples

Basic

States

Icon only

Grouped

Props (API reference)

Name

Type

Default

Help improve this page