A button is used to trigger an action.
Do not use a button to trigger navigation. In this case, use a link.
There are four types of styling for buttons:
Buttons come in different sizes. A button can have the default size, there is also a large variant and a small variant. See the examples. Use the size of a button to indicate its importance relative to other user interface components.
By default, the width of a button is automatically resized depending on the length of the label. Buttons can also behave as a block. In this case they stretch to the available width in the surrounding element. See the exammples.
Buttons can have an icon, aligned at the right-hand side or at the left-hand side. The icon can help the user identify a certain action. However, the icon should not be needed to understand the action. In all cases, the label of the button itself should be clear by itself and should represent the corresponding action.
<button
type="button"
class="button {{ 'button-' ~ type }} {{ modifier }} {% if icon %}button-icon{% endif %}"
{% if disabled %}
disabled
{% endif %}
>
{{ text }}
</button>
<button type="button" class="button button-secondary button-block icon-download ">
Button-block icon-download
</button>
{
"text": "Button-block icon-download",
"type": "secondary",
"modifier": "button-block icon-download",
"disabled": false
}
////
///
/// This file defines the bulk of all button styling.
///
/// @group buttons
/// @author Gert-Jan Meire
///
////
///
/// Button - small variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-small {
@include small-text;
min-height: 1.9rem;
letter-spacing: .02em;
}
///
/// Button - medium variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-medium {
@include medium-text;
min-height: 2.2rem;
letter-spacing: .025em;
}
///
/// Button - large variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-large {
@include large-text;
min-height: 2.4rem;
letter-spacing: .03em;
}
///
/// Button - extra large variant.
///
/// @since 5.0.20
/// @group buttons
/// @access public
/// @author Thomas De Vriese
///
@mixin button-extra-large {
@include extra-large-text;
min-height: 3.6rem;
padding: 1.2em 3.6em;
letter-spacing: .03em;
line-height: 1.7;
}
///
/// Button - disabled variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
/// @require color
///
@mixin button-disabled {
[class*='cs--'] & {
border: 0;
background-color: color('dark-gray', -3);
color: color('white');
box-shadow: none;
&:hover {
background-color: color('dark-gray', -3);
color: color('white');
box-shadow: none;
cursor: not-allowed;
}
}
}
///
/// General button styling.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button {
@include button-medium; // Default.
@include bold-text;
padding: 0 2.6em;
transition: background-color .2s ease-in-out, color .2s ease-in-out, box-shadow .1s ease-in-out;
border: 2px solid;
border-radius: border-radius('radius-1');
font-family: $default-font-family;
text-align: center;
cursor: pointer;
&:disabled {
@include button-disabled;
}
&.button-small {
@include button-small;
}
&.button-medium {
@include button-medium;
}
&.button-large {
@include button-large;
}
&.button-extra-large {
@include button-extra-large;
}
&.button-block {
@include button-block;
}
&[class*="icon-"] {
@include button-icon;
&.icon-left {
@include button-icon-left;
}
}
}
///
/// Makes a button display block instead of inline.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-block {
display: inline-block;
width: 100%;
}
///
/// Define a button with an icon.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-icon {
display: inline-flex;
position: relative;
align-items: center;
justify-content: space-between;
padding: 0 .8em 0 1.2em;
line-height: 1.8em;
text-align: left;
// Padding fix specificly for IE11.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
padding: .3em .8em 0 1.2em;
line-height: 1.6;
}
&::before {
order: 1;
margin-left: .5rem;
// Fix for IE11 flex order property.
float: right;
font-size: 1.8em;
// Font-size specificly for IE11.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
font-size: 1.2rem;
}
}
&::after {
padding-right: .2rem;
content: '';
}
}
///
/// Define a button with an icon on the left side.
///
@mixin button-icon-left {
&::before {
order: unset;
margin-right: .5rem;
margin-left: 0;
// Fix for IE11 flex order property.
float: left;
}
}
.button,
input[type="button"],
input[type="submit"] {
@include button;
-webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
}