This design system includes two styles of buttons.
Interact with the examples below to view the expected behaviour of each button type.
Primary buttons should be used sparingly to indicate the most important call-to-action for a user on a page. The secondary button is suitable for situations where no more action is needed by the user after clicking the button.
Make sure to provide descriptive text content, or a descriptive aria-label for buttons with only icons, and use the provided colours to ensure appropriate colour contrast.
<!-- Primary Button -->
<button type="button" class="btn-main">Primary</button>
<!-- Secondary Button -->
<button type="button" class="btn-second">Secondary</button>