Switch | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Switch

##### Custom Switch

A switch has the markup of a custom checkbox but uses the `form-switch` class to render a toggle switch.

##### Icons Switch

For defined icons switches, use `switch-state` and`icon-state`.

Primary Switch
Secondary Switch
Success Switch
Danger Switch
Warning Switch
Info Switch
Dark Switch

##### Uncheck Switch

Use `switch-state` class to create uncheck switches.

Unchecked Primary Switch
Unchecked Secondary Switch
Unchecked Success Switch
Unchecked Danger Switch
Unchecked Warning Switch
Unchecked Info Switch
Unchecked Dark Switch

##### Borders with Icons

Use `switch-outline` and `icon-state` class to create outline with icons.

Bordered Primary Switch
Bordered Secondary Switch
Bordered Success Switch
Bordered Danger Switch
Bordered Warning Switch
Bordered Info Switch
Bordered Dark Switch

##### Disabled Outline Switch

Use `switch-outline` class to create outline.

##### Variation of Switches

Use `tgl-skewed/tgl-flip` class to create variations.

- Skewed

- Flip

- Checked

- Flat

##### Switch Sizing

Use `switch-sm` and `switch-lg` class to create switch sizing.

Small Size
Small Size Unchecked
Normal Size
Normal Unchecked
Disabled State
Large Size
Large Unchecked
Disabled

##### Switch with Icons

Use `icon-state` class to visible icons in switches.

Small Size
Small Size Unchecked
Normal Size
Normal Unchecked
Disabled With Icon
Large Size
Large Unchecked
Disabled