What is a button component?

Buttons help users take action, such as sending an email, sharing a document, or liking a comment.

1. Button labels express what action will occur when the user interacts with it.

2. When designing buttons, consider the permutations of different states, styles, and sizes. See table below.

3. Importance (primary buttons, secondary buttons, tertiary buttons, disabled buttons, destructive buttons)

4. State (Default, disabled)

5. Size (Horizontal padding, Stretch, Wrap to text, Small buttons, Large buttons)

Buttons are commonly used for Form submission, Call to action, Confirmation and alerts.

Bonus: Here is what Mobbin's button design variants looks like in our current design system.

We've created a table that organizes types of buttons found across real-world examples. For visual examples, scroll down to the next section.

Note: This is dependant on each company's design system, and there is often a lot of 'convention breaking', or buttons that are surprising and delightful, but aren't listed in this table.

1. Primary Button: Highlights the main action on a screen, usually in the brand's primary color. Top of the hierarchy when it comes to button styling. Example Use Case: "Submit" or "Save" buttons in forms.
2. Secondary Button: Used for less important actions, often styled with less prominence. Example Use Case: "Cancel" or "Back" buttons.
3. Tertiary Button: Usually border outline buttons, for low-emphasis actions. Sometimes known as outline buttons or ghost buttons. Example Use Case: "Learn More" or "Preview" buttons.
4. Quaternary Button: Usually text-only buttons without border or fills, for low-emphasis buttons - these buttons might be easy to miss. Bottom of the hierarchy for button styling. Example Use Case: "Forgot Password?" or "See Details."
5. Icon Button: Contains only an icon to represent an action. Example Use Case: "Search" or "Share" icons.
6. Destructive Button: A button that indicates a potentially destructive and irreversible action. Example Use Case: "Delete", "Are you sure" buttons.
7. Disabled Button: A non-interactive button, indicating an action isn’t available. Example Use Case: "Submit" button before required fields are filled.

What is the anatomy of a button?

What are the design variants of a button?

We studied over 40,000+ button UI components on Mobbin, from real-world examples and found the following variants.

1. Standard button variations: Container types, Icons, Shapes

Button container types

The most common button container is the classic filled button, also known as the primary button or primary action - this often comes in the app's primary color. Plain, old and boring - but it works!

It is a high emphasis button that is usually close to the bottom of the app's screen, which makes it easy for users interact with using one hand.

You can consider using outlined buttons if the action isn't of paramount importance. Having more than one button might clutter your user interface. But an outlined button helps to reduce that cognitive overload.

Finally, if you are feeling playful, consider using a elevated button design. This gives your app a "raised" effect or 3D illusion, which makes it more eye catching and fun to click.

Button icons

You can consider adding icons to your buttons if it helps communicate the intent of the button design. If you have multiple buttons, the icon might also help to differentiate between different buttons competing for a user's attention.

You can either choose to use a leading icon.

Or, a trailing icon.

Button shape

Finally, a button can come in many shapes, depending on one's design system.

A pill shape button design is considered to be 'friendlier'.

If your brand is more serious, consider using buttons with sharper corners instead.

Otherwise, a sharp corner button will do just fine.

2. Icon buttons: Standard or Contained

You should consider using an icon button if you need to squeeze in multiple button actions in a small interface.

The standard icon buttons are very common in social media apps - and the icons themselves are well understood (bookmark, like, retweet, share, comment, etc.)

Alternatively, you can add a filled container to your icon buttons to make it feel more clickable. Also consider adding in a text label if the icons aren't commonly used and there is a chance users might not understand what they mean.

3. Text buttons: Standard, Underlined, Icons

Text buttons are often used as tertiary or quaternary buttons, here are some standard text buttons. These buttons are used for low emphasis situations, and might be easily missed.

If you want to draw more attention towards text buttons, you can consider underlining it.

And finally, adding a leading icon to text buttons might help to further draw attention to it.

When to use buttons?

Form submission

Buttons are frequently used to submit forms, allowing users to send their input or perform an action.

Call to action

Buttons are employed to prompt users to take specific actions, like signing up, making a purchase, or starting a process. These are usually primary buttons.

Confirmation and alerts

Buttons can be used to confirm or cancel actions, such as confirming a deletion or dismissing an alert.

Conflicting UI elements: Badges, Chips, Floating Action Button (FAB), Switches

Buttons v.s. Badges

Despite its visual appearance, buttons are used for a specific purpose which is to start or confirm an action. As such, the text they contain will be action-related (e.g add, verify, create, etc.).

On the other hand, a badge is simply used to convey information or the status of a process (e.g verified, new, recommended). Furthermore, a badge is non-interactable and does not require any user interaction or input.

Buttons v.s. Chips

A suggestion tag is an element within a user interface that suggests a particular action or option to the user. It is usually presented as a list of choices that the user can select from. Suggestion tags are typically used to help guide the user to a particular action or decision.

However, a button is specifically for triggering an action or event within the app instead of acting as a quick shortcut to input values.

Buttons v.s. Floating Action Buttons (FAB)

The purpose of a Floating Action Button is to provide a quick access to the main action of an app. It is typically used to perform one of the most important actions of the app.

On the other hand, Buttons are used to perform a range of actions, like submitting forms, navigating through pages, and more. Additionally, buttons exist within its own section rather than “hovering” above other elements.

Buttons v.s. Switches

Switches are sometimes also called 'Toggle buttons'. A toggle switch is used for binary, mutually exclusive options.

On the other hand, Buttons are used to perform a range of actions - also, it does not need to be binary or mutually exclusive.