<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>With icon</span>
</span>
</button>
<button type="{{#if type}}{{type}}{{else}}button{{/if}}"
{{#if modifier}} class="{{ modifier }}"{{/if}}
{{#if icon-only}} aria-label="{{text}}"{{/if}}
{{#if disabled}} disabled{{/if}}
{{#if prototype-url}} data-prototype-url="{{path prototype-url}}"{{/if}}
>
<span>
{{#if icon}}
{{> @svg}}
{{/if}}
{{#unless icon-only}}
<span>{{text}}</span>
{{/unless}}
</span>
</button>
{
"text": "With icon",
"icon": "save"
}
/**
* Buttons
*/
@media screen {
button {
background-color: var(--btn-color);
border-radius: var(--form-radius);
border: 1px solid var(--btn-color);
color: var(--btn-text);
font-size: inherit;
font-family: inherit;
padding: 0.25em 0.75em;
display: inline-block;
vertical-align: middle;
box-shadow: var(--button-shadow);
position: relative;
}
/**
* Button states
*/
button,
button * {
cursor: pointer;
}
/* Overlay */
button::after {
content: "";
background-color: var(--white);
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
opacity: 0;
transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.5, 1);
}
button.alt::after {
background-color: var(--mid-grey);
}
button:hover::after,
button:focus::after {
opacity: 0.07;
}
/* Button pressed state */
button:active {
box-shadow: var(--button-shadow-pressed);
}
/* Button layout */
button > span {
display: flex;
align-items: center;
justify-content: center;
cursor: default;
}
/* Button icon */
button > span > .icon {
flex: 0 0 auto;
}
/* Button text label */
button > span > span {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button.alt {
background-color: var(--btn-alt-color);
border-color: var(--btn-alt-border);
color: var(--btn-alt-text);
}
button span {
margin: 0;
}
button .icon {
height: 1.2em;
width: 1.2em;
margin: 0.15em 0;
}
button .icon + span {
margin-left: 0.25em;
}
/* RTL */
[dir="rtl"] button .icon + span {
margin-left: 0;
margin-right: 0.5em;
}
button[disabled] {
background-color: var(--light-grey);
color: var(--mid-grey);
border: 1px solid var(--light-grey);
}
/**
* Button sizes
*/
/* Extra-extra small ಠ_ಠ */
button.size-xxs {
font-size: 0.8em;
padding: 0.1em 0.4em;
}
/* Extra small */
button.size-xs {
font-size: 0.86em;
padding: 0.1em 0.5em;
}
/* Small */
button.size-s {
padding: 0.1em 0.5em;
}
/* Large */
button.size-l {
padding: 1em 1.125em;
}
}
/**
* prototypeButtons
*
* Listen for click event across the document & trigger on
* buttons that have a data-prototype-url attribute.
*/
'use strict';
(function () {
document.addEventListener('click', function (event) {
if (event.target.matches('[data-prototype-url], [data-prototype-url] *')) {
var button = event.target.closest('[data-prototype-url]');
var buttonURL = button.getAttribute('data-prototype-url');
window.location.href = buttonURL;
}
}, false);
})();
Buttons are divided into two variants; primary, which shall be used for primary actions, like saving etc. The second is the alternative button, which the name suggests are for alternative actions.
Buttons can be shown as text only, text plus icon as well as icon only. Take care with the use of the latter as usability suffers when users have to rely on only an icon to understand what function a button has.
All button variants are styled to support a disabled state.