| Wiki Markup |
|---|
h1. {color:#003366}{*}Buttons{*}{color}
h2. 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 |
Buttons
Summary
...
action(s), the primary button appears in Green; and the secondary buttons appear in Orange. h2. |
...
Code
| Code Block |
|---|
Code h2. {code} <button id="btn_report">View</button> |
Related patterns
Hyperlinks
Tabs
Problem
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.
...
{code}
!Screen Shot 2013-11-06 at 4.46.06 PM.png|width=300!
h2. !Screen Shot 2013-11-06 at 4.46.30 PM.png|width=300!
h2. {color:#003366}{*}Related patterns *{color}
Hyperlinks
Tabs
h2. {color:#003366}{*}Problem{*}{color}
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.
h2. *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.
h2. {color:#003366}{*}Rationale{*}{color} |