DesignOps with Coda

Explore

DesignOps with Coda

Examples

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

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

⁠

https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112⁠

⁠

https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7⁠

⁠

Examples

Examples

There are no rows in this table

⁠

Gallery

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.