Earlier in this lesson, we discussed design patterns in depth. Design patterns are made up of smaller, more static design components, such as buttons, menus, and form fields, which are typically documented in a brand’s design system.

As an example, let’s think about the role of buttons in digital design.

Within early digital interfaces, many buttons were skeuomorphic and imitated physical designs. For example, a play button on a music player might have resembled the play button on a radio.

As digital design has evolved, users have come to recognize both skeuomorphic and flat design buttons as clickable elements that will cause some sort of action, whether it’s navigating to the next step in a flow, submitting a form, or activating a feature.

In summary, buttons are clickable elements often used to highlight certain calls-to-action or links on a website. They are a common design pattern used across all kinds of websites and applications.

In designing buttons, we should consider questions like:

Where does a button make sense over a text link or other clickable element?
Buttons are associated with some of the actions that a user needs to take. For our flight booking example, this might mean using buttons for submitting the search form and to book the selected flight.

What text should be included on the button?
Text on buttons should be concise and make it clear what action will occur once the button is clicked.

How will users know the state of the button?
Does the button change color or style on hover or when it is pressed?

What different types of buttons will exist in this design system?
Should there be different button styles for primary and secondary calls-to-action (CTAs)? What color should a “delete” or “disable” button be, versus a button that advances a positive action? Does the “submit” button for a form have a special style compared to other call-to-action buttons?

As we design buttons, we can reference some existing design pattern listings, such as Buttons on Patternfly and Buttons on UI Guideline.