1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | <button
|
9 | class="bx--btn bx--btn--tertiary bx--btn--field"
|
10 | type="button">
|
11 | Button
|
12 | </button>
|
13 | <button
|
14 | class="bx--btn bx--btn--tertiary bx--btn--field"
|
15 | type="button" disabled>
|
16 | Button
|
17 | </button>
|
18 | <button
|
19 | class="bx--btn bx--btn--tertiary 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--tertiary 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--tertiary 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 |
|
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--tertiary bx--btn--field" type="button">
|
45 | Button
|
46 | </button>
|
47 | </div>
|
48 | </div>
|