Toggle button usage guidelines

Caution

This component is currently in an unstable state and may undergo significant changes in future releases.

A toggle button allows users to toggle between two states.

Preview

Bluetooth

Code

import { UNSTABLE_ToggleButton as ToggleButton } from '@cimpress-ui/react';

export default function Demo() {
  return <ToggleButton>Bluetooth</ToggleButton>;
}

Icon-only toggle button

Preview

Code

import { UNSTABLE_ToggleIconButton as ToggleIconButton } from '@cimpress-ui/react';
import { IconTextBold } from '@cimpress-ui/react/icons';

export default function Demo() {
  return <ToggleIconButton icon={<IconTextBold />} aria-label="Bold" />;
}

Use extremely sparingly. Icons can be confusing when used for unusual actions or inconsistently.

Toggle button group

Preview

LeftCenterRight

Code

import {
  UNSTABLE_ToggleButton as ToggleButton,
  UNSTABLE_ToggleButtonGroup as ToggleButtonGroup,
} from '@cimpress-ui/react';

export default function Demo() {
  return (
    <ToggleButtonGroup aria-label="Text alignment">
      <ToggleButton id="left">Left</ToggleButton>
      <ToggleButton id="center">Center</ToggleButton>
      <ToggleButton id="right">Right</ToggleButton>
    </ToggleButtonGroup>
  );
}