This repository has been archived by the owner on Jun 11, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
(c)Submit Button
ProPaul edited this page Feb 12, 2018
·
1 revision
Buttons communicate the action that will occur when the user taps/clicks them.
- Use submit component buttons for upload i.e. Submit application (use only one submission button per page). There are three states to this button default, hover and tapped/click.
- 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’).
NHS Leadership Academy