Buttons are used primarily for actions. Any remaining calls-to-action should be represented as secondary buttons or links.

When to use

Used when you have to do a principal interaction within pages, each page should have one primary button.

Primary buttons always appear to the bottom in order to facilite user interaction.

Secondary buttons are used when interaction is not the principal action.

If you already has added 1 or more units for a product in catalogue view and go to those product view, you can see the number of products added before, add more or less units, and update the cart from button beside.

When not to use

Do not use buttons as navigational elements. Instead, use links or icons when the desired action is to take the user to a new section or page.

Main elements


  • Button labels should clearly indicate the action of the button.
  • Use active verbs, such as Add or Delete.
  • Use sentence-style capitalization (only the first word in a phrase) and no more than two words for button labels.
  • Use text centered align.

Other components relation

In some cases the primary button have to relate with other components within.

  • Counter indicator, is a badge with the number of products for the current order.
  • Amount, price for a current product or total price for a current order.

Button alignment

  • Always we use full-width buttons, providing significant advantages when user interact in mobile devices particularly.



The button allows for a two states: default, disabled.

And has different behaviors depending of use y relation with other components.

Did this page help you?