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
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Normal Link</h3>
    <div class="flex gap-3">
      <a href="#" 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-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">
        </span>
      </a>
      <a href="#" 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-primary-500 bg-transparent border-2 border-primary-600 hover:border-primary-700 hover:bg-primary-50 text-primary-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">
        </span>
      </a>
      <a href="#" 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-primary-500 bg-transparent hover:bg-primary-50 active:bg-primary-100 text-primary-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">
        </span>
      </a>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Disabled Links</h3>
    <div class="flex gap-3">
      <a data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" aria-disabled="true" tabindex="-1" 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 opacity-50 cursor-not-allowed pointer-events-none">
        <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">
        </span>
      </a>
      <a data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" aria-disabled="true" tabindex="-1" 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-transparent border-2 border-primary-600 hover:border-primary-700 hover:bg-primary-50 text-primary-600 px-4 py-2 text-base gap-2 opacity-50 cursor-not-allowed pointer-events-none">
        <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">
        </span>
      </a>
      <a data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" aria-disabled="true" tabindex="-1" 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 opacity-50 cursor-not-allowed pointer-events-none">
        <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">
        </span>
      </a>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Loading Links</h3>
    <div class="flex gap-3">
      <a data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" aria-disabled="true" tabindex="-1" 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-wait pointer-events-none">
        <span data-better-ui--button-target="spinner" class="">
          <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="hidden inline-flex items-center gap-2">
        </span>
      </a>
      <a data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" aria-disabled="true" tabindex="-1" 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-wait pointer-events-none">
        <span data-better-ui--button-target="spinner" class="">
          <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="hidden inline-flex items-center gap-2">
        </span>
      </a>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Show Loader on Click</h3>
    <p class="text-sm text-gray-600 mb-2">Click the links to see the loading state</p>
    <div class="flex gap-3">
      <a href="#" 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">
        </span>
      </a>
      <a href="#" 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-info-500 bg-info-600 hover:bg-info-700 active:bg-info-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">
        </span>
      </a>
    </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
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Normal Link</h3>
    <div class="flex gap-3">
      <%= render BetterUi::ButtonComponent.new(href: "#") { "Click Me" } %>
      <%= render BetterUi::ButtonComponent.new(href: "#", style: :outline) { "Outline Link" } %>
      <%= render BetterUi::ButtonComponent.new(href: "#", style: :ghost) { "Ghost Link" } %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Disabled Links</h3>
    <div class="flex gap-3">
      <%= render BetterUi::ButtonComponent.new(href: "#", disabled: true) { "Disabled" } %>
      <%= render BetterUi::ButtonComponent.new(href: "#", disabled: true, style: :outline) { "Disabled Outline" } %>
      <%= render BetterUi::ButtonComponent.new(href: "#", disabled: true, variant: :danger) { "Disabled Danger" } %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Loading Links</h3>
    <div class="flex gap-3">
      <%= render BetterUi::ButtonComponent.new(href: "#", show_loader: true) { "Loading..." } %>
      <%= render BetterUi::ButtonComponent.new(href: "#", show_loader: true, variant: :success) { "Loading Success" } %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Show Loader on Click</h3>
    <p class="text-sm text-gray-600 mb-2">Click the links to see the loading state</p>
    <div class="flex gap-3">
      <%= render BetterUi::ButtonComponent.new(href: "#", show_loader_on_click: true) { "Click to Load" } %>
      <%= render BetterUi::ButtonComponent.new(href: "#", show_loader_on_click: true, variant: :info) { "Info Link" } %>
    </div>
  </div>
</div>

No notes provided.

No params configured.