Gallery
DesignOps with Coda
Share
Explore
Gallery
DesignOps with Coda
Examples

icon picker
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?

Comunicate an action
Provide users with options in experience
Call to action
Button themes
Loadness
Use case
Preview
1
CTA
Usually prompts users to sign up/register/etc.
​
2
Primary action
Next step in user job to be done.
​
3
Secondary action
May be a compliment to primary action or dismissive action
​
4
Link
Link to a different page
​
5
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
⁠
https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
⁠
⁠
⁠
https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
⁠
⁠
Examples
1
image.png
image.png
image.png
image.png
There are no rows in this table
⁠


Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.