Buttons

Primary Button

Use for the main call-to-action on a page. There should typically be only one primary button visible at a time.

<a href="#" class="btn btn-primary">Primary button</a>
<a href="#" class="btn btn-primary btn-lg">Large primary</a>
<a href="#" class="btn btn-primary btn-sm">Small primary</a>

Secondary Button

Use for secondary actions that complement a primary action. The outlined style provides visual distinction while maintaining prominence.

<a href="#" class="btn btn-secondary">Secondary button</a>
<a href="#" class="btn btn-secondary btn-lg">Large secondary</a>
<a href="#" class="btn btn-secondary btn-sm">Small secondary</a>

Tertiary Button

Use for less prominent actions. The text-link style minimises visual weight while maintaining clickable affordance.

<a href="#" class="btn btn-tertiary">Tertiary button</a>

Start Button

Use for starting a service or process. The arrow indicates forward progression. This is used prominently on service landing pages.

<a href="#" class="btn btn-start">Start now</a>

Button States

All buttons have consistent hover, focus, and active states. The focus state uses the distinctive yellow background with black outline for maximum visibility.

Usage Guidelines

Do

• Use clear, action-oriented text (e.g., "Save and continue" not "Submit")
• Use only one primary button per section
• Position primary buttons prominently
• Keep button text concise (2-4 words)

Don't

• Don't use buttons for navigation (use links instead)
• Don't disable buttons without explanation
• Don't use multiple primary buttons together
• Don't use vague text like "Click here"

Accessibility

• All buttons have visible focus states meeting WCAG 2.1 requirements
• Button text provides clear indication of the action
• Colour contrast meets 4.5:1 minimum ratio
• Touch targets are at least 44x44 pixels

CSS Classes

/* Base button class */
.btn { }

/* Variants */
.btn-primary { }
.btn-secondary { }
.btn-tertiary { }
.btn-start { }

/* Sizes */
.btn-sm { }
.btn-lg { }