Skip to content
Comunicate an actionProvide users with options in experienceCall to action
Share
Explore
Design System
Here's an example of how we use Coda to document our design system. We have a doc dedicated to our design principles, UI Library and UX patterns.
Buttons
What should buttons achieve?
Button themes
Loadness
Use case
Preview
CTA
Usually prompts users to sign up/register/etc.
Primary action
Next step in user job to be done.
Secondary action
May be a compliment to primary action or dismissive action
Link
Link to a different page
Danger
To indicate potentially dangerous, or destructive actions
There are no rows in this table
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
Examples
There are no rows in this table
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.