3D Toggle Components

Transform your 3D buttons into interactive toggle switches. Perfect for settings, preferences, and binary choices with tactile feedback.

Uncontrolled Toggle (Manages its own state)

The simplest way to use toggle mode. The component manages its own state internally.

<Button3D
  type="primary"
  toggle
  onChange={(active) => console.log('Toggle state:', active)}
>
  Click to Toggle
</Button3D>

<Button3D
  type="success"
  toggle
  defaultActive={true}
>
  Default ON
</Button3D>

Controlled Toggle (You manage the state)

For more control, manage the state yourself. Perfect for forms and complex state management.

Current state: Inactive

const [isActive, setIsActive] = useState(false);

<Button3D
  type="info"
  toggle
  active={isActive}
  onChange={setIsActive}
>
  {isActive ? 'ON' : 'OFF'}
</Button3D>

Settings Panel Example

Notifications

Receive push notifications

Dark Mode

Use dark theme

Wi-Fi

Connect to wireless network

All Toggle Variants

Primary

Secondary

Tertiary

Success

Error

Warning

Info

Danger

Toggle API Reference

Prop	Type	Default	Description
toggle	boolean	false	Enables toggle mode - button stays pressed when clicked
active	boolean	undefined	Controlled mode: the current toggle state
defaultActive	boolean	false	Uncontrolled mode: initial toggle state
onChange	(active: boolean) => void	undefined	Callback fired when toggle state changes