Buttons are divided into two main component groups : buttons and links. Buttons are more likely to be used for principal and secondary calls to action. Links are for complementary information such as "read more" and external links.
We recommend using the buttons associated with the colours "primary", "secondary" and "light" as a priority.
Main theme buttons
COPY
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-light">Light</button>
These buttons can be declined in outlines.
COPY
<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-light">Light</button>
The size depends on the use, we prefer large buttons for prominent actions to smaller buttons for secondary actions.
COPY
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Standard button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
Create block level buttons—those that span the full width of a
parent—by adding .btn-block.
COPY
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
<button type="button" class="btn btn-light btn-block">Block level button</button>
<button type="button" class="btn btn-outline-primary btn-block">Block level button</button>
<button type="button" class="btn btn-outline-secondary btn-block">Block level button</button>
<button type="button" class="btn btn-outline-light btn-block">Block level button</button>
You can add an icon to your button to reinforce its meaning.
COPY
<button type="button" class="btn btn-primary">
Primary <i class="icon-add ms-1"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="icon-add me-1" ></i> Primary
</button>
<button type="button" class="btn btn-primary">
<i class="icon-add"></i>
</button>
If the button component is too bulky, you can use its "link" version. The same color rules apply.
COPY
<a class="btn btn-link-primary" href="#" role="button">Link primary</a>
<a class="btn btn-link-secondary" href="#" role="button">Link secondary<i class="icon-east valign-btn-icon ms-1"></i></a>
<a class="btn btn-link-light" href="#" role="button"><i class="icon-add valign-btn-icon me-1"></i>Link light</a>
The disabled state allows a button to be displayed while waiting for a valid condition to reactivate it.
COPY
<button type="button" class="btn btn-primary" disabled>Primary</button>
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-light" disabled>Light</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary outline</button>
<button type="button" class="btn btn-outline-secondary" disabled>Secondary outline</button>
<button type="button" class="btn btn-link-primary" disabled>Primary link</button>
<button type="button" class="btn btn-link-secondary" disabled>Secondary link</button>