RapidRails UI Book
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
<div class="space-y-12">
  <div>
    <h3 class="text-lg font-semibold">Default 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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-2 py-1 text-xs rounded-md justify-center"><span class="text-nowrap">Extra Small</span></button>
      <button role="button" style="bnw" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-2 py-1 text-xs rounded-md justify-center"><span class="text-nowrap">Extra Small BnW</span></button>
      <button role="button" style="danger" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-2 py-1 text-xs rounded-md justify-center"><span class="text-nowrap">Extra Small Danger</span></button>
      <button role="button" style="info" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-2 py-1 text-xs rounded-md justify-center"><span class="text-nowrap">Extra Small Info</span></button>
      <button role="button" style="disabled" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-2 py-1 text-xs rounded-md justify-center"><span class="text-nowrap">Extra Small Disabled</span></button>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-2 py-1 text-xs rounded-md 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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-2.5 py-1.5 text-sm rounded-md 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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md 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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3.5 py-2.5 text-base rounded-md 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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-4 py-3 text-lg rounded-md 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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center w-full"><span class="text-nowrap">Button - full width Base</span></button>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Shape 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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md 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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-full 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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-none justify-center"><span class="text-nowrap">Square button</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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Loading...</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-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md 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="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-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Send email</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-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Download now</span></button>    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Colored buttons</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <button role="button" style="red" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Red Button</span></button>
      <button role="button" style="yellow" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Yellow Button</span></button>
      <button role="button" style="green" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Green Button</span></button>
      <button role="button" style="pink" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Pink Button</span></button>
      <button role="button" style="purple" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Purple Button</span></button>
      <button role="button" style="indigo" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Indigo Button</span></button>
      <button role="button" style="amber" type="button" class="inline-flex items-center relative m-0 font-medium transition-colors duration-200 overflow-hidden whitespace-nowrap border-0 bg-zinc-600 text-white hover:bg-zinc-700 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-400 px-3 py-2 text-sm rounded-md justify-center"><span class="text-nowrap">Amber Button</span></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
56
57
58
59
60
61
62
63
64
<div class="space-y-12">
  <div>
    <h3 class="text-lg font-semibold">Default buttons</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <%= rui_button(text: "Extra Small", size: :xs) %>
      <%= rui_button(text: "Extra Small BnW", size: :xs, style: :bnw) %>
      <%= rui_button(text: "Extra Small Danger", size: :xs, style: :danger) %>
      <%= rui_button(text: "Extra Small Info", size: :xs, style: :info) %>
      <%= rui_button(text: "Extra Small Disabled", size: :xs, style: :disabled) %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Colored buttons</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <%= rui_button(text: " Extra Small", size: :xs) %>
      <%= rui_button(text: "Small", size: :sm) %>
      <%= rui_button(text: "Base", size: :base) %>
      <%= rui_button(text: "Large", size: :lg) %>
      <%= rui_button(text: "Extra Large", size: :xl) %>
      <%= rui_button(text: "Button - full width Base", size: :base, full_width: true) %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Shape buttons</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) %>
    </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: "loading", position: :leading) %>
      <% end %>
      <%= rui_button(text: "Buy now") do |button| %>
        <% button.with_icon(name: "shopping-cart", position: :leading) %>
      <% end %>
      <%= rui_button(text: "Send email") do |button| %>
        <% button.with_icon(name: "envelope", position: :trailing) %>
      <% end %>
      <%= rui_button(text: "Download now") do |button| %>
      <% button.with_icon(name: "arrow-down-tray", color: :success, position: :trailing, class: "animate-pulse") %>
      <% end %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Colored buttons</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <%= rui_button(text: "Red Button", style: :red) %>
      <%= rui_button(text: "Yellow Button", style: :yellow) %>
      <%= rui_button(text: "Green Button", style: :green) %>
      <%= rui_button(text: "Pink Button", style: :pink) %>
      <%= rui_button(text: "Purple Button", style: :purple) %>
      <%= rui_button(text: "Indigo Button", style: :indigo) %>
      <%= rui_button(text: "Amber Button", style: :amber) %>
    </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.