BetterUi Components

Previews

No matching results.

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Auto-Loading Submit Button Demo</h3>
    <p class="text-sm text-gray-600 mb-4">
      This button automatically shows a loading spinner when clicked (submit buttons only).
      The loading state resets automatically when Turbo completes the request.
    </p>
    <turbo-frame id="demo-frame">
      <form data-turbo-frame="demo-frame" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="9iDDmq213CaR4Jz6DjWtmb5OF5wL8ySwcF7H_KIkSpq_rchPDzqagdUCp1Er_tnEFgidyV1RuE2PeV18GBe19w" />
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              Example Form Field
            </label>
            <input
              type="text"
              name="example"
              class="px-3 py-2 border border-gray-300 rounded-md"
              placeholder="Type something..."
            />
          </div>
          <button type="submit" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-better-ui--button-show-loader-on-click-value="true" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-grayscale-50 px-4 py-2 text-base gap-2 cursor-pointer">
  <span data-better-ui--button-target="spinner" class="hidden">
    <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span class="sr-only">Loading...</span>
  </span>
  <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2">
    
    
            Submit Form
    
  </span>
</button>
        </div>
</form>
      <div class="mt-4 p-4 bg-gray-50 rounded-md">
        <p class="text-sm text-gray-600">
          Click the submit button above to see the auto-loading behavior.
          The spinner appears instantly on click and automatically resets.
        </p>
      </div>
</turbo-frame>  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Comparison: Regular Button vs Auto-Loading Submit</h3>
    <div class="grid grid-cols-2 gap-4">
      <div>
        <p class="text-sm text-gray-600 mb-2">Regular Button (no auto-loading)</p>
        <button type="button" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500 bg-secondary-600 hover:bg-secondary-700 active:bg-secondary-800 text-grayscale-50 px-4 py-2 text-base gap-2 cursor-pointer">
  <span data-better-ui--button-target="spinner" class="hidden">
    <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span class="sr-only">Loading...</span>
  </span>
  <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2">
    
    
          Regular Button
    
  </span>
</button>
      </div>
      <div>
        <p class="text-sm text-gray-600 mb-2">Submit with Auto-Loading</p>
        <form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="z_dSYAuXyKq0rdsv9eHooYVdad7lheBwx_A4CGZYrsSGelm1qRiODfBP4ITQKpz8LRvji7MnfI0416KI3GtRqQ" />
          <button type="submit" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-better-ui--button-show-loader-on-click-value="true" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-grayscale-50 px-4 py-2 text-base gap-2 cursor-pointer">
  <span data-better-ui--button-target="spinner" class="hidden">
    <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span class="sr-only">Loading...</span>
  </span>
  <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2">
    
    
            Auto-Loading Submit
    
  </span>
</button>
</form>      </div>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Different Variants with Auto-Loading</h3>
    <div class="flex flex-wrap gap-3">
      <form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="8-T_ORXUPxve3jgvdeAcKARUHSWQXyFp095QlHKOrxO6afTst1t5vJo8A4RQK2h1rBKXcMb9vZQs-coUyL1Qfg" />
        <button type="submit" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-better-ui--button-show-loader-on-click-value="true" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-grayscale-50 px-4 py-2 text-base gap-2 cursor-pointer">
  <span data-better-ui--button-target="spinner" class="hidden">
    <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span class="sr-only">Loading...</span>
  </span>
  <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2">
    
    
          Primary
    
  </span>
</button>
</form>
      <form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="jG1p6hdOI27CVjHgoJAl1L7nMm1a6AV6eojS1rNh36rF4GI_tcFlyYa0CkuFW1GJFqG4OAxKmYeFr0hWCVIgxw" />
        <button type="submit" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-better-ui--button-show-loader-on-click-value="true" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-success-500 bg-success-600 hover:bg-success-700 active:bg-success-800 text-grayscale-50 px-4 py-2 text-base gap-2 cursor-pointer">
  <span data-better-ui--button-target="spinner" class="hidden">
    <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span class="sr-only">Loading...</span>
  </span>
  <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2">
    
    
          Success
    
  </span>
</button>
</form>
      <form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="ro0IQEen_LXKtbRfxKWvyaqFp7cVYMA0z3O9FNCh-OfnAAOV5Si6Eo5Xj_ThbtuUAsMt4kPCXMkwVCeUapIHig" />
        <button type="submit" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-better-ui--button-show-loader-on-click-value="true" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-danger-500 bg-danger-600 hover:bg-danger-700 active:bg-danger-800 text-grayscale-50 px-4 py-2 text-base gap-2 cursor-pointer">
  <span data-better-ui--button-target="spinner" class="hidden">
    <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span class="sr-only">Loading...</span>
  </span>
  <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2">
    
    
          Danger
    
  </span>
</button>
</form>
      <form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="aRqt4Pg36M_4S8ecxWiPb2_yoQSAFBQyL6WO7MkJOgMgl6Y1WriuaLyp_Dfgo_syx7QrUda2iM_QghRsczrFbg" />
        <button type="submit" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-better-ui--button-show-loader-on-click-value="true" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-warning-500 bg-transparent border-2 border-warning-600 hover:border-warning-700 hover:bg-warning-50 text-warning-600 px-4 py-2 text-base gap-2 cursor-pointer">
  <span data-better-ui--button-target="spinner" class="hidden">
    <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span class="sr-only">Loading...</span>
  </span>
  <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2">
    
    
          Warning Outline
    
  </span>
</button>
</form>    </div>
  </div>
</div>
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
100
101
102
103
104
105
106
107
108
109
110
111
112
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Auto-Loading Submit Button Demo</h3>
    <p class="text-sm text-gray-600 mb-4">
      This button automatically shows a loading spinner when clicked (submit buttons only).
      The loading state resets automatically when Turbo completes the request.
    </p>
    <%= turbo_frame_tag "demo-frame" do %>
      <%= form_with url: "#", method: :post, data: { turbo_frame: "demo-frame" } do |f| %>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              Example Form Field
            </label>
            <input
              type="text"
              name="example"
              class="px-3 py-2 border border-gray-300 rounded-md"
              placeholder="Type something..."
            />
          </div>
          <%= render BetterUi::ButtonComponent.new(
            variant: :primary,
            type: :submit,
            show_loader_on_click: true
          ) do %>
            Submit Form
          <% end %>
        </div>
      <% end %>
      <div class="mt-4 p-4 bg-gray-50 rounded-md">
        <p class="text-sm text-gray-600">
          Click the submit button above to see the auto-loading behavior.
          The spinner appears instantly on click and automatically resets.
        </p>
      </div>
    <% end %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Comparison: Regular Button vs Auto-Loading Submit</h3>
    <div class="grid grid-cols-2 gap-4">
      <div>
        <p class="text-sm text-gray-600 mb-2">Regular Button (no auto-loading)</p>
        <%= render BetterUi::ButtonComponent.new(variant: :secondary, type: :button) do %>
          Regular Button
        <% end %>
      </div>
      <div>
        <p class="text-sm text-gray-600 mb-2">Submit with Auto-Loading</p>
        <%= form_with url: "#", method: :post do |f| %>
          <%= render BetterUi::ButtonComponent.new(
            variant: :primary,
            type: :submit,
            show_loader_on_click: true
          ) do %>
            Auto-Loading Submit
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Different Variants with Auto-Loading</h3>
    <div class="flex flex-wrap gap-3">
      <%= form_with url: "#", method: :post do |f| %>
        <%= render BetterUi::ButtonComponent.new(
          variant: :primary,
          type: :submit,
          show_loader_on_click: true
        ) do %>
          Primary
        <% end %>
      <% end %>
      <%= form_with url: "#", method: :post do |f| %>
        <%= render BetterUi::ButtonComponent.new(
          variant: :success,
          type: :submit,
          show_loader_on_click: true
        ) do %>
          Success
        <% end %>
      <% end %>
      <%= form_with url: "#", method: :post do |f| %>
        <%= render BetterUi::ButtonComponent.new(
          variant: :danger,
          type: :submit,
          show_loader_on_click: true
        ) do %>
          Danger
        <% end %>
      <% end %>
      <%= form_with url: "#", method: :post do |f| %>
        <%= render BetterUi::ButtonComponent.new(
          variant: :warning,
          style: :outline,
          type: :submit,
          show_loader_on_click: true
        ) do %>
          Warning Outline
        <% end %>
      <% end %>
    </div>
  </div>
</div>

No notes provided.

No params configured.