Ghost Button variant
The button element provides a simple way of triggering an event. The Ghost button variant provides an additional secondary button style when the background colour doesn't provide enough contrast for the default button.
Usage
Place the ghost button component anywhere on the page, the button can also be placed within any larger component. The default and secondary buttons should be used whenever possible. If the background of the area being used is too close in colour to the default button you can use the ghost button in its place.
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--ghost |
The Ghost button is used when there needs to be more than one button displayed on the same colour block and the background colour is not a high enough contrast to the primary button. The example below is the default version where the background can be any colour, or even a pattern or image. |
.slb-button--ghost - Ghost button.
buttons\buttons-ghost.hbs
<!-- divs added here for demonstration purposes only -->
<div class="ghost-button-background">
<button class="slb-button [modifier class]" href="#">Ghost Button <!-- -->></button>
</div>
<div class="ghost-button-background ghost-button-background--light-blue">
<button class="slb-button [modifier class]" href="#">Ghost Button <!-- -->></button>
</div>
<div class="ghost-button-background ghost-button-background--striped">
<button class="slb-button [modifier class]" href="#">Ghost Button <!-- -->></button>
</div>
Source:
components/_buttons.scss