Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.

(c)Primary Button

ProPaul edited this page Feb 12, 2018 · 4 revisions

< (c)Buttons

Overview

Buttons communicate the action that will occur when the user taps/clicks them.

Use of this pattern

  • Use primary component buttons for call to actions such as directing a user to a destination i.e. Apply to Jenenr Programme. There are three states to this button default, hover and tapped/click.

How it works

  • Button text should be short and describe the action the button performs.
  • Avoid excessively long button text.
  • Align the buttons to the left edge of the grid system (in the user’s line of sight).
  • Buttons should conform to grid widths and never be wider than 345px max.
  • A button should be placed at the end of the context it is related to.
  • Try to have as few buttons on a form as possible - just one is best.
  • Launch your service with primary button.
  • Avoid similar styles elsewhere on the page that could be confused for buttons.
  • Do NOT use disabled state buttons, unless there’s a good reason to.
    • i.e. User needs to answer prior information or bookings are no longer available. (you may user an error link to explain why the button is disabled)
  • Buttons must describe the action they perform
  • Make sure the button text clearly describes the action that the button performs (not the action performed on the page the button takes you to). So for example, on the screen before a payment screen use 'Proceed to payment', not 'Pay now'.
  • If the action of the button changes, then change the text of the button to match the action
  • If the action of the button is simply to continue to the next page, it's fine to use 'continue' repeatedly. If the action changes, then change the text to match it. For example: 'Find address', 'Proceed to payment', 'Review your answers'. (Better to describe what user is continuing i.e. ‘Continue form’).

Research on this pattern

Related patterns

Other

Clone this wiki locally