Button Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

Button

Overview

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.

Buttons are used to show priority based actions that the user can take. Thus identifying and using the right action style forms the basis of any user interface.

When to use

Banner call to actions, in-page forms, and nested buttons in components like tiles
Inline notifications, inline field buttons and data tables, progressive forms, wizards, and single-button dialogs
Dialogs, side panels, and small tiles; currently Designership doesn’t offer auto-fliing buttons but you can always tweak your buttons from all 3 levels to make them fill-container. These buttons should ideally have a max width of 320px.

Anatomy

Button Label: Shows the action name that the button performs on being pressed.
Icons: Visually supporting icons to add weight to actions.

Best Practices

Every screen should only have one important primary action.
Build hierarchy in actions if you have multiple buttons. This helps users make decesions faster.
Use precise text in button label which indicates what exactly happens when the button is pressed.