Intro to UI Buttons

Primary buttons highlight what the interface wants or expects users to do. They should stand out from the rest of the interface and other buttons, especially ones that are close. Primary buttons are commonly found as CTAs such as Submit buttons on forms.

When styling primary buttons, use more saturated colors to make them eye-catching. Using a color that contrasts with the rest of the interface is especially useful when it comes to call-to-action buttons.

Secondary buttons are alternatives to primary buttons. If the Submit button is primary, the Cancel button would be secondary. Secondary buttons should have more subdued styling, allowing primary buttons to take center stage within the design.

Although secondary buttons should be less prominent, ensure users can identify their different states (enabled, disabled, hover, focused, etc.).

Tertiary buttons are for lesser-performed actions or those that users are unlikely to perform. Therefore, they shouldn’t be attention-grabbing at all. In fact, you may want to place tertiary buttons away from the other buttons in an interface to prevent users from accidentally selecting them. Common style choices include using plain text links, muted or low-contrast colors, smaller font sizes, lighter weights, or simple outlines without fills. These visual cues help signal that the action is less important than primary or secondary buttons.

Icon buttons, as their name suggests, consist of only an icon. Because there is no text accompanying the icon, these buttons should only be used for routine actions, such as editing or moving something to the trash. The meaning of symbols needs to be familiar and immediately recognizable to prevent confusing users.^[1]

From the accessibility side, icon-only buttons aren't meaningful enough for users of assistive technologies. There are several ways to make such buttons more accessible. For example, you can accompany the icon with text or define the button's name in the <button> element.

In contrast to icon-only buttons, text buttons only include text, with no icons. They also don’t include borders or fill colors. Text-only buttons have significantly less visual weight, so it’s recommended to use them only for less-important actions.^[2]

You don’t want to use a text-only button as a CTA, for example. When you’re designing text-only buttons, be sure to use an invisible container that’s the same size as other buttons to maintain consistent spacing.

Outlined buttons, also known as ghost buttons, only include a border and a text label. They carry more visual weight than text-only buttons but aren't particularly prominent. Outlined buttons are excellent as secondary or tertiary buttons, but they aren't visually prominent enough to indicate a primary action. 

If you want a button with a little more visual weight, consider a raised button. Raised buttons stand out due to their use of shadow. The shadow makes them more prominent in the design and catches users’ attention. A larger shadow indicates a greater distance from the surface and emphasizes the importance of a button. However, be careful not to overuse them as they can overwhelm users.

In contrast to raised buttons, we have flat buttons. They don't use shadows or other styles to mimic elevation or volume but still look like buttons, thanks to their shape and color.

Since they lack the characteristic look and feel of raised buttons, there is a risk that they will be missed by users. Be sure to make them look distinguishable from other interface elements so that users will not be confused.

A split button is a variation of a menu button. However, it does more than just its primary action.^[3] Split buttons offer a default single-click action while providing alternatives via a dropdown. They often use an arrow icon to indicate that secondary functions are available.

The only thing differentiating split buttons from regular menu buttons is some kind of visual separator between the button's primary function and the dropdown function. It prevents users from assuming the entire button will expose the dropdown.

If you want to group multiple functions (usually 2 or 3) into a single button while keeping all of them visible, toggle buttons are the answer. They always live in groups, sharing a single container. In each group, only one button can be selected at a time.^[4]

If you need to group similar actions of equal importance, but don’t want to show them side by side with a toggle button, consider using a menu button. Menu buttons or dropdown buttons simply open a list of actions when clicked/tapped on. They’re an excellent option for saving space when grouping related actions.^[5]

Floating action buttons (FABs) were originally popularized by Google’s Material Design guidelines.^[6] They provide consistent and fixed primary buttons. In general, they’re circular or square with rounded corners, icon-only, raised buttons fixed to the edge or corner of the screen. You’ve probably seen them in Google’s apps, like in the case of the plus-sign Add Event button in Google Calendar.

You should use only one FAB per page for constructive primary actions like creating, adding, or sharing.