ToggleButton

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

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

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

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

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>
  );
}