Buttons

The Button component guides the user to take a specific action. Unlike links, buttons are for primary call to actions or to submit forms.

Usage guidance

Button colours should not be changed. If there is a need for a new colour of button always check the accessibility of the colours
The disabled state for buttons has been intentionally left off. We avoid having buttons in a disabled state.

Base classes

HTML

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

Sizes

HTML

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Variants

HTML

<!-- Grassy green -->
<button type="button" class="btn btn-info">Button</button>
<!-- Deep rose -->
<button type="button" class="btn btn-danger">Button</button>
<!-- Honey yellow -->
<button type="button" class="btn btn-success">Button</button>

Close button

HTML

<button type="button" class="btn-close" aria-label="Close"></button>