ToggleButton

Import

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

Examples

Basic

Example of simple usage:

Hide code
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>
  );
}
Open in Playground

States

Example of active and disabled toggle buttons:

Hide code
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>
  );
}
Open in Playground

Grouped

You can group several ToggleButtons using ButtonGroup component.

Hide code
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>
  );
}
Open in Playground