BetterUi Components

Previews

No matching results.

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
<div class="p-8">
  <h3 class="text-lg font-semibold mb-6">Link Sizes</h3>
  <div class="space-y-6">
    <div class="flex items-center gap-4">
      <span class="w-20 text-sm font-medium text-gray-600 uppercase">xs</span>
      <div class="flex flex-wrap gap-4">
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-xs text-primary-600 hover:text-primary-800">
          Default XS
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-xs underline underline-offset-2 decoration-1 text-secondary-600 hover:text-secondary-800">
          Underline XS
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-xs text-success-600 hover:bg-success-50 px-1 py-0.5 rounded">
          Ghost XS
        </a>
      </div>
    </div>
    <div class="flex items-center gap-4">
      <span class="w-20 text-sm font-medium text-gray-600 uppercase">sm</span>
      <div class="flex flex-wrap gap-4">
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-sm text-primary-600 hover:text-primary-800">
          Default SM
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-sm underline underline-offset-2 decoration-1 text-secondary-600 hover:text-secondary-800">
          Underline SM
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-sm text-success-600 hover:bg-success-50 px-1 py-0.5 rounded">
          Ghost SM
        </a>
      </div>
    </div>
    <div class="flex items-center gap-4">
      <span class="w-20 text-sm font-medium text-gray-600 uppercase">md</span>
      <div class="flex flex-wrap gap-4">
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-primary-600 hover:text-primary-800">
          Default MD
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base underline underline-offset-2 decoration-1 text-secondary-600 hover:text-secondary-800">
          Underline MD
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-success-600 hover:bg-success-50 px-1 py-0.5 rounded">
          Ghost MD
        </a>
      </div>
    </div>
    <div class="flex items-center gap-4">
      <span class="w-20 text-sm font-medium text-gray-600 uppercase">lg</span>
      <div class="flex flex-wrap gap-4">
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-lg text-primary-600 hover:text-primary-800">
          Default LG
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-lg underline underline-offset-2 decoration-1 text-secondary-600 hover:text-secondary-800">
          Underline LG
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-lg text-success-600 hover:bg-success-50 px-1 py-0.5 rounded">
          Ghost LG
        </a>
      </div>
    </div>
    <div class="flex items-center gap-4">
      <span class="w-20 text-sm font-medium text-gray-600 uppercase">xl</span>
      <div class="flex flex-wrap gap-4">
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-xl text-primary-600 hover:text-primary-800">
          Default XL
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-xl underline underline-offset-2 decoration-1 text-secondary-600 hover:text-secondary-800">
          Underline XL
        </a>
        <a  href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-xl text-success-600 hover:bg-success-50 px-1 py-0.5 rounded">
          Ghost XL
        </a>
      </div>
    </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
<div class="p-8">
  <h3 class="text-lg font-semibold mb-6">Link Sizes</h3>
  <div class="space-y-6">
    <% (@sizes || [:xs, :sm, :md, :lg, :xl]).each do |size| %>
      <div class="flex items-center gap-4">
        <span class="w-20 text-sm font-medium text-gray-600 uppercase"><%= size %></span>
        <div class="flex flex-wrap gap-4">
          <%= render BetterUi::LinkComponent.new(href: "#", size: size, variant: :primary) do %>
            Default <%= size.to_s.upcase %>
          <% end %>
          <%= render BetterUi::LinkComponent.new(href: "#", size: size, variant: :secondary, style: :underline) do %>
            Underline <%= size.to_s.upcase %>
          <% end %>
          <%= render BetterUi::LinkComponent.new(href: "#", size: size, variant: :success, style: :ghost) do %>
            Ghost <%= size.to_s.upcase %>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>

No notes provided.

No params configured.