ToggleButton#

Toggle buttons for binary on/off states and exclusive group selections.

ArcaneToggleButton#

A button that toggles between active and inactive states:

ArcaneToggleButton(
  value: isActive,
  label: 'Bold',
  onChanged: (selected) => setState(() => isActive = selected),
)

Properties#

With Icon#

ArcaneToggleButton(
  value: isBold,
  icon: ArcaneIcon.bold(),
  onChanged: (v) => setState(() => isBold = v),
)

Text Formatting Toolbar#

ArcaneRow(
  gapSize: Gap.xs,
  children: [
    ArcaneToggleButton(
      value: isBold,
      icon: ArcaneIcon.bold(),
      onChanged: (v) => setState(() => isBold = v),
    ),
    ArcaneToggleButton(
      value: isItalic,
      icon: ArcaneIcon.italic(),
      onChanged: (v) => setState(() => isItalic = v),
    ),
    ArcaneToggleButton(
      value: isUnderline,
      icon: ArcaneIcon.underline(),
      onChanged: (v) => setState(() => isUnderline = v),
    ),
  ],
)

ArcaneToggleButtonGroup#

A group of mutually exclusive toggle buttons (only one can be selected):

ArcaneToggleButtonGroup(
  options: const ['One', 'Two', 'Three'],
  selectedIndex: selectedIndex,
  onChanged: (index) => setState(() => selectedIndex = index),
)

Group Properties#

View Mode Toggle#

ArcaneToggleButtonGroup(
  options: const ['Grid', 'List', 'Table'],
  selectedIndex: viewModeIndex,
  onChanged: (index) => setState(() => viewModeIndex = index),
)

Billing Period Selection#

ArcaneToggleButtonGroup(
  options: const ['Monthly', 'Yearly'],
  selectedIndex: billingIndex,
  onChanged: (index) => setState(() => billingIndex = index),
)

Related Components#

• ArcaneToggleSwitch - Switch-style toggle
• ArcaneCheckbox - Checkbox toggle
• ArcaneRadio - Radio selection