Button

Pilot · HES source-aligned

Buttons let people complete actions within a task.

Implementation status: These examples now render HES Button pilot styling through Bootstrap's native classes. The observed Advice Hub colours, geometry and states are a working reference, not approved HES-wide values; F+ state mappings, focus behaviour and icon assets remain under review.

When to use

Use a button to perform an action such as submitting a form or saving changes. Use a semantic link for navigation to another location. Labels should state the action clearly, such as Continue or Save changes.

Priority and appearance

Primary identifies the most prominent action in a task context. Secondary is supporting. Both can use Filled or Outline treatments; priority is not the same thing as appearance.

Variants

Filled

Bootstrap's native .btn-primary and .btn-secondary variants.

Primary and Secondary · Filled

HTML

<button type="button" class="btn btn-primary">Continue</button>
<button type="button" class="btn btn-secondary">Cancel</button>

Outline

Bootstrap's native .btn-outline-primary and .btn-outline-secondary variants.

Primary and Secondary · Outline

HTML

<button type="button" class="btn btn-outline-primary">Save draft</button>
<button type="button" class="btn btn-outline-secondary">Back</button>

States

Hover, keyboard focus and pressed are browser interaction states, not separately authored HTML variants. Use the actual buttons above to inspect pointer and keyboard behaviour. The initial styling follows the existing Advice Hub reference. Final F+ state colours and browser focus behaviour are still under review.

Disabled

Use the native disabled attribute when an action genuinely cannot be performed. Consider explaining unmet requirements rather than unnecessarily blocking an action.

HTML

<button type="button" class="btn btn-primary" disabled>Continue</button>

Optional icon

The Button pilot includes an optional right chevron. The approved asset and spacing have not yet been settled, so no icon implementation is presented here.

Accessibility

Use a native <button> element for actions, maintain meaningful visible labels and a visible keyboard focus indicator, and test at narrow widths and increased text size. Disabled and loading are different behaviours.

Implementation

Use Bootstrap's native .btn class and documented modifier classes. The same compiled stylesheet applies provisional HES treatments through Bootstrap's component CSS variables. The pilot values come from one local reference file; they will be replaced by approved semantic tokens once decisions are made.