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 |
|---|
h2. Code h2. {code} <button id="btn_report">View</button> {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} |
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.