Buttons as tags
The button component has the ability to be placed on tags such as anchors or inputs, depending on the user situation.
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.
Note on disabled buttons as anchor tags: Anchor tags don't support the disabled attribute, so we include the .[namespace]-button--disabled class to make it appear disabled. In addition, we disable the pointer-events property (for browsers that support it).
Accessible attributes
| Accessible attribute | Description |
|---|---|
role="button" |
Identifies the element is a button, this should be used when the button element is not being used. |
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. |
slb-button--secondary |
The secondary button styling used to contrast against darker backgrounds. |
slb-button--super |
The Super button is used to highlight the most important button on a page. |
.slb-button - Default button.
.slb-button--secondary - Secondary button.
.slb-button--super - Super button.
buttons\buttons-tags.hbs
<a class="slb-button [modifier class]" href="#">Anchor as a button</a>
Source:
components/_buttons.scss