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">Social Button Preview</h3>
    <button type="button" class="inline-flex items-center justify-center font-medium focus:outline-none transition-colors duration-200 text-center mr-2 rounded-lg text-sm px-2 py-2 text-gray-800 bg-[#fbde08] hover:bg-[#fbde08]/80 dark:bg-[#fbde08]/90" role="button" aria-label="Sign in with Basecamp" aria-hidden="false"><span class="rui-button__content">
        <div class="rui-button__icon mr-2 "><svg viewbox="2 2 20 20" id="logo-basecamp" xmlns="http://www.w3.org/2000/svg" fill="none" class="w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-basecamp_logo icon-desc-basecamp_logo"><title id="icon-title-basecamp_logo">Basecamp logo</title>
            <desc id="icon-desc-basecamp_logo">Basecamp logo icon</desc><path fill="currentColor" d="M12.488 19.667a10.107 10.107 0 0 1-7.68-3.379.839.839 0 0 1-.166-.85c.525-1.396 1.945-4.68 3.763-4.701.922 0 1.6.725 2.15 1.306.186.2.385.387.597.559.424-.418 1.256-1.813 1.905-3.208a.835.835 0 0 1 1.514.7c-1.966 4.24-3.014 4.24-3.36 4.24-.766 0-1.322-.59-1.86-1.158-.239-.255-.74-.783-.921-.783-.424.07-1.355 1.536-2.021 3.152a8.349 8.349 0 0 0 6.095 2.457c3.296 0 5.763-.897 6.825-2.457-.38-4.194-2.688-9.877-6.84-9.877-3.515 0-6.163 2.458-7.871 7.275a.833.833 0 1 1-1.57-.556C5.014 6.823 8.19 4 12.488 4c5.613 0 8.2 7.17 8.51 11.692a.823.823 0 0 1-.108.473c-1.302 2.274-4.288 3.502-8.402 3.502Z"></path></svg>
        </div>
        <div class="rui-button__text">Sign in with Basecamp</div>
      </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>Platform: basecamp</li>
      <li>Text: Sign in with Basecamp</li>
      <li>Size: sm</li>
      <li>Shape: rounded</li>
      <li>Icon Only: false</li>
      <li>Icon Size: base</li>
      <li>Icon Position: leading</li>
      <li>Path: 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
29
<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">Social Button Preview</h3>
    <%= rui_socialbutton(
      platform: platform,
      text: text,
      size: size,
      shape: shape,
      icon_only: icon_only,
      path: path,
      icon_size: icon_size,
      icon_position: icon_position
    ) %>
  </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>Platform: <%= platform %></li>
      <li>Text: <%= text %></li>
      <li>Size: <%= size %></li>
      <li>Shape: <%= shape %></li>
      <li>Icon Only: <%= icon_only %></li>
      <li>Icon Size: <%= icon_size %></li>
      <li>Icon Position: <%= icon_position %></li>
      <li>Path: <%= path || 'None' %></li>
    </ul>
  </div>
</div>

🎉 Social Button Component Playground! 🎉

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

How to Use:

  1. Use the controls in the 'Params' section to customize your social 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!
Param Description Input

Social platform

Button text

Button size

Button shape

Icon only?

Icon size

Icon position

Button path (optional)