Buttons
...
Summary
Buttons are used on the transactional pages of the system where users can make or save changes to a form.
On pages where a single action button appears, use the Orange button for that primary/default action.
On forms that require primary and secondary action(s), the primary button appears in Green; and the secondary buttons appear in Orange.
Code
...
| Code Block |
|---|
<button id="btn_report">View</button>
|
Related patterns
Hyperlinks
Tabs
Problem
...
- In some cases, users need to explicitly submit forms. Buttons give users control to make these changes themselves.
The main reason for using action buttons is that because of their visual appearance, they get more attention and become visually distinct from normal text links. This is what is needed for important tasks
You must allow the user to initiate actions, submit information, or force a state change, from within any context.
Button is probably the most common element across all mobile devices, and is built into every platform.
Solution
A push-button visually stands out on the page and is easily distinguishable from a textual link. It therefore attracts more attention than simple text link and suggests an "action" because of it's "push-button" affordance.
Rationale
...
- We provide buttons so users know they are taking action explicitly rather than relying on the system to save (or lose) changes for them.
...
- Buttons are the best solution for submitting form data, therefore we followed the web standards and conventions.
...