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
<div class="p-8 space-y-8"> <div> <h3 class="text-lg font-semibold mb-4 capitalize">solid Link Tags</h3> <div class="flex flex-wrap gap-3"> <a href="#" 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"> Primary </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-secondary-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5"> Secondary </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-accent-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5"> Accent </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-success-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5"> Success </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-danger-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5"> Danger </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-warning-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5"> Warning </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-info-600 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5"> Info </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-grayscale-100 text-grayscale-900 px-2.5 py-1 text-sm gap-1.5"> Light </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-grayscale-900 text-grayscale-50 px-2.5 py-1 text-sm gap-1.5"> Dark </a> </div> </div> <div> <h3 class="text-lg font-semibold mb-4 capitalize">outline Link Tags</h3> <div class="flex flex-wrap gap-3"> <a href="#" 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"> Primary </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-secondary-600 text-secondary-600 px-2.5 py-1 text-sm gap-1.5"> Secondary </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-accent-600 text-accent-600 px-2.5 py-1 text-sm gap-1.5"> Accent </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-success-600 text-success-600 px-2.5 py-1 text-sm gap-1.5"> Success </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-danger-600 text-danger-600 px-2.5 py-1 text-sm gap-1.5"> Danger </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-warning-600 text-warning-600 px-2.5 py-1 text-sm gap-1.5"> Warning </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-info-600 text-info-600 px-2.5 py-1 text-sm gap-1.5"> Info </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-grayscale-400 text-grayscale-500 px-2.5 py-1 text-sm gap-1.5"> Light </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-transparent border border-grayscale-700 text-grayscale-700 px-2.5 py-1 text-sm gap-1.5"> Dark </a> </div> </div> <div> <h3 class="text-lg font-semibold mb-4 capitalize">soft Link Tags</h3> <div class="flex flex-wrap gap-3"> <a href="#" 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"> Primary </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-secondary-100 text-secondary-700 px-2.5 py-1 text-sm gap-1.5"> Secondary </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-accent-100 text-accent-700 px-2.5 py-1 text-sm gap-1.5"> Accent </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-success-100 text-success-700 px-2.5 py-1 text-sm gap-1.5"> Success </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-danger-100 text-danger-700 px-2.5 py-1 text-sm gap-1.5"> Danger </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-warning-100 text-warning-700 px-2.5 py-1 text-sm gap-1.5"> Warning </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-info-100 text-info-700 px-2.5 py-1 text-sm gap-1.5"> Info </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-grayscale-100 text-grayscale-700 px-2.5 py-1 text-sm gap-1.5"> Light </a> <a href="#" class="inline-flex items-center font-medium rounded-full transition-colors duration-200 bg-grayscale-800 text-grayscale-100 px-2.5 py-1 text-sm gap-1.5"> Dark </a> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="p-8 space-y-8"> <% [:solid, :outline, :soft].each do |style| %> <div> <h3 class="text-lg font-semibold mb-4 capitalize"><%= style %> Link Tags</h3> <div class="flex flex-wrap gap-3"> <% BetterUi::ApplicationComponent::VARIANTS.keys.each do |variant| %> <%= render BetterUi::TagComponent.new(variant: variant, style: style, href: "#") do %> <%= variant.to_s.capitalize %> <% end %> <% end %> </div> </div> <% end %></div>No notes provided.
No params configured.