Button - UI Element

The button is one of the most common design elements that allow users to perform an action and make choices. The primary actions that buttons indicate are Save, Add, Cancel, and Close. Buttons are used in virtually all websites and apps, and their design should clearly indicate to the user what the outcome will be if they choose to press it.

‍

Based on Importance:

This hierarchy is based on the importance of the button on a page, showing the degree of visual emphasis a button will require:

1. Primary
2. Secondary
3. Tertiary Actions
   ‍

‍

Based on Visual Aspect:

Based on their visual aspect, there are 9 main types of buttons that we can encounter:

1. Elevated Button - medium emphasis
   ‍

2. ‍Filled Button - high emphasis
   ‍

3. ‍Filled Tonal Button - medium emphasis
   ‍

4. ‍Text Button - low emphasis
   ‍

5. ‍Icon Button -  low emphasis
   ‍

6. ‍Outlined Button - medium emphasis
   ‍

7. ‍Floating Action Button - high emphasis
   ‍

8. ‍Extended Floating Action Button - high emphasis
   ‍

9. ‍Segmented Button -  low emphasis
   ‍

‍

1. Elevated Button: Elevated buttons are filled with a lighter color than the background and have a shadow that is used to make them stand out. It is usually used for actions such as replying, viewing a list of items, and adding items to a cart.

2. Filled Button: Filled buttons are high-emphasis elements due to their contrasting striking color. Because they stand out so much, they are used for actions like Save and Done.

3. Filled Tonal Button: These buttons are less striking than filled buttons. They have a lighter background color alongside a darker label color and are used for similar actions to those of filled buttons.

4. Text Button: Text buttons have a low impact and should be used for actions that do not have a high priority. Common actions in which these buttons are used are Learn More and View All.

5. Icon Button: Icon buttons are small and subtle, making them suitable for actions that are not urgent such as Print and Add to Favourites.

6. Outlined Button: These buttons have the same color as the background but come with an outline, which makes them suitable for secondary actions such as View All.

7. Floating Action Button: Also known as FABs, they are the default component for a screen’s primary action. These are easily noticeable and are usually implemented for actions such as Create and Compose.

8. Extended Floating Action Button: These are similar to FABs, but we would usually add these buttons to larger pages as they are suitable for bigger screens.

9. Segmented Button: These buttons showcase different options the user can take and are considered to be tertiary actions.  

‍

• Layout

Primary buttons should be easily distinguishable from the rest and not overused. In cases in which more than one button is needed, different colors, outlines, and transparency should be used to differentiate them.

• Labels

Labeling is crucial for buttons because it helps users quickly understand what purpose they serve. The language should be accessible and straightforward.

• Common Patterns

A website or an app should be consistent with their buttons - if an action that indicates user completion is labeled with Done, then every similar action should also be labeled as Done.

• Colors

Colors have different meanings and they can heavily influence the way users interact with buttons. For example, we would not use green for a button that is meant to showcase an error.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find all types of buttons and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!