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--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-disabled.hbs
<button class="slb-button [modifier class]" href="#" aria-disabled="true" disabled="disabled">Button <!-- -->></button>
Source:
components/_buttons.scss