Fork me on GitHub

Styleguide: Toggle Buttons

Primary Buttons

Default Default Toggle.
<div class="toggle-group"> <label class="btn btn-success btn -xs toggle-on"aria-hidden="true" >True</label> <span class="toggle-handle btn btn-light btn-xs" aria-hidden="true"</span> </div>
Hover Hover Toggle.
Handled by Bootstrap class .btn-secondary:hover
Pressed Hover Toggle.
Handled by Bootstrap class .btn-secondary:not(:disabled) :not(.disabled):active
Disabled Hover Toggle.
Handled by bootstrap attribute disabled

Toggle off

Default Default Toggle.
<div class="toggle-group"> <label class="btn btn-success btn -xs toggle-on"aria-hidden="true" >True</label> <span class="toggle-handle btn btn-light btn-xs" aria-hidden="true"</span> </div>
Hover Hover Toggle.
Handled by Bootstrap class .btn-secondary:hover
Pressed Hover Toggle.
Handled by Bootstrap class .btn-secondary:not(:disabled) :not(.disabled):active
Disabled Hover Toggle.
Handled by bootstrap attribute disabled

Primary Buttons

Default Default Toggle.
<div class="toggle-group"> <label class="btn btn-success btn -xs toggle-on"aria-hidden="true" >True</label> <span class="toggle-handle btn btn-light btn-xs" aria-hidden="true"</span> </div>
Hover Hover Toggle.
Handled by Bootstrap class .btn-secondary:hover
Pressed Hover Toggle.
Handled by Bootstrap class .btn-secondary:not(:disabled) :not(.disabled):active
Disabled Hover Toggle.
Handled by bootstrap attribute disabled

Toggle off

Default Default Toggle.
<div class="toggle-group"> <label class="btn btn-success btn -xs toggle-on"aria-hidden="true" >True</label> <span class="toggle-handle btn btn-light btn-xs" aria-hidden="true"</span> </div>
Hover Hover Toggle.
Handled by Bootstrap class .btn-secondary:hover
Pressed Hover Toggle.
Handled by Bootstrap class .btn-secondary:not(:disabled) :not(.disabled):active
Disabled Hover Toggle.
Handled by bootstrap attribute disabled

Primary Buttons

Default Default Toggle.
<div class="toggle-group"> <label class="btn btn-success btn -xs toggle-on"aria-hidden="true" >True</label> <span class="toggle-handle btn btn-light btn-xs" aria-hidden="true"</span> </div>
Hover Hover Toggle.
Handled by Bootstrap class .btn-secondary:hover
Disabled Hover Toggle.
Handled by bootstrap attribute disabled

Toggle off

Default Default Toggle.
<div class="toggle-group"> <label class="btn btn-success btn -xs toggle-on"aria-hidden="true" >True</label> <span class="toggle-handle btn btn-light btn-xs" aria-hidden="true"</span> </div>
Hover Hover Toggle.
Handled by Bootstrap class .btn-secondary:hover
Disabled Hover Toggle.
Handled by bootstrap attribute disabled