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
<div class="p-8 space-y-6">
  <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
    <p class="text-sm text-yellow-800">
      These links use <code class="bg-yellow-100 px-1 rounded">data-turbo-method</code> for non-GET requests via Turbo Drive.
      Clicking them will trigger the specified HTTP method.
    </p>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">DELETE Method Link</h3>
    <p class="text-sm text-gray-600 mb-2">Commonly used for delete actions</p>
    <a href="#" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-turbo-method="delete" 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-transparent border-2 border-danger-600 hover:border-danger-700 hover:bg-danger-50 text-danger-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">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
        </svg>
        Delete Item
      </span>
    </a>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">POST Method Link</h3>
    <p class="text-sm text-gray-600 mb-2">Commonly used for create actions</p>
    <a href="#" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-turbo-method="post" 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">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        Create Item
      </span>
    </a>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">PATCH Method Link</h3>
    <p class="text-sm text-gray-600 mb-2">Commonly used for update actions</p>
    <a href="#" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-turbo-method="patch" 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">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
        </svg>
        Update Item
      </span>
    </a>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">PUT Method Link</h3>
    <p class="text-sm text-gray-600 mb-2">Commonly used for full resource replacement</p>
    <a href="#" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" data-turbo-method="put" 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-warning-100 hover:bg-warning-200 active:bg-warning-300 text-warning-700 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">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
        </svg>
        Replace Item
      </span>
    </a>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Combined with Loading State</h3>
    <p class="text-sm text-gray-600 mb-2">Click to see loading state while request processes</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" data-turbo-method="delete" 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">
        </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" data-turbo-method="post" 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">
        </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
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
<div class="p-8 space-y-6">
  <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
    <p class="text-sm text-yellow-800">
      These links use <code class="bg-yellow-100 px-1 rounded">data-turbo-method</code> for non-GET requests via Turbo Drive.
      Clicking them will trigger the specified HTTP method.
    </p>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">DELETE Method Link</h3>
    <p class="text-sm text-gray-600 mb-2">Commonly used for delete actions</p>
    <%= render BetterUi::ButtonComponent.new(
      href: "#",
      method: :delete,
      variant: :danger,
      style: :outline
    ) do |c|
      c.with_icon_before do %>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
        </svg>
      <% end
      "Delete Item"
    end %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">POST Method Link</h3>
    <p class="text-sm text-gray-600 mb-2">Commonly used for create actions</p>
    <%= render BetterUi::ButtonComponent.new(
      href: "#",
      method: :post,
      variant: :success
    ) do |c|
      c.with_icon_before do %>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
      <% end
      "Create Item"
    end %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">PATCH Method Link</h3>
    <p class="text-sm text-gray-600 mb-2">Commonly used for update actions</p>
    <%= render BetterUi::ButtonComponent.new(
      href: "#",
      method: :patch,
      variant: :info
    ) do |c|
      c.with_icon_before do %>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
        </svg>
      <% end
      "Update Item"
    end %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">PUT Method Link</h3>
    <p class="text-sm text-gray-600 mb-2">Commonly used for full resource replacement</p>
    <%= render BetterUi::ButtonComponent.new(
      href: "#",
      method: :put,
      variant: :warning,
      style: :soft
    ) do |c|
      c.with_icon_before do %>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
        </svg>
      <% end
      "Replace Item"
    end %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4">Combined with Loading State</h3>
    <p class="text-sm text-gray-600 mb-2">Click to see loading state while request processes</p>
    <div class="flex gap-3">
      <%= render BetterUi::ButtonComponent.new(
        href: "#",
        method: :delete,
        variant: :danger,
        show_loader_on_click: true
      ) { "Delete with Loading" } %>
      <%= render BetterUi::ButtonComponent.new(
        href: "#",
        method: :post,
        variant: :success,
        show_loader_on_click: true
      ) { "Create with Loading" } %>
    </div>
  </div>
</div>

No notes provided.

No params configured.