EmberUI buttons

Primary and secondary button design with support for multiple actions per button.

Don’t know what EmberUI is? Read an introduction.

The button design makes use of color to distinguish between primary (blue) and secondary (white) styles. The secondary button should be used by default. Only when you need to emphasize an action or draw attention to it should the primary button be used. A save button is a good example of this.

The design itself isn’t a flat design per se, but it does try to appear as flat as possible without actually being flat. Affordance is important and a completely flat design simple doesn’t have many of the affordances that a non-flat design has. It is simply too big of a compromise in terms of usability.

The design works on both dark and light backgrounds without losing any of its definition. This is achieved by using a semi-transparent background for the border.

The button design works on dark backgrounds as well without any styling changes.

There are three different sizes, each having a specific use case.

• Small: action bars, delete buttons and other low priority items
• Medium: form submission and general usage
• Large: page level actions and other actions that requires emphasis

Each of the buttons has a full set of states available to them to ensure they feel as close to native as possible.

An animation makes it obvious that the button has been pressed.

The loading state is animated to let the user know things are happening and give confidence that they don’t need to click it again. You can see this design pattern in action when you log into Guestlist.

There are both text only and icon only options. There is no style that allows you to combine both text and an icon into one button. Looking back at my work I couldn’t really find any situation where doing one or the other wouldn’t have been a better design. Having both introduces unneeded complexity. If somebody wants to make a case for supporting both I am open to hearing it.

Multiple actions on a single button

You can attach multiple actions to a single button. If you specify a primary action you will get a splitbutton, if you don’t you will get a dropbutton. For the dropbutton you will need to specify a label for the button itself.

The actions can be disabled. If you have several action that are related to each other you can group them together using a divider.

The PSDs for these designs are available on Github under an MIT license. Feel free to use them as you see fit.