Buttons

Buttons are convenient tools when you need more traditional actions. Contextual classes like btn-primary are used to maintain consistency and create visual heirarchy.

<a href='#fakelink' class='btn btn-primary'>.btn.btn-primary</a>
<a href='#fakelink' class='btn btn-loud'>.btn.btn-loud</a>
<a href='#fakelink' class='btn btn-default'>.btn.btn-default</a>
<a href='#fakelink' class='btn btn-danger'>.btn.btn-danger</a>

Buttons with icons

Glyphs from our icons set can be assigned to buttons to convey meaning or as a visual scanning aid.

<a href='#fakelink' class='btn btn-primary'>
  <i class='icon icon-inbox pad0r'></i>Inbox
</a>
<a href='#fakelink' class='btn btn-primary'>
  <i class='icon icon-home pad0x'></i>
</a>
<a href='#fakelink' class='btn btn-primary'>
  More<i class='icon icon-arrow-right pad0l'></i>
</a>
<a href='#fakelink' class='btn btn-loud'>
  <i class='icon icon-credit-card pad0r'></i>Pay $25
</a>
<a href='#fakelink' class='btn btn-danger'>
  <i class='icon icon-trash pad0r'></i>Delete
</a>
<a href='#fakelink' class='btn btn-default'>
  <i class='icon icon-arrow-left pad0r'></i>Back
</a>

Button groups

Group a series of buttons together on a single line with the btn-group class.

<div class='btn-group clearfix'>
  <a href='#fakelink' class='btn btn-primary active'>Home</a>
  <a href='#fakelink' class='btn btn-primary'>Profile</a>
  <a href='#fakelink' class='btn btn-primary'>Messages</a>
</div>

<div class='btn-group clearfix'>
  <a href='#fakelink' class='btn btn-default active'>Home</a>
  <a href='#fakelink' class='btn btn-default'>Profile</a>
  <a href='#fakelink' class='btn btn-default'>Messages</a>
</div>

Button dropdowns

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

split
<div class='btn-group'>
  <a href='#fakelink' class='btn btn-primary dropdown-toggle col-sm-12' data-toggle='dropdown'>
    More <span class='caret'></span>
  </a>
  <ul class='dropdown-menu' role='menu'>
    <li><a href='#fakelink'>Action</a></li>
    <li><a href='#fakelink'>Another action</a></li>
  </ul>
</div>

<div class='btn-group'>
  <a href='#fakelink' class='btn btn-primary'>Action</a>
  <button class='btn btn-primary dropdown-toggle' data-toggle='dropdown'>
    <span class='caret'></span>
    <span class='sr-only'>Toggle Dropdown</span>
  </button>
  <ul class='dropdown-menu' role='menu'>
    <li><a href='#fakelink'>Action</a></li>
    <li><a href='#fakelink'>Another action</a></li>
    <li><a href='#fakelink'>Something else here</a></li>
    <li class='divider'></li>
    <li><a href='#fakelink'>Separated link</a></li>
  </ul>
</div>

Inputs with buttons

Buttons in input groups are a bit different and require one extra level of nesting. You'll need to wrap the input in an .input-group class and assign .input-group-btn to the button.

dropdown
split
<fieldset class='with-icon col-sm-6 col-xs-12'>
  <div class='input-group'>
    <i class='icon icon-envelope quiet'></i>
    <input type='text' placeholder='Email address'>
    <div class='input-group-btn'>
      <input type='submit' value='Subscribe' class='btn btn-primary'>
    </div>
  </div>
</fieldset>

<div class='input-group col-sm-6 col-xs-9'>
  <input type='text'>
  <div class='input-group-btn btn-group'>
    <a href='#fakelink' class='btn btn-primary dropdown-toggle col-sm-12' data-toggle='dropdown'>
      More <span class='caret'></span>
    </a>
    <ul class='dropdown-menu' role='menu'>
      <li><a href='#fakelink'>Action</a></li>
      <li><a href='#fakelink'>Another action</a></li>
    </ul>
  </div>
</div>

Block buttons

Composition is used to create block buttons. Use the grid system to control the size of each segment.

.dark
<a href='#fakelink' class='round keyline-all clearfix block'>
  <div class='pad1 col-xs-5 keyline-right'>
    <small class='quiet'>Kabu</small>
    <h4>Download</h4>
  </div>
  <div class='pad1 col-xs-7 fill-darken0'>
    <small class='quiet'>kabu-rails.zip</small>
    <h4>2 MB</h4>
  </div>
</a>
Made with in Norcross by the UX Team.