Toggle

When to use

Toggle is for a setting that takes effect at once and stays pressed: text format, a view option, a filter that turns on and off.

When not to use

• For a choice in a form: Submitted values are collected with checkboxes or switches; Toggle sends no form value.
• To run an action once: Use a Button or an IconButton.
• For options that exclude each other: Put the options in a ToggleGroup.

Anatomy

BoldItem

LightDark

Copy code

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

1. Box: the Button heights; when pressed, a color-surface-selected fill and a color-border-selected border.
2. Icon: an optional registered icon (icon), with aria-hidden.
3. Text: an optional visible name (children). Without it, label is required.

Behaviour

• Click, Enter and Space switch the pressed state.
• Use defaultPressed when uncontrolled, and pressed with onPressedChange when controlled.
• The pressed state shows through fill and border together; it does not rely on colour alone.
• Inside a ToggleGroup you set value; the group holds the pressed values and passes on the look and size.

Guidelines

• The label names the setting, not the state: “Bold”. Do not write “Make bold” or “Turn off bold”.
• The effect of the pressed state shows at once; do not use Toggle for settings that need a confirmation.
• Use tertiary in toolbars and secondary in cards and filter rows.

Content

• The label is a short noun or adjective; it does not change with the state.

Turkish	English
Kalın	Bold
İtalik	Italic
Altı çizili	Underline

Related components

• ToggleGroup: gathers Toggles into one value.
• IconButton: an icon action that does not stay pressed.
• Button: an action with text.