Buttons

General information

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/selected. This will be applied via .active class, and include the aria-pressed="true" attribute to indicate the state of the element to assistive technologies.

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.

<a> tag don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled

For disabled buttons, that include .disabled class and <a> tag, they should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.

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 type="submit" class="btn">Button</button>
<input type="button" class="btn" value="Input">
<input type="submit" class="btn" value="Submit">

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

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

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

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

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

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

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