Designing Action Buttons

This section details the context in which different action buttons should be used in SPArtacus.

Primary (Forward) Action Buttons

This action button style is dedicated to the most important action on any given page. This button is designed to grab the user’s attention, and communicate that this is the way forward to accomplish their tasks. If there is a choice of forward moving actions, this one is used to highlight the most commonly used of the group. It is recommended to have only ONE primary forward action on any given page.

Common Uses

Secondary (Neutral) Action Buttons

This action button style is most often used as an alternative that is NOT the most common way forward. It should be emphasized much less than the ‘primary’ action in visual design considerations such as color and luminosity. Users should not confuse it with the more ‘recommended’ primary action button, but it should remain the same dimensions and be directly aligned with the primary action to show the user that it is a parallel choice. This button is most often placed directly below the primary action button.

Common Uses

Reverse Action Buttons

This reverse action button is reserved exclusively for actions that take the user backwards. In the most serious cases, this button style signals to the user that this is the path to ‘flee’ from situations which they may find uncomfortable or confusing. In less serious cases, it is simply used to indicate the backwards direction in a series of steps (a wizard) or a flow.

Common Uses

Icon Driven Action Button

Some action buttons may be paired with icons within the button itself to emphasize that the action may lead to external locations such as user hard drives (in the case of downloads) or printers. The icon is used to draw attention to the user that this action (although primary) may not lead directly to another page. In a normal storefront context, icons are not commonly used.

Common Uses