Button

Default Values

jsx

// Button selectors.
$button-selector: ".button" !default;
$button-link-selector: ".link" !default;
$button-theme-selector-prefix: "." !default;

// Button properties.
$button-transform: none !default;
$button-visited-transform: $button-transform !default;
$button-focus-transform: $button-transform !default;
$button-hover-transform: $button-transform !default;
$button-active-transform: scale(0.95) !default;
$button-disabled-transform: $button-transform !default;

Button Properties

jsx

--#{root-defaults.$prefix}button-min-width
--#{root-defaults.$prefix}button-min-height
--#{root-defaults.$prefix}button-padding-x
--#{root-defaults.$prefix}button-padding-y
--#{root-defaults.$prefix}button-padding
--#{root-defaults.$prefix}button-font-size
--#{root-defaults.$prefix}button-transition
--#{root-defaults.$prefix}button-transition-reduced-motion

Transform Properties

jsx

--#{root-defaults.$prefix}button-transform
--#{root-defaults.$prefix}button-visited-transform
--#{root-defaults.$prefix}button-focus-transform
--#{root-defaults.$prefix}button-hover-transform
--#{root-defaults.$prefix}button-active-transform
--#{root-defaults.$prefix}button-disabled-transform

Background Properties

jsx

--#{root-defaults.$prefix}button-background
--#{root-defaults.$prefix}button-visited-background
--#{root-defaults.$prefix}button-focus-background
--#{root-defaults.$prefix}button-hover-background
--#{root-defaults.$prefix}button-active-background
--#{root-defaults.$prefix}button-disabled-background

Text Properties

jsx

--#{root-defaults.$prefix}button-color
--#{root-defaults.$prefix}button-visited-color
--#{root-defaults.$prefix}button-focus-color
--#{root-defaults.$prefix}button-hover-color
--#{root-defaults.$prefix}button-active-color
--#{root-defaults.$prefix}button-disabled-color

Border Properties

jsx

--#{root-defaults.$prefix}button-border-width
--#{root-defaults.$prefix}botton-border-style
--#{root-defaults.$prefix}button-border
--#{root-defaults.$prefix}button-border-radius

Border Colour Properties

jsx

--#{root-defaults.$prefix}button-border-color
--#{root-defaults.$prefix}button-visited-border-color
--#{root-defaults.$prefix}button-focus-border-color
--#{root-defaults.$prefix}button-hover-border-color
--#{root-defaults.$prefix}button-active-border-color
--#{root-defaults.$prefix}button-disabled-border-color

Button ​

Button