Forms

Switches

Checkboxes or radios styled as toggle switches.

Checkboxes

Radios

<form>
	<label class="switch-input">
		<input name="switch-checkbox" type="checkbox" checked>
		<i data-swoff-text="OFF" data-swon-text="ON"></i> Web Notification
	</label>
	<label class="switch-input">
		<input name="switch-checkbox" type="checkbox">
		<i data-swoff-text="OFF" data-swon-text="ON"></i> Mobile Notification
	</label>
	<label class="switch-input">
		<input name="switch-checkbox" type="checkbox" checked>
		<i data-swoff-text="OFF" data-swon-text="ON"></i> Email Subscription
	</label>
	<label class="switch-input">
		<input name="switch-checkbox" type="checkbox" checked="">
		<i data-swoff-text="NO" data-swon-text="YES"></i> Show Birthdate
	</label>
	<label class="switch-input">
		<input name="switch-radio" type="radio">
		<i data-swoff-text="OFF" data-swon-text="ON"></i> Daily
	</label>
	<label class="switch-input">
		<input name="switch-radio" type="radio" checked="">
		<i data-swoff-text="OFF" data-swon-text="ON"></i> Weekly
	</label>
	<label class="switch-input">
		<input name="switch-radio" type="radio">
		<i data-swoff-text="OFF" data-swon-text="ON"></i> Monthly
	</label>
</form>

Buttons

Button tags required

These classes require the standard Bootstrap button tags.

Striped

Use any of the available button classes to quickly create a styled button.

<!-- Standard button -->
<button type="button" class="btn btn-default btn-striped">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary btn-striped">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-striped">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info btn-striped">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning btn-striped">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-striped">Danger</button>

Outline

Use any of the available button classes to quickly create a styled button.

<!-- Standard button -->
<button type="button" class="btn btn-default btn-outline">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary btn-outline">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-outline">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info btn-outline">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning btn-outline">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-outline">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link btn-outline">Link</button>

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.