Toggle · Smallest

Variants

Primary is white with a shadow and flattens to neutral-100 when pressed. Secondary is transparent until hovered or pressed.

Sizes

The default size is md (36px). sm is 32px and lg is 40px.

import { BoldIcon, Toggle } from "@smallest-inc/ui";

export default function ToggleSizes() {
  return (
    <div className="flex items-center gap-3">
      <Toggle size="sm" aria-label="Bold">
        <BoldIcon />
      </Toggle>
      <Toggle size="md" aria-label="Bold">
        <BoldIcon />
      </Toggle>
      <Toggle size="lg" aria-label="Bold">
        <BoldIcon />
      </Toggle>
    </div>
  );
}

Pressed

Set defaultPressed, or pressed with onPressedChange when you control the state.

import { BoldIcon, ItalicIcon, Toggle, UnderlineIcon } from "@smallest-inc/ui";

export default function TogglePressed() {
  return (
    <div className="flex flex-col items-start gap-4">
      <div className="flex items-center gap-1">
        <Toggle aria-label="Bold" defaultPressed>
          <BoldIcon />
        </Toggle>
        <Toggle aria-label="Italic">
          <ItalicIcon />
        </Toggle>
        <Toggle aria-label="Underline">
          <UnderlineIcon />
        </Toggle>
      </div>
      <div className="flex items-center gap-1">
        <Toggle variant="secondary" aria-label="Bold" defaultPressed>
          <BoldIcon />
        </Toggle>
        <Toggle variant="secondary" aria-label="Italic">
          <ItalicIcon />
        </Toggle>
        <Toggle variant="secondary" aria-label="Underline">
          <UnderlineIcon />
        </Toggle>
      </div>
    </div>
  );
}

With text

Add a label beside the icon when the tool state is not obvious from the icon alone.

Disabled

Best practices

When to use

Use for a compact pressed or unpressed tool state, such as bold in a prompt editor or a “Missed calls” filter.
Use Switch for a persistent setting and Button for a one-time action.

Behavior

Primary is white with a shadow and flattens to neutral-100 when pressed. Use secondary (transparent) inside toolbars that already have a surface.
Use size md (36px) by default, sm (32px) in dense toolbars, and lg (40px) beside lg inputs.
Use defaultPressed for uncontrolled state, or pressed with onPressedChange when the state is owned elsewhere.

Accessibility

Pressed state is exposed as aria-pressed. Give icon-only toggles an aria-label that names the tool, such as “Bold”, and keep that label the same in both states.