button-theme
@include button-theme(
$btnTheme,
$outline,
$background,
$override,
$hover
);
Description
Assign/reassign a button theme from Design > Buttons, or add your own styling. This mixin can be helpful if you want to change a specific button to a different theme where you can't change in the DOM, or if you want to add an extra button class (a button--tertiary
perhaps?) that you can add to buttons in a Button Row block.
Parameters
$btnTheme
(button theme | button map | shades | color)
The button theme you want to implement.
$outline
(boolean | 'force')
Whether or not the button should be outlined. It will default to the button theme default. force
can be used to ensure a button is outlined when the default button theme is set to be filled.
Default: null
$background
(shades | color)
When outline is set to true
or force
, the colour will be used to check accessibility for the buttons text color.
Default: white
$override
(boolean)
Setting this to true is sometimes needed to enforce the new styles.
Default: false
$hover
(boolean)
Whether or not to to include the generate hover styles for the button.
Default: true
Return
(CSS) Styles to theme button.
Examples
Change form buttons to use secondary buttons, instead of primary
.form .button {
@include button-theme(secondary);
}
Outline buttons within the Profile Controls block
.profile-controls .button--primary {
@include button-theme(
$btnTheme: primary, /* State base theme */
$outline: force /* Force outline */
);
}
Set up a custom button class helper using a color map
.button--tertiary {
@include button-theme(
$btnTheme: (
color: #fff, /* White text color */
background: #29328f /* Dark navy background color */
)
);
}
Updated almost 4 years ago
See what else you can do with buttons: