Buttons are used to interact with the application (e.g., to submit forms) or navigate between pages.


FULL TABLE OF CONTENT

Introduction

  1. The Anatomy 1.1 Base (Container) 1.2 The Content 1.2.1 Text (Text Label) 1.2.2 The Icon 1.2.3 Other Content 1.3 Paddings and Spacings
  2. Classification 2.1 Types and Variants 2.1.1 Types 2.1.2 Variants 2.2 Style 2.2.1 Visual styles 2.2.2 Shape 2.2.3 Size
  3. States and Behaviors
  4. Using buttons 4.1 Fitting the layout (Width) 4.1.1 Edge cases 4.1.2 Minimum lengths 4.2 Combining actions 4.3 Order, grouping, alignment
  5. Button language
  6. Accessibility 6.1 Disturbed vision 6.2 Cognitive issues 6.3 Manual limitations

Introduction

In 2021 the button still remains one of the most essential elements of the user interface. Since the ‘80s, this basic component has been evolving along with other technologies which became available (such as the mouse or a touch screen) and current design trends. In this chapter, we attempt to draw a different view of the button - more universal and detached from trends that come and go.

Fig. 1. Selected examples of buttons as they evolved throughout time: (1) MacOS 9.0 button, (2) Popular button style after 2010, (3) Contemporary button.

Fig. 1. Selected examples of buttons as they evolved throughout time: (1) MacOS 9.0 button, (2) Popular button style after 2010, (3) Contemporary button.

Technically a button is simple in its form. It is relatively easy to create a sophisticated style (often overwhelmingly so) by using different gradients or a combination of shadows, but is this what’s the clue here? Its looks may be perceived as the most important feature of a button, and indeed it is crucial, but here, most of all, we want to present a well-designed, coherent structure of buttons with clearly defined functions.

Let’s shed some light on buttons and their anatomy, usage contexts, semantic meaning, and how they coexist to help answer the following questions: