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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<div class="space-y-12">
  <div>
    <h3 class="text-lg font-semibold">Social Buttons</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <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-white bg-[#3b5998] hover:bg-[#3b5998]/90 dark:hover:bg-[#3b5998]/90" role="button" aria-label="Sign in with Facebook" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 8 19" role="img" focusable="false" aria-labelledby="icon-title-facebook icon-desc-facebook"><title id="icon-title-facebook">Facebook</title>
              <desc id="icon-desc-facebook">Facebook icon</desc>
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="rui-button__text">Sign in with Facebook</div>
        </span></button>
      <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-white bg-[#1da1f2] hover:bg-[#1da1f2]/90 dark:hover:bg-[#1da1f2]/90" role="button" aria-label="Sign in with X" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="rr_social_button w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 20 20" role="img" focusable="false" aria-labelledby="icon-title-x icon-desc-x"><title id="icon-title-x">X</title>
              <desc id="icon-desc-x">X icon</desc>
              <path fill="currentColor" d="M12.186 8.672 18.743.947h-2.927l-5.005 5.9-4.44-5.9H0l7.434 9.876-6.986 8.23h2.927l5.434-6.4 4.82 6.4H20L12.186 8.672Zm-2.267 2.671L8.544 9.515 3.2 2.42h2.2l4.312 5.719 1.375 1.828 5.731 7.613h-2.2l-4.699-6.237Z"></path>
            </svg>
          </div>
          <div class="rui-button__text">Sign in with X</div>
        </span></button>
      <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-white bg-[#24292F] hover:bg-[#24292F]/90 dark:hover:bg-[#24292F]/90" role="button" aria-label="Sign in with GitHub" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 ">  <svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 20 20" role="img" focusable="false" aria-labelledby="icon-title-github icon-desc-github"><title id="icon-title-github">Github</title>
              <desc id="icon-desc-github">Github icon</desc>
              <path fill-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="rui-button__text">Sign in with GitHub</div>
        </span></button>
      <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-white bg-[#4285F4] hover:bg-[#4285F4]/90 dark:hover:bg-[#4285F4]/90" role="button" aria-label="Sign in with Google" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 19" role="img" focusable="false" aria-labelledby="icon-title-google icon-desc-google"><title id="icon-title-google">Google</title>
              <desc id="icon-desc-google">Google icon</desc>
              <path fill-rule="evenodd" d="M8.842 18.083a8.8 8.8 0 0 1-8.65-8.948 8.841 8.841 0 0 1 8.8-8.652h.153a8.464 8.464 0 0 1 5.7 2.257l-2.193 2.038A5.27 5.27 0 0 0 9.09 3.4a5.882 5.882 0 0 0-.2 11.76h.124a5.091 5.091 0 0 0 5.248-4.057L14.3 11H9V8h8.34c.066.543.095 1.09.088 1.636-.086 5.053-3.463 8.449-8.4 8.449l-.186-.002Z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="rui-button__text">Sign in with Google</div>
        </span></button>
      <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-white bg-[#050708] hover:bg-[#050708]/90 dark:hover:bg-[#050708]/90" role="button" aria-label="Sign in with Apple" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 21" role="img" focusable="false" aria-labelledby="icon-title-apple icon-desc-apple"><title id="icon-title-apple">Apple</title>
              <desc id="icon-desc-apple">Apple icon</desc>
              <path d="M14.537 10.625a4.421 4.421 0 0 0 2.684 4.047 10.96 10.96 0 0 1-1.384 2.845c-.834 1.218-1.7 2.432-3.062 2.457-1.339.025-1.769-.794-3.3-.794s-2.009.769-3.275.82c-1.316.049-2.317-1.318-3.158-2.532C1.323 14.984.01 10.451 1.772 7.391a4.9 4.9 0 0 1 4.139-2.507c1.292-.025 2.511.869 3.3.869.789 0 2.271-1.075 3.828-.917A4.67 4.67 0 0 1 16.7 6.82a4.524 4.524 0 0 0-2.161 3.805M12.02 3.193A4.4 4.4 0 0 0 13.06 0a4.482 4.482 0 0 0-2.946 1.516 4.185 4.185 0 0 0-1.061 3.093 3.708 3.708 0 0 0 2.967-1.416Z"></path>
            </svg>
          </div>
          <div class="rui-button__text">Sign in with Apple</div>
        </span></button>
      <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" class="w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-basecamp icon-desc-basecamp"><title id="icon-title-basecamp">Basecamp</title>
              <desc id="icon-desc-basecamp">Basecamp 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>
  <div>
    <h3 class="text-lg font-semibold">Different Sizes</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <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-xs px-2 py-2 text-white bg-[#3b5998] hover:bg-[#3b5998]/90 dark:hover:bg-[#3b5998]/90" role="button" aria-label="Extra Small" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="w-5 h-5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 8 19" role="img" focusable="false" aria-labelledby="icon-title-facebook icon-desc-facebook"><title id="icon-title-facebook">Facebook</title>
              <desc id="icon-desc-facebook">Facebook icon</desc>
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="rui-button__text">Extra Small</div>
        </span></button>
      <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-white bg-[#3b5998] hover:bg-[#3b5998]/90 dark:hover:bg-[#3b5998]/90" role="button" aria-label="Small" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 8 19" role="img" focusable="false" aria-labelledby="icon-title-facebook icon-desc-facebook"><title id="icon-title-facebook">Facebook</title>
              <desc id="icon-desc-facebook">Facebook icon</desc>
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="rui-button__text">Small</div>
        </span></button>
      <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-base px-2 py-2 text-white bg-[#3b5998] hover:bg-[#3b5998]/90 dark:hover:bg-[#3b5998]/90" role="button" aria-label="Base" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="w-5 h-5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 8 19" role="img" focusable="false" aria-labelledby="icon-title-facebook icon-desc-facebook"><title id="icon-title-facebook">Facebook</title>
              <desc id="icon-desc-facebook">Facebook icon</desc>
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="rui-button__text">Base</div>
        </span></button>
      <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-lg px-2.5 py-2.5 text-white bg-[#3b5998] hover:bg-[#3b5998]/90 dark:hover:bg-[#3b5998]/90" role="button" aria-label="Large" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="w-6 h-6 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 8 19" role="img" focusable="false" aria-labelledby="icon-title-facebook icon-desc-facebook"><title id="icon-title-facebook">Facebook</title>
              <desc id="icon-desc-facebook">Facebook icon</desc>
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="rui-button__text">Large</div>
        </span></button>
      <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-xl px-3 py-3 text-white bg-[#3b5998] hover:bg-[#3b5998]/90 dark:hover:bg-[#3b5998]/90" role="button" aria-label="Extra Large" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="w-5 h-5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 8 19" role="img" focusable="false" aria-labelledby="icon-title-facebook icon-desc-facebook"><title id="icon-title-facebook">Facebook</title>
              <desc id="icon-desc-facebook">Facebook icon</desc>
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="rui-button__text">Extra Large</div>
        </span></button>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Different Shapes</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <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="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" class="w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-basecamp icon-desc-basecamp"><title id="icon-title-basecamp">Basecamp</title>
              <desc id="icon-desc-basecamp">Basecamp 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">Basecamp</div>
        </span></button>
      <button type="button" class="inline-flex items-center justify-center font-medium focus:outline-none transition-colors duration-200 text-center mr-2 rounded-full text-sm px-2 py-2 text-white bg-[#1da1f2] hover:bg-[#1da1f2]/90 dark:hover:bg-[#1da1f2]/90" role="button" aria-label="Twitter" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="rr_social_button w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 20 20" role="img" focusable="false" aria-labelledby="icon-title-x icon-desc-x"><title id="icon-title-x">X</title>
              <desc id="icon-desc-x">X icon</desc>
              <path fill="currentColor" d="M12.186 8.672 18.743.947h-2.927l-5.005 5.9-4.44-5.9H0l7.434 9.876-6.986 8.23h2.927l5.434-6.4 4.82 6.4H20L12.186 8.672Zm-2.267 2.671L8.544 9.515 3.2 2.42h2.2l4.312 5.719 1.375 1.828 5.731 7.613h-2.2l-4.699-6.237Z"></path>
            </svg>
          </div>
          <div class="rui-button__text">Twitter</div>
        </span></button>
      <button type="button" class="inline-flex items-center justify-center font-medium focus:outline-none transition-colors duration-200 text-center mr-2 rounded-none text-sm px-2 py-2 text-white bg-[#3b5998] hover:bg-[#3b5998]/90 dark:hover:bg-[#3b5998]/90" role="button" aria-label="Facebook" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon mr-2 "><svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 8 19" role="img" focusable="false" aria-labelledby="icon-title-facebook icon-desc-facebook"><title id="icon-title-facebook">Facebook</title>
              <desc id="icon-desc-facebook">Facebook icon</desc>
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="rui-button__text">Facebook</div>
        </span></button>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Icon Only Buttons</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <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-white bg-[#3b5998] hover:bg-[#3b5998]/90 dark:hover:bg-[#3b5998]/90" role="button" aria-label="Sign in with Facebook" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon  "><svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 8 19" role="img" focusable="false" aria-labelledby="icon-title-facebook icon-desc-facebook"><title id="icon-title-facebook">Facebook</title>
              <desc id="icon-desc-facebook">Facebook icon</desc>
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"></path>
            </svg>
          </div>
        </span></button>
      <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-white bg-[#1da1f2] hover:bg-[#1da1f2]/90 dark:hover:bg-[#1da1f2]/90" role="button" aria-label="Sign in with X" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon  "><svg class="rr_social_button w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 20 20" role="img" focusable="false" aria-labelledby="icon-title-x icon-desc-x"><title id="icon-title-x">X</title>
              <desc id="icon-desc-x">X icon</desc>
              <path fill="currentColor" d="M12.186 8.672 18.743.947h-2.927l-5.005 5.9-4.44-5.9H0l7.434 9.876-6.986 8.23h2.927l5.434-6.4 4.82 6.4H20L12.186 8.672Zm-2.267 2.671L8.544 9.515 3.2 2.42h2.2l4.312 5.719 1.375 1.828 5.731 7.613h-2.2l-4.699-6.237Z"></path>
            </svg>
          </div>
        </span></button>
      <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-white bg-[#24292F] hover:bg-[#24292F]/90 dark:hover:bg-[#24292F]/90" role="button" aria-label="Sign in with Github" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon  ">  <svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 20 20" role="img" focusable="false" aria-labelledby="icon-title-github icon-desc-github"><title id="icon-title-github">Github</title>
              <desc id="icon-desc-github">Github icon</desc>
              <path fill-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clip-rule="evenodd"></path>
            </svg>
          </div>
        </span></button>
      <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-white bg-[#4285F4] hover:bg-[#4285F4]/90 dark:hover:bg-[#4285F4]/90" role="button" aria-label="Sign in with Google" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon  "><svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 19" role="img" focusable="false" aria-labelledby="icon-title-google icon-desc-google"><title id="icon-title-google">Google</title>
              <desc id="icon-desc-google">Google icon</desc>
              <path fill-rule="evenodd" d="M8.842 18.083a8.8 8.8 0 0 1-8.65-8.948 8.841 8.841 0 0 1 8.8-8.652h.153a8.464 8.464 0 0 1 5.7 2.257l-2.193 2.038A5.27 5.27 0 0 0 9.09 3.4a5.882 5.882 0 0 0-.2 11.76h.124a5.091 5.091 0 0 0 5.248-4.057L14.3 11H9V8h8.34c.066.543.095 1.09.088 1.636-.086 5.053-3.463 8.449-8.4 8.449l-.186-.002Z" clip-rule="evenodd"></path>
            </svg>
          </div>
        </span></button>
      <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-white bg-[#050708] hover:bg-[#050708]/90 dark:hover:bg-[#050708]/90" role="button" aria-label="Sign in with Apple" aria-hidden="false"><span class="rui-button__content">
          <div class="rui-button__icon  "><svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 21" role="img" focusable="false" aria-labelledby="icon-title-apple icon-desc-apple"><title id="icon-title-apple">Apple</title>
              <desc id="icon-desc-apple">Apple icon</desc>
              <path d="M14.537 10.625a4.421 4.421 0 0 0 2.684 4.047 10.96 10.96 0 0 1-1.384 2.845c-.834 1.218-1.7 2.432-3.062 2.457-1.339.025-1.769-.794-3.3-.794s-2.009.769-3.275.82c-1.316.049-2.317-1.318-3.158-2.532C1.323 14.984.01 10.451 1.772 7.391a4.9 4.9 0 0 1 4.139-2.507c1.292-.025 2.511.869 3.3.869.789 0 2.271-1.075 3.828-.917A4.67 4.67 0 0 1 16.7 6.82a4.524 4.524 0 0 0-2.161 3.805M12.02 3.193A4.4 4.4 0 0 0 13.06 0a4.482 4.482 0 0 0-2.946 1.516 4.185 4.185 0 0 0-1.061 3.093 3.708 3.708 0 0 0 2.967-1.416Z"></path>
            </svg>
          </div>
        </span></button>
      <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  "><svg viewbox="2 2 20 20" id="logo-basecamp" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-basecamp icon-desc-basecamp"><title id="icon-title-basecamp">Basecamp</title>
              <desc id="icon-desc-basecamp">Basecamp 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>
        </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
<div class="space-y-12">
  <div>
    <h3 class="text-lg font-semibold">Social Buttons</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <%= rui_socialbutton(platform: :facebook, text: "Sign in with Facebook") %>
      <%= rui_socialbutton(platform: :x, text: "Sign in with X") %>
      <%= rui_socialbutton(platform: :github, text: "Sign in with GitHub") %>
      <%= rui_socialbutton(platform: :google, text: "Sign in with Google") %>
      <%= rui_socialbutton(platform: :apple, text: "Sign in with Apple") %>
      <%= rui_socialbutton(platform: :basecamp, text: "Sign in with Basecamp") %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Different Sizes</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
    <%= rui_socialbutton(platform: :facebook, text: "Extra Small", size: :xs) %>
    <%= rui_socialbutton(platform: :facebook, text: "Small", size: :sm) %>
    <%= rui_socialbutton(platform: :facebook, text: "Base", size: :base) %>
    <%= rui_socialbutton(platform: :facebook, text: "Large", size: :lg) %>
      <%= rui_socialbutton(platform: :facebook, text: "Extra Large", size: :xl) %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Different Shapes</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <%= rui_socialbutton(platform: :basecamp, text: "Basecamp", shape: :rounded) %>
      <%= rui_socialbutton(platform: :x, text: "Twitter", shape: :pill) %>
      <%= rui_socialbutton(platform: :facebook, text: "Facebook", shape: :square) %>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold">Icon Only Buttons</h3>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <%= rui_socialbutton(platform: :facebook, icon_only: true) %>
      <%= rui_socialbutton(platform: :x, icon_only: true) %>
      <%= rui_socialbutton(platform: :github, icon_only: true) %>
      <%= rui_socialbutton(platform: :google, icon_only: true) %>
      <%= rui_socialbutton(platform: :apple, icon_only: true) %>
      <%= rui_socialbutton(platform: :basecamp, icon_only: true) %>
    </div>
  </div>
</div>

🚀 Social Button Component Overview

This preview showcases various types of social buttons:

  • Different platforms: Facebook, Twitter (X), GitHub, Google, Apple, Basecamp
  • Buttons with different sizes and shapes
  • Icon-only buttons

A simple version to use it: <%= rui_socialbutton(platform: :facebook, text: "Sign in with Facebook") %>

For customization options, check out the 'Playground' section 🎛️

No params configured.