Disabled Button
A Disabled button is an element that shows the event of the button is currently not available.
Usage
Place the disabled button component anywhere on the page, the button can also be placed within any larger component
Use the modifier classes to change the style of a disabled button, ensuring there is enough contrast between the button and background when used in a larger component.
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. |
aria-disabled="true" |
Identifies the button is currently disabled when the value is true. |
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-disabled.hbs
<button class="slb-button [modifier class]" href="#" aria-disabled="true" disabled="disabled">Button</button>
Source:
components/_buttons.scss