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
<div class="space-y-12"> <div> <h3 class="text-lg font-semibold">Variants with secondary color</h3> <div class="inline-flex flex-wrap gap-2 items-end mt-2"> <button role="button" type="submit" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-sky-500/30 hover:bg-sky-500/50 border-sky-500/20 text-sky-700 hover:text-sky-800 focus:ring-2 focus:outline-none focus:ring-sky-300 dark:focus:ring-sky-800 dark:bg-sky-700 dark:text-sky-200 dark:hover:bg-sky-700/80 dark:hover:text-sky-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">secondary solid</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-transparent shadow-none text-sky-600 hover:bg-sky-100/80 hover:text-sky-600 focus:ring-2 focus:outline-none focus:ring-sky-400 dark:focus:ring-sky-700 dark:hover:bg-sky-800 dark:hover:text-sky-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">secondary ghost</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-transparent border-sky-200 text-sky-600 hover:bg-sky-200/50 hover:text-sky-600 focus:ring-2 focus:outline-none focus:ring-sky-300 dark:focus:ring-sky-800 dark:hover:bg-sky-800 dark:hover:text-sky-300 dark:border-sky-700 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">secondary outline</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-sky-100/80 text-sky-600 hover:bg-sky-200/80 hover:text-sky-800 focus:ring-sky-500 dark:focus:bg-sky-800/20 dark:focus:text-sky-300 dark:bg-sky-800/80 dark:hover:bg-sky-800 dark:text-sky-200 dark:hover:text-sky-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">secondary soft</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-transparent shadow-none text-sky-600 hover:text-sky-700 hover:bg-sky-100 dark:text-sky-400 dark:hover:text-sky-300 dark:hover:bg-sky-900 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">secondary link</span></button> </div> </div> <div> <h3 class="text-lg font-semibold">Variants with colored buttons</h3> <div class="inline-flex flex-wrap gap-2 items-end mt-2"> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-green-500/30 hover:bg-green-500/50 border-green-500/20 text-green-700 hover:text-green-800 focus:ring-2 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 dark:bg-green-700 dark:text-green-200 dark:hover:bg-green-700/80 dark:hover:text-green-300 px-2.5 py-1.5 text-xs rounded-lg text-center justify-center"><span class="text-nowrap">Extra Small</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-yellow-500/30 hover:bg-yellow-500/50 border-yellow-500/20 text-yellow-700 hover:text-yellow-800 focus:ring-2 focus:outline-none focus:ring-yellow-300 dark:focus:ring-yellow-800 dark:bg-yellow-700 dark:text-yellow-200 dark:hover:bg-yellow-700/80 dark:hover:text-yellow-300 px-3 py-2 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">Small</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-blue-500/30 hover:bg-blue-500/50 border-blue-500/20 text-blue-700 hover:text-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-700/80 dark:hover:text-blue-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">Base</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-red-500/30 hover:bg-red-500/50 border-red-500/20 text-red-700 hover:text-red-800 focus:ring-2 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 dark:bg-red-700 dark:text-red-200 dark:hover:bg-red-700/80 dark:hover:text-red-300 px-4 py-3 text-base rounded-lg text-center justify-center"><span class="text-nowrap">Large</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-indigo-500/30 hover:bg-indigo-500/50 border-indigo-500/20 text-indigo-700 hover:text-indigo-800 focus:ring-2 focus:outline-none focus:ring-indigo-300 dark:focus:ring-indigo-800 dark:bg-indigo-700 dark:text-indigo-200 dark:hover:bg-indigo-700/80 dark:hover:text-indigo-300 px-6 py-3.5 text-lg rounded-lg text-center justify-center"><span class="text-nowrap">Extra Large</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-teal-500/30 hover:bg-teal-500/50 border-teal-500/20 text-teal-700 hover:text-teal-800 focus:ring-2 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 dark:bg-teal-700 dark:text-teal-200 dark:hover:bg-teal-700/80 dark:hover:text-teal-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center w-full"><span class="text-nowrap">Full width Base</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-orange-500/30 hover:bg-orange-500/50 border-orange-500/20 text-orange-700 hover:text-orange-800 focus:ring-2 focus:outline-none focus:ring-orange-300 dark:focus:ring-orange-800 dark:bg-orange-700 dark:text-orange-200 dark:hover:bg-orange-700/80 dark:hover:text-orange-300 px-3.5 py-2.5 text-sm rounded-lg text-right justify-end w-full"><span class="text-nowrap">Full width Base</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-red-500/30 hover:bg-red-500/50 border-red-500/20 text-red-700 hover:text-red-800 focus:ring-2 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 dark:bg-red-700 dark:text-red-200 dark:hover:bg-red-700/80 dark:hover:text-red-300 px-3.5 py-2.5 text-sm rounded-lg text-left justify-start w-full"><span class="text-nowrap">Full width Base</span></button> </div> </div> <div> <h3 class="text-lg font-semibold">Shapes and states</h3> <div class="inline-flex flex-wrap gap-2 items-end mt-2"> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800 focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">Rounded button</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800 focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 px-3.5 py-2.5 text-sm rounded-full text-center justify-center"><span class="text-nowrap">Pill button</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800 focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 px-3.5 py-2.5 text-sm rounded-none text-center justify-center"><span class="text-nowrap">Square button</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800 focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center disabled:cursor-not-allowed cursor-not-allowed disabled:opacity-45 aria-disabled !transition-none" disabled="disabled"><span class="text-nowrap">Disabled button</span></button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800 focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center cursor-wait"><span class="text-nowrap">Loading button</span><span class="absolute inset-0 flex items-center justify-center bg-inherit"><span class="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></span></span></button> </div> </div> <div> <h3 class="text-lg font-semibold">Default style with icons</h3> <div class="inline-flex flex-wrap gap-2 items-end mt-2"> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800 focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">Loading...</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin order-first ms-0 me-1.5 w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-loader-circle icon-desc-loader-circle"><title id="icon-title-loader-circle">Loader-circle</title> <desc id="icon-desc-loader-circle">Loader-circle icon</desc> <path d="M21 12a9 9 0 1 1-6.219-8.56"></path> </svg> </button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800 focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">Buy now</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-pulse text-orange-700 dark:text-orange-400 order-first ms-0 me-1.5 w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-shopping-cart icon-desc-shopping-cart"><title id="icon-title-shopping-cart">Shopping-cart</title> <desc id="icon-desc-shopping-cart">Shopping-cart icon</desc> <circle cx="8" cy="21" r="1"></circle> <circle cx="19" cy="21" r="1"></circle> <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path> </svg> </button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800 focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">Download files</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-bounce order-last ms-1.5 me-0 w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-arrow-down-from-line icon-desc-arrow-down-from-line"><title id="icon-title-arrow-down-from-line">Arrow-down-from-line</title> <desc id="icon-desc-arrow-down-from-line">Arrow-down-from-line icon</desc> <path d="M19 3H5"></path> <path d="M12 21V7"></path> <path d="m6 15 6 6 6-6"></path> </svg> </button> <button role="button" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800 focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 px-3.5 py-2.5 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">Computer specs</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-pulse text-emerald-700 dark:text-emerald-400 order-last ms-1.5 me-0 w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-computer icon-desc-computer"><title id="icon-title-computer">Computer</title> <desc id="icon-desc-computer">Computer icon</desc> <rect width="14" height="8" x="5" y="2" rx="2"></rect> <rect width="20" height="8" x="2" y="14" rx="2"></rect> <path d="M6 18h2"></path> <path d="M12 18h6"></path> </svg> </button> </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
<div class="space-y-12"> <div> <h3 class="text-lg font-semibold">Variants with secondary color</h3> <div class="inline-flex flex-wrap gap-2 items-end mt-2"> <%= rui_button(text: "secondary solid", variant: :solid, color: :secondary, submit: true) %> <%= rui_button(text: "secondary ghost", variant: :ghost, color: :secondary) %> <%= rui_button(text: "secondary outline", variant: :outline, color: :secondary) %> <%= rui_button(text: "secondary soft", variant: :soft, color: :secondary) %> <%= rui_button(text: "secondary link", variant: :link, color: :secondary) %> </div> </div> <div> <h3 class="text-lg font-semibold">Variants with colored buttons</h3> <div class="inline-flex flex-wrap gap-2 items-end mt-2"> <%= rui_button(text: "Extra Small", size: :xs, color: :success) %> <%= rui_button(text: "Small", size: :sm, color: :warning) %> <%= rui_button(text: "Base", size: :base, color: :info) %> <%= rui_button(text: "Large", size: :lg, color: :danger) %> <%= rui_button(text: "Extra Large", size: :xl, color: :indigo) %> <%= rui_button(text: "Full width Base", full_width: true, color: :teal) %> <%= rui_button(text: "Full width Base", full_width: true, color: :orange, text_align: :right) %> <%= rui_button(text: "Full width Base", full_width: true, color: :danger, text_align: :left) %> </div> </div> <div> <h3 class="text-lg font-semibold">Shapes and states</h3> <div class="inline-flex flex-wrap gap-2 items-end mt-2"> <%= rui_button(text: "Rounded button", shape: :rounded) %> <%= rui_button(text: "Pill button", shape: :pill) %> <%= rui_button(text: "Square button", shape: :square) %> <%= rui_button(text: "Disabled button", disabled: true) %> <%= rui_button(text: "Loading button", loading: true) %> </div> </div> <div> <h3 class="text-lg font-semibold">Default style with icons</h3> <div class="inline-flex flex-wrap gap-2 items-end mt-2"> <%= rui_button(text: "Loading...") do |button| %> <% button.with_icon(name: "loader-circle", position: :leading, class: "animate-spin") %> <% end %> <%= rui_button(text: "Buy now") do |button| %> <% button.with_icon(name: "shopping-cart", position: :leading, loading: true, color: :orange, class: "animate-pulse") %> <% end %> <%= rui_button(text: "Download files") do |button| %> <% button.with_icon(name: "arrow-down-from-line", position: :trailing, class: "animate-bounce") %> <% end %> <%= rui_button(text: "Computer specs") do |button| %> <% button.with_icon(name: "computer", color: :success, position: :trailing, class: "animate-pulse") %> <% end %> </div> </div></div>🚀 Button Component Overview
This preview showcases various types of buttons:
- Default, Primary, Info, Success, Warning, Danger, Dark
- Buttons with icons
- Buttons with different sizes
- Buttons with different shapes
- Buttons with URLs
A simple version to use it: <%= rui_button(text: "Button Text") %>
For customization options, check out the 'Playground' section 🎛️
No params configured.