Duct UI

Async Toggle Component

Toggle button with asynchronous state management and custom async operations

Basic Usage

Standard Async Toggle

Basic async toggle with 1 second simulated API delay.

Custom Styling

Custom labels, emojis, and styling classes.

Advanced Examples

Error Handling

Toggle with simulated API failures. Use the toggle to enable/disable error simulation.

Fast Response

Fast toggle with 200ms response time.

Control Panel

Control the behavior of the async toggles above.

Event Log

Async Toggle Events

No events yet...

Async Toggle Features:

  • Async State Loading - Uses load lifecycle to get initial state
  • Custom Async Functions - isOn(), switchOn(), switchOff() props
  • Loading States - Visual feedback during async operations
  • Error Handling - Graceful error handling with error events
  • State Verification - Confirms state after operations
  • Custom Labels - onLabel, offLabel, loadingLabel props
  • Custom Styling - onClass, offClass, loadingClass props
  • Events - switched-on, switched-off, error events
  • Logic Methods - refreshState(), getCurrentState()
  • State Management - Prevents concurrent operations