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
<div class="p-8 space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4 capitalize">Size: xs</h3>
    <div class="flex flex-wrap gap-3">
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-primary-600 text-grayscale-50 px-1.5 py-0.5 text-xs gap-1">
        Solid
      </span>
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-primary-600 text-primary-600 px-1.5 py-0.5 text-xs gap-1">
        Outline
      </span>
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-primary-100 text-primary-700 px-1.5 py-0.5 text-xs gap-1">
        Soft
      </span>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4 capitalize">Size: sm</h3>
    <div class="flex flex-wrap gap-3">
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-primary-600 text-grayscale-50 px-2 py-0.5 text-xs gap-1">
        Solid
      </span>
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-primary-600 text-primary-600 px-2 py-0.5 text-xs gap-1">
        Outline
      </span>
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-primary-100 text-primary-700 px-2 py-0.5 text-xs gap-1">
        Soft
      </span>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4 capitalize">Size: md</h3>
    <div class="flex flex-wrap gap-3">
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-primary-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5">
        Solid
      </span>
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-primary-600 text-primary-600 px-2.5 py-1 text-sm gap-1.5">
        Outline
      </span>
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-primary-100 text-primary-700 px-2.5 py-1 text-sm gap-1.5">
        Soft
      </span>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-4 capitalize">Size: lg</h3>
    <div class="flex flex-wrap gap-3">
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-primary-600 text-grayscale-50 px-3 py-1.5 text-base gap-2">
        Solid
      </span>
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-primary-600 text-primary-600 px-3 py-1.5 text-base gap-2">
        Outline
      </span>
      <span  class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-primary-100 text-primary-700 px-3 py-1.5 text-base gap-2">
        Soft
      </span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="p-8 space-y-8">
  <% [:xs, :sm, :md, :lg].each do |size| %>
    <div>
      <h3 class="text-lg font-semibold mb-4 capitalize">Size: <%= size %></h3>
      <div class="flex flex-wrap gap-3">
        <% [:solid, :outline, :soft].each do |style| %>
          <%= render BetterUi::TagComponent.new(style: style, size: size) do %>
            <%= style.to_s.capitalize %>
          <% end %>
        <% end %>
      </div>
    </div>
  <% end %>
</div>

No notes provided.

No params configured.