DesignOps with Coda

Explore

DesignOps with Coda

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

Usually prompts users to sign up/register/etc.

Next step in user job to be done.

May be a compliment to primary action or dismissive action

Link to a different page

To indicate potentially dangerous, or destructive actions

There are no rows in this table

⁠

Button states

⁠

Loading…⁠

⁠

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

⁠

Loading…⁠

⁠

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.