Fluxo UIFluxo UIv0.4.1

ToggleButton

A button component that toggles between two states (on/off), useful for enabling/disabling features or switching between binary options.

Basic Usage

Default Toggle Button

Current state: Off

Basic Example
import { ToggleButton } from 'fluxo-ui';

function MyComponent() {
  const [checked, setChecked] = useState(false);

  return (
    <ToggleButton
      checked={checked}
      onChange={(e) => setChecked(e.value)}
    />
  );
}

Custom Labels

Toggle Button with Custom Labels

Feature is disabled

<ToggleButton
  checked={checked}
  onChange={(e) => setChecked(e.value)}
  onLabel="Enabled"
  offLabel="Disabled"
/>

Variants

Toggle Button Variants

<ToggleButton checked={true} variant="primary" onLabel="Primary" />
<ToggleButton checked={true} variant="success" onLabel="Success" />
<ToggleButton checked={true} variant="warning" onLabel="Warning" />
<ToggleButton checked={true} variant="danger" onLabel="Danger" />
<ToggleButton checked={true} variant="info" onLabel="Info" />
<ToggleButton checked={true} variant="secondary" onLabel="Secondary" />

Sizes

Toggle Button Sizes

<ToggleButton checked={true} size="xs" onLabel="XS" />
<ToggleButton checked={true} size="sm" onLabel="Small" />
<ToggleButton checked={true} size="md" onLabel="Medium" />
<ToggleButton checked={true} size="lg" onLabel="Large" />
<ToggleButton checked={true} size="xl" onLabel="XL" />

States

Toggle Button States

Off State
On State
Disabled Off
Disabled On
<ToggleButton checked={false} />
<ToggleButton checked={true} />
<ToggleButton checked={false} disabled />
<ToggleButton checked={true} disabled />

Multiple Toggle Buttons

Managing Multiple Toggles

Dark Mode

Enable dark theme

Notifications

Receive email notifications

Auto-Save

Automatically save changes

const [settings, setSettings] = useState({
  darkMode: false,
  notifications: true,
  autoSave: false,
});

const handleToggle = (key) => (e) => {
  setSettings(prev => ({ ...prev, [key]: e.value }));
};

<div className="space-y-4">
  <div className="flex items-center justify-between">
    <span>Dark Mode</span>
    <ToggleButton
      checked={settings.darkMode}
      onChange={handleToggle('darkMode')}
    />
  </div>
  <div className="flex items-center justify-between">
    <span>Notifications</span>
    <ToggleButton
      checked={settings.notifications}
      onChange={handleToggle('notifications')}
    />
  </div>
  <div className="flex items-center justify-between">
    <span>Auto-Save</span>
    <ToggleButton
      checked={settings.autoSave}
      onChange={handleToggle('autoSave')}
    />
  </div>
</div>

With Custom Styling

Customized Toggle Buttons

<ToggleButton
  checked={true}
  onLabel="Active"
  offLabel="Inactive"
  variant="success"
  className="font-bold"
/>

<ToggleButton
  checked={false}
  onLabel="Yes"
  offLabel="No"
  variant="primary"
  size="lg"
/>

Event Handling

Toggle with Event Logging

Event details (check console):

{
  "value": false,
  "name": "feature-toggle",
  "args": {
    "feature": "example"
  }
}
const handleToggle = (e) => {
  console.log('Toggle value:', e.value);
  console.log('Toggle name:', e.name);
  console.log('Additional args:', e.args);
  console.log('Original event:', e.event);

  setChecked(e.value);
};

<ToggleButton
  checked={checked}
  onChange={handleToggle}
  name="feature-toggle"
  args={{ feature: 'example' }}
/>

Form Integration

Toggle Button in Forms

<form onSubmit={handleSubmit}>
  <ToggleButton
    name="terms-accepted"
    checked={accepted}
    onChange={(e) => setAccepted(e.value)}
  />
  <button type="submit">Submit</button>
</form>

// The toggle value is available in form data as a string
// FormData will contain: terms-accepted: "true" or "false"

Import

import { ToggleButton } from 'fluxo-ui';

Props

checked
boolean"false"

The checked state of the toggle button

onChange
(event: ComponentEvent<boolean>) => void

Callback fired when the toggle state changes. Receives ComponentEvent with value, name, args, and event.

onLabel
string"'On'"

Label to display when button is checked/on

offLabel
string"'Off'"

Label to display when button is unchecked/off

disabled
boolean"false"

Disable the toggle button interaction

className
string

Additional CSS classes

name
string

Name attribute for form submission

id
string

HTML id attribute (auto-generated if not provided)

args
any

Additional arguments passed to onChange event

variant
'success' | 'warning' | 'danger' | 'info' | 'default' | 'primary' | 'secondary'

Color variant for the button (from BaseComponentProps)

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'

Size of the button (from BaseComponentProps)

Features

Two-State Toggle

Simple on/off functionality with clear visual feedback

Custom Labels

Configurable labels for both on and off states via onLabel and offLabel props

Multiple Variants

Supports all standard variants: primary, success, warning, danger, info, secondary

Size Options

Five size options from xs to xl for every UI density requirement

Disabled State

Built-in disabled state with visual feedback preventing interaction

Form Integration

Works seamlessly with HTML forms via hidden input and name prop

Rich Events

ComponentEvent provides value, name, args, and the original DOM event

Accessibility

Proper ARIA attributes with aria-pressed and aria-label for screen readers

Theming

Full dark/light and 5 brand themes via CSS variables — zero extra config