ToggleButton

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:

Open in Playground
function ToggleButtonBasicExample() {
  const [isActive, setIsActive] = useState(false);
  return (
    <ToggleButton
      isActive={isActive}
      onToggle={() => {
        setIsActive(!isActive);
      }}
      icon={<ThumbUpTrimmedIcon />}
    >
      Like
    </ToggleButton>
  );
}
function ToggleButtonBasicExample() {
  const [isActive, setIsActive] = useState(false);
  return (
    <ToggleButton
      isActive={isActive}
      onToggle={() => {
        setIsActive(!isActive);
      }}
      icon={<ThumbUpTrimmedIcon />}
    >
      Like
    </ToggleButton>
  );
}
Hide source

States

Example of active and disabled toggle buttons:

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

Grouped

You can group several ToggleButtons using ButtonGroup component.

Open in Playground
function ToggleButtonGroupedExample() {
  const [isItalic, setIsItalic] = useState(false);
  const [isBold, setIsBold] = useState(true);
  const [isUnderline, setIsUnderline] = useState(false);
  return (
    <ButtonGroup>
      <ToggleButton
        isActive={isItalic}
        icon={<FormatItalicIcon />}
        aria-label="Italic"
        size="small"
        onToggle={() => {
          setIsItalic(!isItalic);
        }}
      />
      <ToggleButton
        isActive={isBold}
        icon={<FormatBoldIcon />}
        aria-label="Bold"
        size="small"
        onToggle={() => {
          setIsBold(!isBold);
        }}
      />
      <ToggleButton
        isActive={isUnderline}
        icon={<FormatUnderlinedIcon />}
        aria-label="Underline"
        size="small"
        onToggle={() => {
          setIsUnderline(!isUnderline);
        }}
      />
    </ButtonGroup>
  );
}
function ToggleButtonGroupedExample() {
  const [isItalic, setIsItalic] = useState(false);
  const [isBold, setIsBold] = useState(true);
  const [isUnderline, setIsUnderline] = useState(false);
  return (
    <ButtonGroup>
      <ToggleButton
        isActive={isItalic}
        icon={<FormatItalicIcon />}
        aria-label="Italic"
        size="small"
        onToggle={() => {
          setIsItalic(!isItalic);
        }}
      />
      <ToggleButton
        isActive={isBold}
        icon={<FormatBoldIcon />}
        aria-label="Bold"
        size="small"
        onToggle={() => {
          setIsBold(!isBold);
        }}
      />
      <ToggleButton
        isActive={isUnderline}
        icon={<FormatUnderlinedIcon />}
        aria-label="Underline"
        size="small"
        onToggle={() => {
          setIsUnderline(!isUnderline);
        }}
      />
    </ButtonGroup>
  );
}
Hide source

Props (API reference)

• Name

  aria-label

  Description

  Aria label is required when using icon only

  string
• Name

  children

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  icon

  Description

  Expects any of the icon components

  ReactElement<any, string | JSXElementConstructor<any>>
• Name

  isActive

  Description

  Applies active styles

  false

  true
• Name

  isDisabled

  Description

  Disabled interaction and applies disabled styles

  false

  true
• Name

  onToggle

  Description

  Function triggered when the toggle button is clicked.

  () => void
• Name

  size

  Description

  Determines size variation of Button component

  "small"

  "medium"

  "large"
• Name

  testId

  Description

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

  string