Buttons

Buttons allow users to take actions and make choices, with a single click.

Primary Button

Copy example. Contains actions that are most important or common for the user, including default actions. Primary button is primary visually, not necessarily with position or order relating to secondary button.

<button class="btn btn-primary">Primary button </button>

Secondary Button

Contains actions that are most important or common for the user, including default actions. Primary button is primary visually, not necessarily with position or order relating to secondary button.

<button class="btn btn-secondary">Secondary Button</button>

Dark Button

Contains actions that are most important or common for the user, including default actions. Primary button is primary visually, not necessarily with position or order relating to secondary button.

<button class="btn btn-dark">Dark Button</button>

Outline Secondary Button

Contains actions that are most important or common for the user, including default actions. Primary button is primary visually, not necessarily with position or order relating to secondary button.

<button class="btn btn-outline-secondary">Outline Button</button>

Small Button

<button class="btn btn-primary btn-sm">Button text</button>

Medium Button

<button class="btn btn-primary btn-md">Button text</button>

Large Button

<button class="btn btn-primary btn-lg">Button text</button>

Accessibility

Make it clear what this button does for the user.

Make it clear what this button does for the user.
Use at most two buttons in one group.
Attribute indicating if the element should be.

DON'T

Use more than two words for call to action.

First letter of each sentence defaults to a capital letter.

Attribute indicating if the element should be.

Classes

Complete list of all CSS classes for the component.

Name	Class
Primary Button	`btn btn-primary`
Secondary Button	`btn btn-secondary`
Dark Button	`btn btn-dark`
Outline Secondary Button	`btn btn-outline-secondary`
Small Button	`btn btn-small`
Medium Button	`btn btn-medium`
Large Button	`btn btn-large`