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-primary button-small ">
Button-small
</button>
{
"text": "Button-small",
"type": "primary",
"modifier": "button-small",
"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 medium-text();
padding: 4px 10px;
line-height: 175%;
}
///
/// Button - medium variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-medium {
@include medium-text();
line-height: 175%;
}
///
/// Button - large variant.
///
/// @since 3.0.0
/// @group buttons
/// @access public
/// @author Gert-Jan Meire
///
@mixin button-large {
@include large-text();
padding: 10px 20px;
line-height: 177.778%;
&::before {
font-size: 1.5rem;
}
}
///
/// Button - extra large variant.
///
/// @since 5.0.20
/// @group buttons
/// @access public
/// @author Thomas De Vriese
///
@mixin button-extra-large {
@include large-text();
padding: 25px 26px;
line-height: 177.778%;
&::before {
font-size: 1.5rem;
}
}
///
/// 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('gray', -5);
background-image: none;
color: color('gray', -2);
&:hover {
background-color: color('gray', -5);
color: color('gray', -2);
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 semi-bold-text;
padding: 8px 15px;
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;
}
}
}
///
/// Defines hover behavior for a button.
///
/// @since 6.0.0
/// @group buttons
/// @access public
/// @author Lennart Van Vaerenbergh
///
@mixin button-hover {
transition: .3s;
background-repeat: no-repeat;
background-size: 0 100%;
&:hover {
background-size: 100% 100%;
}
}
///
/// 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;
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;
}
&::before {
order: 1;
margin-left: 8px;
float: right; // Fix for IE11 flex order property.
font-size: 1.2rem;
}
}
///
/// Define a button with an icon on the left side.
///
@mixin button-icon-left {
&::before {
order: unset;
margin-right: 8px;
margin-left: 0;
// Fix for IE11 flex order property.
float: left;
}
}
.button,
input[type="button"] {
@include button;
@include button-hover;
-webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
}
input[type="submit"],
button[type="submit"] {
@extend %button-secondary;
}