Zac Fukuda

Design Button
Entry to the design system.

Payphone UI Japan

The UI designer Zac was still awake that evening. Technically, it was two o’clock in the morning. He was doing all of the work he had to finish by 9 a.m., before the developers got to work. Zac could make an excuse of course. But his pride prevented him from doing so. He wanted to be a good designer who brings the design on time. He wanted to be a good designer by any means after all. Who wouldn’t?

After twenty minutes passed six, instead of designing Zac was writing, an email to the developers. “Here is a final comp of design in XD file,” says the email. It was bright outside. He had pressed the send button with confidence. He had a good day sleep.

I guess many designers have had similar experiences like Zac, pressured by the deadline, struggling to make the best choice among number of design options. This is how usually design work proceeds.

The problem is what Zac thought good design is far away from it. His design was mediocre at best.

In Zac’s XD file there was no notes for the developers how the design should be implemented. Neither an artboard on instructions about components and modularization. He didn’t even dare to have a meeting with the developers, a chance to explain why he designed it, how he wanted it to be coded, what could be an issue to achieve his design. His gut tells himself “XD speaks everything,” fonts to size to colors. Everything.

As a developer who also designs, I have a sort of inclination how design should be composed and how it must be passed to developers. I’ve never tried making this inclination real before. But I am doing now. I wanted to start small. So I decided to start with button.

Button is a type of component which triggers a specific event upon pressed—physically or digitally.

Since the goal of all web/smartphone apps is to make users act on something, like purchase, sign-up, contact, any app has one button or more. It is ubiquitous. That is why button can be a good place to start, and be a good example for other designers.


There are basically two types of buttons: enclosed or non-enclosed. Personally I’d like to call the latter “plain” button. Some might call non-enclosed button as “text” button.


Enclosed buttons have boundaries. Their dominant area is very clear. It also somehow resembles physical buttons.

Enclosed button
Enclosed button

Enclosed button can also be categolized into two types: filled or outlined.

filled and outlined buttons
Filled and outlined buttons


Plain buttons have no clear boundary. In term of box modeling, they have a boundary. But that is not visibly implied.

Plain button
Plain button

Plain buttons are just texts. They are less obvious than enclosed buttons whether you can click them. Plain buttons should be carefully placed in the context. They are generally used when the action triggered is not preferable or important.

Deriving from the early days of hyperlinks in HTML, to indicate the text is clickable, sometimes plain buttons are decorated with underline.

Plain button
Underlined button

Yet in modern applications in which <a> and <button> co-exists, the use of underline must be restricted only to hyperlinks.


Here, the term “states” are used same as CSS pseudo-class such as :hover. To design buttons, one designer must consider five states of button:

  1. Normal
  2. Hover
  3. Active
  4. Focus
  5. Disabled


The normal states is a state in which the user is not interacting with the button. It is a default state.

Normal state
Normal state


The button goes to hover state when the user points cursor(mouse pointer) over it.

Hover state
Normal state to hover state

In the figure above, the background color of button becomes lighter in hover state. This is one example. You can make filled button outlined, change text color, add drop shadow, and so on.

In general, when the button is filled, the background color turns lighter in hover state than normal state.


The button goes to active state while the user is clicking the button—time between the user click the mouse, then release.

Active state
Hover state to active state

In general, when the button is filled, the background color turns darker in active state than hover state, even than normal.


The button goes to focus state after clicked, until the user interacts on the other element. It is not common to showing focus state of button to users. Usually focus state is for form elements such as input and select.

Focus state
Normal state to focus state

Some browsers have button had the visible focus state. I prefer overwriting its CSS to the normal state.

Focus state is different from the “active” or “current” state that indicates the element is acted on the intended event. The example is the tab panel controller. The active and current states are more component specific. These states are ignored in this post.


Buttons can be disabled when the users does not fulfill requirements to click, to fire the certain event.

Active state
Normal state to disabled state

In general, when the button is filled, the button turns monochromic and/or pale in disabled state.


Should button come in all sizes? My answer is no. Buttons don’t have to come in all sizes. It needs just a few. Besides navigational link, I believe in many cases two sizes of button are enough. If that’s not enough, it is acceptable to add one more size.

Button in two sizes
Buttons in two sizes
Buttons in three sizes
Buttons in three sizes

Above, I avoid to use the sizes of L, M, and S. It depends on the end sizes of three, but make the first choice of size M.

You can change the size of button for different media widths. I don’t mean you use the small size of button for smartphones, the medium size of button for laptops. I mean you design the two medium size of button for smartphone and laptop, make buttons fit in the device. This is a cumbersome process, yet brings more competency. Sometimes whether you can take this process depends on the schedule, budget and agreement among the team.


Tailwind has twenty two hues in its color palette. That is a vast amount of choices. It meets the much design/css demands with flexibility and efficiency in the real application development.

Nonetheless, less choices will make designer or developer eased deciding which color to be used.

For buttons, four main colors are sufficient. Those colors are:

  1. Brand color, for primary use
  2. Green, for preferable action
  3. Red, for cautious action
  4. Gray, for alternative action
buttons in different colors
Colors in button

Sometimes, the preferable color is substituted with cyan-blue.

buttons in different colors
Green and cyan-blue as preferable

If one brand color is one of those colors, designer must take more careful planning.


Icons in or as button
Icons in or as buttons

Nowadays, icons are uses as a part of button. The label text can have the leading or following icon, whether horizontally or vertically.

The icon can be a button itself. You have choice to enclose the icon or do not enclose.

How to design icons itself is a different topic. So it omitted here.


Border Radius

You can round the corner of button.

buttons in different border radius
Different border radius

Box Shadow

Or add shadow to make it more realistic.

buttons with box shadow
Button with box shadow


Keep the space of buttons consistent and specific. Plan these spaces before make the comp design. Your comp design will be more comprehensive.

Horizontal space between buttons
Horizontal space between buttons
Vertical space between buttons
Vertical space between buttons


By creating a comp design, you would encounter the occasion that the sequential same type of buttons does not do what they are supposed to do: distinction. In which case, you need the combo. The more variants of button you design, the more possible combinations would be. That’s a terrible practice. Some combinations relieve our minds.

Grouping buttons
Grouping buttons

Put all together

The good design specifies all variables listed above.

Let the button have six types:

  1. (Filled) button
  2. Outlined button
  3. (Filled ) icon button
  4. Outlined icon button
  5. Plain button
  6. Plain icon button

Each of which has four states:

  1. Normal
  2. Hover
  3. Active
  4. Disabled

In two sizes:

  1. Medium
  2. Small

That comes with four color themes:

  • Primary (blue)
  • Green
  • Red
  • Gray

Plus, Filled, outlined, and plain plain buttons can have:

  • No icon
  • leading icon
  • following icon
  • leading and following icon

Which gives me the total variants of:

3-type * 4-state * 2-size * 4-color * 4-icon option + 3-type * 4-state * 2-size * 4-color
= 384 + 96
= 480

No kidding. You have to design 480 variants! So here is how it comes.

You can see the following images at

button designs in blue
button designs in green
button designs in red
button designs in gray

Hex Color Codes

By creating the table of color codes, developers don’t have to pick up the colors by selecting each color of button, each state. The list also makes them code color variants easier.

Hex color codes

Group & Space

Don’t forget to specify what combination of button types is allowed, how each button is to be spaced. No more rectangles to measure the space.

Grouping button and their space


Having a degree in engineering, I have tendency to put design into blueprint.

Blueprint - button
Blueprint - small button

The goal of making these design is not the perfection, but consistence. Consistence throughout the project, among the team both designers and developers.