Buttons

We recommend using the following predefined buttons. They are sorted by importance in from left to right.

Primary Secondary Link button Danger

Usages

• Primary - the standard button for call to actions, for example an action to a form. You should not have more than three of these visible at the same time. If you do, consider changing the less important ones to a secondary button style.

• Secondary - should be used for most cases where a call-to-action is not needed.

• Link - should be used for links to pages or other conent.

• Danger - should be used to identify a destructive action, such as deleting.

Button classes can be added to both <button> and <a> elements with the btn btn-* classes. They can also be outlined by replacing btn-* with btn-outline-*.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<a href="#" class="btn btn-link">Link button</a>
<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

Primary Secondary Link button Danger

Primary Secondary Danger