Default Buttons
A button is an element that provides the user with a simple way of triggering an event when active, this can be an interaction on the current page or a link to another.
Usage
Place the button component anywhere on the page, the button can also be placed within any larger component.
The button comes in different variations and can be both enabled and disabled.
Use the modifier classes to change the style of a button, ensuring there is enough contrast between the button and background when used in a larger component.
The content of the button, including a chevron if required, is added between the opening and closing button tags.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-pressed="false" |
Identifies the button as a toggle button. When the value is false this indicates the toggle button is not pressed and when true this indicates the toggle button has been pressed. |
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-button |
The primary default button styling. Primary colour background, subtle gradient, white text. On hover: secondary colour background, text underline. |
slb-button--secondary |
The secondary button styling, used to contrast against darker backgrounds (or as a button with a CTA of lesser importance). Very light grey background, primary colour text. On hover: white background, secondary colour text. text underline. |
slb-button--super |
The Super button is used to highlight the most important button on a page. High contrast background colour, subtle dark gradient, white text. On hover: same background colour, subtle light gradient, white text, text underline. |
.slb-button - Default button.
.slb-button--secondary - Secondary button.
.slb-button--super - Super button.
buttons\buttons.hbs
<button class="slb-button [modifier class]" href="#">Button  <!-- -->></button>
Source:
components/_buttons.scss