Shipfaster: UI Components

Button Group

Combines the triggers for a few related features into one interface element.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

It’s a fundamental part of your interface that users need to press to make the action you want them to take. Button groups are a collection of several related actions that a user can take.

When to use

  • To group several actions with similar purposes.


Best Practices

  • Not all buttons in a group require an icon, but buttons with icons should always be of a higher priority than ones without icons. If the most critical action in a group doesn’t have an icon, don’t use icons in the remaining lower-level actions.
  • The order of button priority should match the alignment of surrounding text. When text is left-aligned, buttons should be arranged so that the leftmost button is the most critical. When text is right- or center- aligned, the most critical action should be the furthest right.
  • Be thoughtful about how multiple buttons will look and work on small screens.
  • Group together calls to action that have a relationship.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

All Products

Outline: Figma’s Ultimate Wireframe Kit

Stay on top of testing ideas and prototypes with a wireframe kit that simplifies your process

Pricing Icon
800+ of Downloads
Review Stars
800+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.