Buttons
What should buttons achieve?
Provide users with options in experience Button states
Rest — communicates that component is interactive and enabled.
Focus — communicates that the user has highlighted an element, using a keyboard or other input method.
Hover — communicates when a user has placed a cursor above an interactive element.
Active — or pressed state communicates that the user had tapped on the button.
Disabled — communicates that component is currently noninteractive, but can be enabled in the future.
Master file
Code
💡Names do not currently 100% match design naming conventions
💡There are more buttons in code then in the design library
button_view.less
.primary {
.normal();
background: @color-button-emphasis-background-rest;
color: @color-button-emphasis-text;
border: none;
&:hover:not(.disabled) {
// class selector used in component viewer
background: @color-button-emphasis-background-hover;
color: @color-button-emphasis-text;
}
&:active:not(.disabled) {
// class selector used in component viewer
background: @color-button-emphasis-background-active;
color: @color-button-emphasis-text;
}
.primaryInverted {
.normal();
.round-edges(@xsmall-button-height);
Resources