xref: /aosp_15_r20/external/chromium-trace/catapult/third_party/polymer/components/paper-button/README.md (revision 1fa4b3da657c0e9ad43c0220bacf9731820715a5) 
1
2[![Build status](https://travis-ci.org/PolymerElements/paper-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-button)
3[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/paper-button)
4
5##<paper-button>
6
7Material design: [Buttons](https://www.google.com/design/spec/components/buttons.html)
8
9`paper-button` is a button. When the user touches the button, a ripple effect emanates
10from the point of contact. It may be flat or raised. A raised button is styled with a
11shadow.
12
13Example:
14
15<!---
16```
17<custom-element-demo>
18  <template>
19    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
20    <link rel="import" href="paper-button.html">
21    <link rel="import" href="../paper-styles/color.html">
22    <style is="custom-style">
23      #container {
24        display: flex;
25      }
26      paper-button {
27        font-family: 'Roboto', 'Noto', sans-serif;
28        font-weight: normal;
29        font-size: 14px;
30        -webkit-font-smoothing: antialiased;
31      }
32      paper-button.pink {
33        color: var(--paper-pink-a200);
34        --paper-button-ink-color: var(--paper-pink-a200);
35      }
36      paper-button.pink:hover {
37        background-color: var(--paper-pink-100);
38      }
39      paper-button.indigo {
40        background-color: var(--paper-indigo-500);
41        color: white;
42        --paper-button-raised-keyboard-focus: {
43          background-color: var(--paper-pink-a200) !important;
44          color: white !important;
45        };
46      }
47      paper-button.indigo:hover {
48        background-color: var(--paper-indigo-400);
49      }
50      paper-button.green {
51        background-color: var(--paper-green-500);
52        color: white;
53      }
54      paper-button.green[active] {
55        background-color: var(--paper-red-500);
56      }
57      paper-button.disabled {
58        color: white;
59      }
60    </style>
61    <div id="container">
62      <next-code-block></next-code-block>
63    </div>
64  </template>
65</custom-element-demo>
66```
67-->
68```html
69<paper-button class="pink">link</paper-button>
70<paper-button raised class="indigo">raised</paper-button>
71<paper-button toggles raised class="green">toggles</paper-button>
72<paper-button disabled class="disabled">disabled</paper-button>
73```
74