1page.title=Buttons
2page.tags=button,input
3@jd:body
4
5<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html">
6  <div>
7    <h3>Developer Docs</h3>
8    <p>Buttons</p>
9  </div>
10</a>
11
12<p itemprop="description">A button consists of text and/or an image that clearly communicates what action
13  will occur when the user touches it. A button can have an image, text, or both.
14</p>
15
16<div class="layout-content-row" style="margin-top:22px">
17  <div class="layout-content-col span-3">
18    <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;">
19  </div>
20  <div class="layout-content-col span-3">
21    <img src="{@docRoot}design/media/buttons_text.png"  style="height:94px;">
22  </div>
23  <div class="layout-content-col span-7">
24    <img src="{@docRoot}design/media/buttons_image_and_text.png"  style="height:94px;">
25  </div>
26</div>
27
28<div class="layout-content-row" style="margin-top:0;">
29  <div class="layout-content-col span-3">
30      <p>An image alone works best when the action can be represented by a symbol that's well understood.</p>
31  </div>
32  <div class="layout-content-col span-3">
33      <p>Text alone is most appropriate for actions that would be difficult to
34      represent visually, or are critical to convey in words to avoid any ambiguity.</p>
35  </div>
36  <div class="layout-content-col span-7">
37    <p>
38      Both an icon and text is most appropriate when they complement each other:
39      each carrying its own bit of information, but together making a larger whole.
40    </p>
41
42    <p>
43      For example, in a birthday reminder card in Google Now, the button's text
44      describes the action while its image indicates that the action will be done
45      in Google+.
46    </p>
47  </div>
48</div>
49
50<h3>What about button backgrounds?</h3>
51
52<div class="layout-content-row">
53  <div class="layout-content-col span-6">
54    <p>For <strong>image-only</strong> buttons, a background isn't necessary because
55    users are accustomed to interacting with objects.</p>
56
57    <div class="layout-content-row" style="margin-left:72px">
58      <div class="layout-content-col span-2">
59        <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div>
60        <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;">
61      </div>
62      <div class="layout-content-col span-2" style="width:29px;margin-left:10px;">
63        <div class="do-dont-label good"><strong>Do</strong></div>
64        <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;">
65      </div>
66    </div>
67  </div>
68
69<div class="layout-content-col span-7">
70<p>
71  For buttons <strong>with text</strong>, a background is also usually
72  unnecessary. To invite users to touch, phrase it as a clear action (e.g.
73  "Start", "Sign in") and use different color and formatting than the screen's
74  usual body text.
75</p>
76
77<p>
78  Use buttons with backgrounds sparingly. Because they have a heavy appearance,
79  they work best when there's only one or two of them on the screen. They're
80  most appropriate for:
81</p>
82
83<ul>
84  <li>A call to action you really want users to pursue (e.g. "Sign up")</li>
85  <li>A key decision point (e.g. "Accept" / "Decline")</li>
86  <li>When the user is about to commit a significant action (e.g. "Erase
87  everything", "Buy now")</li>
88</ul>
89</div>
90</div>
91
92