Buttons

Buttons are used to carry out actions. Use them when you should enable or initiate an immediate action within your application e.g. “OK”, ”Save”, ”Continue” or ”Submit.” Read more about buttons in the UX Guidelines.

Use the button classes on an <a>, <button>, or <input> element. Also you can use any of the available button classes to quickly create a styled button: .btn-default or .btn-primary or even to large version of it: .btn-lg

Use the primary (green) button to:

  • Highlight the primary action in the screen, which shall be the main and/or finalising action
  • Emphasise either normal buttons, menu buttons or split buttons

Design

Use any of the available button classes to quickly create a styled button. For the default style you can simply add .btn and for the primary style add .btn-primary

Directional buttons

Add .left or .right class together with .btn class for the direction needed.

Use when:

  • To indicate the direction of a flow, e.g. to go to the next or previous step in a wizard
  • To indicate the direction in which data will change when an action will take place, e.g. to move data from one grid to another

Sizes - Large buttons

Fancy larger buttons? Add .btn-lg for a larger size.


Active state

Buttons will appear pressed (with a darker background and darker border) when active. This will be applied via :active or .active class.

Disabled state

Make buttons look unclickable by adding a custom colour. Add .disabled class on your button or add the disabled attribute to <button> or <input> buttons.

Block button

Create block level buttons, those that span the full width of a parent, by adding .btn-block.

				
<!-- Button classes on a, button or input tags -->
<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

<!-- Default buttons - .btn -->
<button class="btn" type="submit">Default</button>

<!-- Primary buttons - .btn.btn-primary -->
<button class="btn btn-primary" type="submit">Primary</button>

<!-- Directional buttons - .left or .right -->
<button class="btn left" type="submit">Default left</button>
<button class="btn right" type="submit">Default right</button>

<button class="btn btn-primary left" type="submit">Primary left</button>
<button class="btn btn-primary right" type="submit">Primary right</button>

<!-- Large buttons - .btn-lg -->
<button class="btn btn-lg" type="submit">Default large</button>
<button class="btn btn-primary btn-lg" type="submit">Primary large</button>

<!-- Active state on buttons - .active -->
<button class="btn active" type="submit">Default active</button>
<button class="btn btn-primary active" type="submit">Primary active</button>

<!-- Disabled state on buttons - .disabled -->
<button class="btn disabled" type="submit">Default disabled</button>
<button class="btn btn-primary disabled" type="submit">Primary disabled</button>