RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 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">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>Style: default</li>
      <li>Size: sm</li>
      <li>Text Align: center</li>
      <li>Full Width: 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
<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, style: style, size: size, shape: shape, text_align: text_align, url: url, full_width: full_width) 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>Style: <%= style %></li>
      <li>Size: <%= size %></li>
      <li>Text Align: <%= text_align %></li>
      <li>Full Width: <%= full_width %></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", style: :primary) %>

or with an icon:

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

Button text

Button style

Button size

Button shape

Button text alignment

Full width button?

Button URL (optional)

Button icon

Button icon position