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.
Use font icons and utility classes to add and style icons before and/or after the button text.
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--outline |
The outline button is multi-purpose button that can be used on light and dark backgrounds. |
.slb-button - Default button.
.slb-button--secondary - Secondary button.
.slb-button--outline - Outline button.
buttons\buttons.hbs
<button class="slb-button [modifier class]" href="#">Button <!-- -->></button>
Source:
components/_buttons.scss