x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<div class="Polaris-ButtonGroup"> <div class="Polaris-ButtonGroup__Item"> <button type="button" disabled="disabled" data-controller="polaris-button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--loading"> <span class="Polaris-Button__Spinner" role="status" aria-label="Loading"> <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <circle class="Polaris-Button__SpinnerTrack" r="14" stroke-width="3" cx="22" cy="22" /> <circle class="Polaris-Button__SpinnerIndicator" pathLength="10" r="14" stroke-width="3" cx="22" cy="22" /> </svg> </span> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text"> Save product </div> </span> </button> </div> <div class="Polaris-ButtonGroup__Item"> <button type="button" disabled="disabled" data-controller="polaris-button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--loading Polaris-Button--primary"> <span class="Polaris-Button__Spinner" role="status" aria-label="Loading"> <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <circle class="Polaris-Button__SpinnerTrack" r="14" stroke-width="3" cx="22" cy="22" /> <circle class="Polaris-Button__SpinnerIndicator" pathLength="10" r="14" stroke-width="3" cx="22" cy="22" /> </svg> </span> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text"> Saving product... </div> </span> </button> </div> <div class="Polaris-ButtonGroup__Item"> <button type="button" disabled="disabled" data-controller="polaris-button" class="Polaris-Button Polaris-Button--destructive Polaris-Button--disabled Polaris-Button--loading Polaris-Button--primary"> <span class="Polaris-Button__Spinner" role="status" aria-label="Loading"> <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <circle class="Polaris-Button__SpinnerTrack" r="14" stroke-width="3" cx="22" cy="22" /> <circle class="Polaris-Button__SpinnerIndicator" pathLength="10" r="14" stroke-width="3" cx="22" cy="22" /> </svg> </span> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text"> Deleting product... </div> </span> </button> </div> <div class="Polaris-ButtonGroup__Item Polaris-ButtonGroup__Item--plain"> <button type="button" disabled="disabled" data-controller="polaris-button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--loading Polaris-Button--monochrome Polaris-Button--plain Polaris-Button--removeUnderline"> <span class="Polaris-Button__Spinner" role="status" aria-label="Loading"> <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <circle class="Polaris-Button__SpinnerTrack" r="14" stroke-width="3" cx="22" cy="22" /> <circle class="Polaris-Button__SpinnerIndicator" pathLength="10" r="14" stroke-width="3" cx="22" cy="22" /> </svg> </span> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text Polaris-Button--removeUnderline"> Processing shipment... </div> </span> </button> </div> <div class="Polaris-ButtonGroup__Item"> <button aria-label="Add product" type="button" disabled="disabled" data-controller="polaris-button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--loading Polaris-Button--iconOnly"> <span class="Polaris-Button__Spinner" role="status" aria-label="Loading"> <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <circle class="Polaris-Button__SpinnerTrack" r="14" stroke-width="3" cx="22" cy="22" /> <circle class="Polaris-Button__SpinnerIndicator" pathLength="10" r="14" stroke-width="3" cx="22" cy="22" /> </svg> </span> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Icon"> <span class="Polaris-Icon"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M6.25 10a.75.75 0 0 1 .75-.75h2.25v-2.25a.75.75 0 0 1 1.5 0v2.25h2.25a.75.75 0 0 1 0 1.5h-2.25v2.25a.75.75 0 0 1-1.5 0v-2.25h-2.25a.75.75 0 0 1-.75-.75Z"></path><path fill-rule="evenodd" d="M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0-1.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z"></path></svg> </span> </div> </span> </button> </div> <div class="Polaris-ButtonGroup__Item"> <button type="button" disabled="disabled" data-controller="polaris-button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--loading"> <span class="Polaris-Button__Spinner" role="status" aria-label="Loading"> <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <circle class="Polaris-Button__SpinnerTrack" r="14" stroke-width="3" cx="22" cy="22" /> <circle class="Polaris-Button__SpinnerIndicator" pathLength="10" r="14" stroke-width="3" cx="22" cy="22" /> </svg> </span> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text"> More actions </div> <div class="Polaris-Button__Icon"> <span class="Polaris-Icon"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M6.24 8.2a.75.75 0 0 1 1.06.04l2.7 2.908 2.7-2.908a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 0 1 .04-1.06Z"></path></svg> </span> </div> </span> </button> </div></div>1
2
3
4
5
6
7
8
<%= polaris_button_group do |group| %> <% group.with_button(loading: true) { "Save product" } %> <% group.with_button(loading: true, primary: true) { "Saving product..." } %> <% group.with_button(loading: true, primary: true, destructive: true) { "Deleting product..." } %> <% group.with_button(loading: true, plain: true, monochrome: true, remove_underline: true) { "Processing shipment..." } %> <% group.with_button(loading: true, icon_name: "PlusCircleIcon", aria: {label: "Add product"}) %> <% group.with_button(loading: true, disclosure: true) { "More actions" } %><% end %>No notes provided.
No params configured.