Components

Toggle

A two-state button that stays pressed and turns a setting on or off.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

An icon-only Toggle needs a label. When pressed it gets aria-pressed="true" and its fill and border change together.

import { Toggle } from '@bigbang/ui';

export default function Default() {
  return <Toggle icon="bold" label="Bold" />;
}

With text

children gives the visible text and names the toggle. defaultPressed starts it pressed.

import { Toggle } from '@bigbang/ui';

export default function WithText() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <Toggle icon="bold">Bold</Toggle>
      <Toggle variant="secondary" defaultPressed>
        Item
      </Toggle>
    </div>
  );
}

States

tertiary has no border until pressed; secondary keeps a border in both states. disabled turns the toggle off.

import { Toggle } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <Toggle icon="italic" label="Italic" />
      <Toggle icon="italic" label="Italic" defaultPressed />
      <Toggle variant="secondary" icon="underline" label="Underline" />
      <Toggle variant="secondary" icon="underline" label="Underline" defaultPressed />
      <Toggle icon="bold" label="Bold" disabled />
    </div>
  );
}

Controlled

With pressed and onPressedChange you hold the state.

false

import { Toggle } from '@bigbang/ui';
import { useState } from 'react';

export default function Controlled() {
  const [pressed, setPressed] = useState(false);
  return (
    <div className="flex items-center gap-md">
      <Toggle variant="secondary" icon="bold" label="Bold" pressed={pressed} onPressedChange={setPressed} />
      <span className="type-body-sm text-fg-subtle">{pressed ? 'true' : 'false'}</span>
    </div>
  );
}

Light and dark mode

The pressed fill comes from color-surface-selected, the border from color-border-selected.

import { Toggle } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <Toggle icon="italic" label="Italic" />
      <Toggle icon="italic" label="Italic" defaultPressed />
      <Toggle variant="secondary" icon="underline" label="Underline" />
      <Toggle variant="secondary" icon="underline" label="Underline" defaultPressed />
      <Toggle icon="bold" label="Bold" disabled />
    </div>
  );
}