​
Overview

HuxToggle is a two-state button component commonly used for formatting controls (like bold, italic) or feature toggles. It supports both icon-only and icon-with-text configurations, with multiple variants and sizes.

​
Basic Usage

HuxToggle(
  value: isBold,
  onChanged: (value) => setState(() => isBold = value),
  icon: FeatherIcons.bold,
  label: 'Bold', // Optional
)
Basic toggle usage

​
Icon-Only Toggle

HuxToggle(
  value: isEditing,
  onChanged: (value) => setState(() => isEditing = value),
  icon: FeatherIcons.edit2,
)

​
Variants

HuxToggle supports four visual variants through the HuxButtonVariant enum:

​
Primary Toggle

Primary toggle variants 
HuxToggle(
  value: isActive,
  onChanged: (value) => setState(() => isActive = value),
  icon: FeatherIcons.edit2,
  variant: HuxButtonVariant.primary, // Default
)

​
Secondary Toggle

Secondary toggle variants 
HuxToggle(
  value: isActive,
  onChanged: (value) => setState(() => isActive = value),
  icon: FeatherIcons.edit2,
  variant: HuxButtonVariant.secondary,
)

​
Outline Toggle

Outline toggle variants 
HuxToggle(
  value: isActive,
  onChanged: (value) => setState(() => isActive = value),
  icon: FeatherIcons.edit2,
  variant: HuxButtonVariant.outline,
)

​
Ghost Toggle

Ghost toggle variants 
HuxToggle(
  value: isActive,
  onChanged: (value) => setState(() => isActive = value),
  icon: FeatherIcons.edit2,
  variant: HuxButtonVariant.ghost,
)

​
Sizes

Control toggle dimensions with three size options:

​
Small Toggle

Compact size for tight spaces (32px height). Small toggle 
HuxToggle(
  value: isActive,
  onChanged: (value) => setState(() => isActive = value),
  icon: FeatherIcons.edit2,
  size: HuxToggleSize.small,
)

​
Medium Toggle (Default)

Default size for most use cases (40px height). Medium toggle 
HuxToggle(
  value: isActive,
  onChanged: (value) => setState(() => isActive = value),
  icon: FeatherIcons.edit2,
  size: HuxToggleSize.medium, // Default
)

​
Large Toggle

Prominent size for important actions (48px height). Large toggle 
HuxToggle(
  value: isActive,
  onChanged: (value) => setState(() => isActive = value),
  icon: FeatherIcons.edit2,
  size: HuxToggleSize.large,
)

​
States

​
Disabled State

Disabled toggle states 
HuxToggle(
  value: isActive,
  onChanged: null, // Disable the toggle
  icon: FeatherIcons.edit2,
  isDisabled: true,
)

​
Custom Primary Color

Custom color toggle 
HuxToggle(
  value: isActive,
  onChanged: (value) => setState(() => isActive = value),
  icon: FeatherIcons.edit2,
  primaryColor: Colors.deepPurple,
)

​
API Reference

​
HuxToggle Properties

PropertyTypeDefaultDescription
valueboolrequiredThe current toggle state (on/off)
onChangedValueChanged<bool>?nullCallback triggered when toggle state changes
iconIconDatarequiredThe icon to display in the toggle
labelString?nullOptional text label to display next to the icon
sizeHuxToggleSizemediumSize variant of the toggle
variantHuxButtonVariantprimaryVisual variant of the toggle
isDisabledboolfalseWhether the toggle is disabled
primaryColorColor?nullOptional custom primary color

​
HuxToggleSize Enum

  • HuxToggleSize.small - 32px height, compact padding
  • HuxToggleSize.medium - 40px height, standard padding
  • HuxToggleSize.large - 48px height, generous padding

​
Accessibility

HuxToggle includes several accessibility features:

​
Automatic Contrast

Text and icon colors are automatically calculated to ensure WCAG AA compliance (4.5:1 contrast ratio) against any background color.

​
Semantic Roles

Toggles include proper semantic roles for screen readers.

​
Focus States

Keyboard navigation support with visible focus indicators.

​
Disabled States

Proper disabled state handling for assistive technologies.

​
Best Practices

  • Use Primary for important toggles that need emphasis
  • Use Secondary for standard toggles in content areas
  • Use Outline for toggles that need visual separation
  • Use Ghost for subtle toggles in toolbars
  • Use Large for important feature toggles
  • Use Medium for most standard interactions
  • Use Small for compact toolbars or formatting controls
  • Choose clear, meaningful icons that represent the action
  • Use standard icons (bold, italic) for formatting controls
  • Add labels for actions that aren’t immediately clear
  • Let toggles adapt to your app’s theme
  • Use primaryColor only for specific emphasis
  • Maintain consistent styling within toggle groups

​
Examples

Form Building

See toggles in action within forms

Text Editor

Learn how to build a formatting toolbar

Custom Theming

Apply custom colors and themes

Accessibility

Ensure your toggles are accessible