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">default Style</h3> <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"> Primary (default) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-secondary-600 hover:text-secondary-800"> Secondary (default) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-accent-600 hover:text-accent-800"> Accent (default) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-success-600 hover:text-success-800"> Success (default) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-danger-600 hover:text-danger-800"> Danger (default) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-warning-600 hover:text-warning-800"> Warning (default) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-info-600 hover:text-info-800"> Info (default) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-grayscale-400 hover:text-grayscale-600"> Light (default) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-grayscale-800 hover:text-grayscale-950"> Dark (default) </a> </div> </div> <div> <h3 class="text-lg font-semibold mb-4 capitalize">underline Style</h3> <div class="flex flex-wrap gap-4"> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base underline underline-offset-2 decoration-1 text-primary-600 hover:text-primary-800"> Primary (underline) </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"> Secondary (underline) </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-accent-600 hover:text-accent-800"> Accent (underline) </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-success-600 hover:text-success-800"> Success (underline) </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-danger-600 hover:text-danger-800"> Danger (underline) </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-warning-600 hover:text-warning-800"> Warning (underline) </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-info-600 hover:text-info-800"> Info (underline) </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-grayscale-400 hover:text-grayscale-600"> Light (underline) </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-grayscale-800 hover:text-grayscale-950"> Dark (underline) </a> </div> </div> <div> <h3 class="text-lg font-semibold mb-4 capitalize">ghost Style</h3> <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:bg-primary-50 px-1 py-0.5 rounded"> Primary (ghost) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-secondary-600 hover:bg-secondary-50 px-1 py-0.5 rounded"> Secondary (ghost) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-accent-600 hover:bg-accent-50 px-1 py-0.5 rounded"> Accent (ghost) </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"> Success (ghost) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-danger-600 hover:bg-danger-50 px-1 py-0.5 rounded"> Danger (ghost) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-warning-600 hover:bg-warning-50 px-1 py-0.5 rounded"> Warning (ghost) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-info-600 hover:bg-info-50 px-1 py-0.5 rounded"> Info (ghost) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-grayscale-400 hover:bg-grayscale-50 px-1 py-0.5 rounded"> Light (ghost) </a> <a href="#" class="inline-flex items-center gap-1 transition-colors duration-200 cursor-pointer text-base text-grayscale-800 hover:bg-grayscale-100 px-1 py-0.5 rounded"> Dark (ghost) </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"> <% (@styles || [:default, :underline, :ghost]).each do |style| %> <div> <h3 class="text-lg font-semibold mb-4 capitalize"><%= style %> Style</h3> <div class="flex flex-wrap gap-4"> <% (@variants || BetterUi::ApplicationComponent::VARIANTS.keys).each do |variant| %> <%= render BetterUi::LinkComponent.new(href: "#", variant: variant, style: style) do %> <%= variant.to_s.capitalize %> (<%= style %>) <% end %> <% end %> </div> </div> <% end %></div>No notes provided.
No params configured.