Pro
Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Switches
Toggle switches provide an intuitive way for users to switch between two states. Our enhanced switch components combine Bootstrap's functionality with modern styling, meaningful icons, and clear visual feedback for better user experience.
Best Practice: Use switches for
immediate actions that toggle features on/off. For delayed or complex actions, consider using
checkboxes instead.
Basic Usage
Switch controls come in two distinct styles:
- Default Style: Rounded switches with smooth transitions
- Square Style: Modern, geometric appearance
- State Indicators: Clear visual feedback for on/off states
- Icon Integration: Meaningful icons for better context
Basic Switch Controls
Switch Colors
Enhance switches with contextual colors:
- Primary: Default state for standard features
- Success: Positive actions and enabled states
- Danger: Critical or destructive actions
- Warning: Cautionary or test features
- Info: Informational or optional features
Use colors consistently to maintain clear meaning across your interface.
Colored Switch Controls
Switch Sizes
Five size variations to match your design needs:
- Extra Small: Compact switches for dense layouts
- Small: Reduced size for secondary options
- Default: Standard size for general use
- Large: Enhanced visibility for important toggles
- Extra Large: Maximum prominence for key features
Match switch sizes with their importance in the interface hierarchy.
Switch Size Variations