UNPKG

2.07 kBHTMLView Raw
1<!--
2 Copyright IBM Corp. 2016, 2018
3
4 This source code is licensed under the Apache-2.0 license found in the
5 LICENSE file in the root directory of this source tree.
6-->
7
8<button
9 class="bx--btn bx--btn--ghost bx--btn--field"
10 type="button">
11 Button
12</button>
13<button
14 class="bx--btn bx--btn--ghost bx--btn--field"
15 type="button" disabled>
16 Button
17</button>
18<button
19 class="bx--btn bx--btn--ghost bx--btn--field"
20 type="button">
21 With icon
22 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
23</button>
24<button
25 class="bx--btn bx--btn--ghost bx--btn--field"
26 type="button" disabled>
27 With icon
28 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
29</button>
30<button
31 class="bx--btn bx--btn--ghost bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center bx--btn--field">
32 <span class="bx--assistive-text">Add</span>
33 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
34</button>
35<!-- The markup below is for demonstration purposes only -->
36<div class="example-input-button-pairing">
37 <div class="bx--form-item">
38 <label for="text-input-3" class="bx--label">Text Input label</label>
39 <input id="text-input-3" type="text"
40 class="bx--text-input"
41 placeholder="Optional placeholder text">
42 </div>
43 <div class="example-button-wrapper">
44 <button class=" bx--btn bx--btn--ghost bx--btn--field" type="button">
45 Button
46 </button>
47 </div>
48</div>