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
<div class="p-8"> <h3 class="text-lg font-semibold mb-6">Badge 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-3 items-center"> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-primary-600 text-grayscale-50 px-1.5 py-0.5 text-xs gap-1 rounded-full"> Solid XS </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-secondary-600 text-secondary-600 px-1.5 py-0.5 text-xs gap-1 rounded-full"> Outline XS </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-success-100 text-success-700 px-1.5 py-0.5 text-xs gap-1 rounded-full"> Soft XS </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-danger-600 px-1.5 py-0.5 text-xs gap-1 rounded-full"> Ghost XS </span> </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-3 items-center"> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-primary-600 text-grayscale-50 px-2 py-0.5 text-xs gap-1 rounded-full"> Solid SM </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-secondary-600 text-secondary-600 px-2 py-0.5 text-xs gap-1 rounded-full"> Outline SM </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-success-100 text-success-700 px-2 py-0.5 text-xs gap-1 rounded-full"> Soft SM </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-danger-600 px-2 py-0.5 text-xs gap-1 rounded-full"> Ghost SM </span> </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-3 items-center"> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-primary-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5 rounded-full"> Solid MD </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-secondary-600 text-secondary-600 px-2.5 py-1 text-sm gap-1.5 rounded-full"> Outline MD </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-success-100 text-success-700 px-2.5 py-1 text-sm gap-1.5 rounded-full"> Soft MD </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-danger-600 px-2.5 py-1 text-sm gap-1.5 rounded-full"> Ghost MD </span> </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-3 items-center"> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-primary-600 text-grayscale-50 px-3 py-1.5 text-base gap-2 rounded-full"> Solid LG </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent border border-secondary-600 text-secondary-600 px-3 py-1.5 text-base gap-2 rounded-full"> Outline LG </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-success-100 text-success-700 px-3 py-1.5 text-base gap-2 rounded-full"> Soft LG </span> <span class="inline-flex items-center font-medium transition-colors duration-200 bg-transparent text-danger-600 px-3 py-1.5 text-base gap-2 rounded-full"> Ghost LG </span> </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
26
27
28
29
<div class="p-8"> <h3 class="text-lg font-semibold mb-6">Badge Sizes</h3> <div class="space-y-6"> <% (@sizes || [:xs, :sm, :md, :lg]).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-3 items-center"> <%= render BetterUi::BadgeComponent.new(size: size, variant: :primary) do %> Solid <%= size.to_s.upcase %> <% end %> <%= render BetterUi::BadgeComponent.new(size: size, variant: :secondary, style: :outline) do %> Outline <%= size.to_s.upcase %> <% end %> <%= render BetterUi::BadgeComponent.new(size: size, variant: :success, style: :soft) do %> Soft <%= size.to_s.upcase %> <% end %> <%= render BetterUi::BadgeComponent.new(size: size, variant: :danger, style: :ghost) do %> Ghost <%= size.to_s.upcase %> <% end %> </div> </div> <% end %> </div></div>No notes provided.
No params configured.