Atoms

Buttons

Block

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Colors

These are notes associated with this button component.

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

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


<button type="button" class="btn btn-alt1">Alt1</button>
<button type="button" class="btn btn-alt2">Alt2</button>
<button type="button" class="btn btn-alt3">Alt3</button>
<button type="button" class="btn btn-alt4">Alt4</button>
<button type="button" class="btn btn-alt5">Alt5</button>

<button type="button" class="btn btn-alt1-secondary">Alt1 Secondary</button>
<button type="button" class="btn btn-alt2-secondary">Alt2 Secondary</button>
<button type="button" class="btn btn-alt3-secondary">Alt3 Secondary</button>
<button type="button" class="btn btn-alt4-secondary">Alt4 Secondary</button>
<button type="button" class="btn btn-alt5-secondary">Alt5 Secondary</button>

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

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

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

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

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

Ladda

<div ng-controller="LaddaButtonController">
	<button type="button" ladda="loginLoading" ng-click="login()" class="btn btn-alt1">Alt1</button>
	<button type="button" ladda="loginLoading" ng-click="login()" class="btn btn-alt2">Alt2</button>
	<button type="button" ladda="loginLoading" ng-click="login()" class="btn btn-alt3">Alt3</button>
	<button type="button" ladda="loginLoading" ng-click="login()" class="btn btn-alt4">Alt4</button>
	<button type="button" ladda="loginLoading" ng-click="login()" class="btn btn-alt5">Alt5</button>
</div>

Size

<p>
	<button type="button" class="btn btn-primary btn-lg">Large button</button>
	<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
	<button type="button" class="btn btn-primary">Default button</button>
	<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
	<button type="button" class="btn btn-primary btn-sm">Small button</button>
	<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
	<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
	<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Social

<button type="button" class="btn btn-social btn-facebook">
  <span class="fa fa-facebook"></span> Alt1
</button>
<button type="button" class="btn btn-social btn-google"><span class="fa fa-google"></span> Alt2</button>
<button type="button" class="btn btn-social btn-linkedin"><span class="fa fa-linkedin"></span> Alt3</button>

Checkbox

<label>
	<input type="checkbox" /> Checkbox
</label>

Labels

Label alt1 Label alt2 Label alt3 Label alt4 Label alt5 
<span class="label label-alt1">Label alt1</span>
<span class="label label-alt2">Label alt2</span>
<span class="label label-alt3">Label alt3</span>
<span class="label label-alt4">Label alt4</span>
<span class="label label-alt5">Label alt5</span>

Lists

Ordered

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<ol>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ol>

Unordered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ul>

Loader

<loader></loader>

Paragraph

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
	nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>

Radio

<label>
	<input type="radio" name="groupName" id="radio1" /> Radio 1
</label>

<label>
	<input type="radio" name="groupName" id="radio2" /> Radio 2
</label>

<label>
	<input type="radio" name="groupName" id="radio3" /> Radio 3
</label>

Select

<select name="" id="">
	<option value="">Option 1</option>
	<option value="">Option 2</option>
	<option value="">Option 3</option>
	<option value="">Option 4</option>
	<option value="">Option 5</option>
</select>

Text Input

<label for="textInput">Text input</label>
<input type="text" id="textInput" />

Textarea

<textarea name="" id="" cols="30" rows="10"></textarea>