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
<div class="space-y-4">
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Button Preview</h3>
    <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 py-2 text-sm rounded-lg text-center justify-center"><span class="text-nowrap">Click me</span></button>  </div>
  <div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow">
    <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
    <ul class="list-disc list-inside">
      <li>Text: Click me</li>
      <li>Color: primary</li>
      <li>Variant: solid</li>
      <li>Size: sm</li>
      <li>Text Align: center</li>
      <li>Full Width: false</li>
      <li>Disabled: false</li>
      <li>Loading: false</li>
      <li>Shape: rounded</li>
      <li>Icon: </li>
      <li>Icon Position: leading</li>
      <li>URL: None</li>
    </ul>
  </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
<div class="space-y-4">
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Button Preview</h3>
    <%= rui_button(text: text, color: color, variant: variant, size: size, shape: shape, text_align: text_align, url: url, full_width: full_width, disabled: disabled, loading: loading) do |b| %>
      <% if icon.present? %>
        <% b.with_icon(name: icon, position: icon_position) %>
      <% end %>
    <% end %>
  </div>
  <div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow">
    <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
    <ul class="list-disc list-inside">
      <li>Text: <%= text %></li>
      <li>Color: <%= color %></li>
      <li>Variant: <%= variant %></li>
      <li>Size: <%= size %></li>
      <li>Text Align: <%= text_align %></li>
      <li>Full Width: <%= full_width %></li>
      <li>Disabled: <%= disabled %></li>
      <li>Loading: <%= loading %></li>
      <li>Shape: <%= shape %></li>
      <li>Icon: <%= icon %></li>
      <li>Icon Position: <%= icon_position %></li>
      <li>URL: <%= url || 'None' %></li>
    </ul>
  </div>
</div>

🎉 Button Component Playground! 🎉

Welcome to the playground! Here you can experiment with different configurations to see how your buttons will look and behave.

How to Use:

  1. Use the controls in the 'Params' section to customize your button.
  2. Watch the preview update in real-time as you make changes.
  3. Experiment with different combinations to find what works best for your app!

Tips:

  • Try different styles to see how the button appearance changes.
  • Add an icon to see how it integrates with the button text.
  • Experiment with different sizes and shapes.

Component Usage:

In your Rails views, you can use the button component like this:

<%= rui_button(text: "Click me", color: :primary) %>

or with an icon:

<%= rui_button(color: :warning, text: "Warning") do |button| %>
  <% button.with_icon(name: "warning", position: :leading) %>
<% end %>
Param Description Input

Button text

Button color

Button variant

Button size

Button shape

Button text alignment

Full width button?

Button URL (optional)

Button icon

Button icon position

Button disabled?

Button loading?