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 type="button" class="rounded-lg text-xs px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap">Extra Small</span></button>
      <button type="button" class="rounded-lg text-xs px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-white dark:bg-white bg-black dark:text-black hover:bg-black/80 dark:hover:bg-white/80"><span class="text-nowrap">Extra Small BnW</span></button>
      <button type="button" class="rounded-lg text-xs px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-red-700 dark:text-red-200 bg-red-400/30 dark:bg-red-400/60 hover:bg-red-400/20 dark:hover:bg-red-400/70 border dark:border-red-700 border-red-200"><span class="text-nowrap">Extra Small Danger</span></button>
      <button type="button" class="rounded-lg text-xs px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-sky-700 dark:text-sky-200 bg-sky-400/30 dark:bg-sky-400/60 hover:bg-sky-400/20 dark:hover:bg-sky-400/70 border dark:border-sky-700 border-sky-200"><span class="text-nowrap">Extra Small Info</span></button>
      <button type="button" class="rounded-lg text-xs px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-gray-400 bg-gray-500 border-gray-600 dark:text-600 dark:bg-gray-700 disabled:cursor-not-allowed cursor-not-allowed disabled:text-gray-500 disabled:bg-gray-200 dark:disabled:opacity-75 disabled:pointer-events-none"><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 type="button" class="rounded-lg text-xs px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap"> Extra Small</span></button>
      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap">Small</span></button>
      <button type="button" class="rounded-lg text-sm lg:text-base px-3 py-2  justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap">Base</span></button>
      <button type="button" class="rounded-lg text-sm lg:text-lg px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap">Large</span></button>
      <button type="button" class="rounded-lg text-sm lg:text-xl px-3 py-3 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap">Extra Large</span></button>
      <button type="button" class="rounded-lg text-sm lg:text-base px-3 py-2  justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600 flex 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 type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap">Rounded button</span></button>
      <button type="button" class="rounded-full text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap">Pill button</span></button>
      <button type="button" class="rounded-none text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><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 type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap">Loading...</span></button>      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><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-5 h-5 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>
        <span class="text-nowrap">Buy now</span></button>      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><span class="text-nowrap">Send email</span></button>      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-neutral-800 dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-600/75 border dark:border-neutral-600 border-neutral-200 hover:border-neutral-200 dark:hover:border-neutral-600"><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 type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-red-700 dark:text-red-200 bg-red-400/30 dark:bg-red-400/60 hover:bg-red-400/40 hover:dark:bg-red-400/50 border dark:border-red-700 border-red-200"><span class="text-nowrap">Red Button</span></button>
      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-yellow-700 dark:text-yellow-200 bg-yellow-400/30 dark:bg-yellow-400/60 hover:bg-yellow-400/40 hover:dark:bg-yellow-400/50 border dark:border-yellow-700 border-yellow-200"><span class="text-nowrap">Yellow Button</span></button>
      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-green-800 dark:text-green-200 bg-green-400/20 dark:bg-green-400/40 hover:bg-green-400/30 hover:dark:bg-green-400/50 border dark:border-green-700 border-green-200"><span class="text-nowrap">Green Button</span></button>
      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-pink-700 dark:text-pink-200 bg-pink-400/30 dark:bg-pink-400/60 hover:bg-pink-400/40 hover:dark:bg-pink-400/50 border dark:border-pink-700 border-pink-200"><span class="text-nowrap">Pink Button</span></button>
      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-purple-700 dark:text-purple-200 bg-purple-400/30 dark:bg-purple-400/60 hover:bg-purple-400/40 hover:dark:bg-purple-400/50 border dark:border-purple-700 border-purple-200"><span class="text-nowrap">Purple Button</span></button>
      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-indigo-700 dark:text-indigo-200 bg-indigo-400/30 dark:bg-indigo-400/60 hover:bg-indigo-400/40 hover:dark:bg-indigo-400/50 border dark:border-indigo-700 border-indigo-200"><span class="text-nowrap">Indigo Button</span></button>
      <button type="button" class="rounded-lg text-sm px-3 py-2 justify-center items-center inline-flex items-center relative m-0 dark:shadow-none font-medium focus:outline-none focus:ring-2 transition-colors duration-200 overflow-hidden shadow-sm whitespace-nowrap text-amber-700 dark:text-amber-200 bg-amber-400/30 dark:bg-amber-400/60 hover:bg-amber-400/40 hover:dark:bg-amber-400/50 border dark:border-amber-700 border-amber-200"><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.