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
<div class="p-8 space-y-8"> <div> <h3 class="text-lg font-semibold mb-4">Link with Icon Before</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"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> External Link </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"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> Confirmed </a> </div> </div> <div> <h3 class="text-lg font-semibold mb-4">Link with Icon After</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"> Continue <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path> </svg> </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"> Delete <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path> </svg> </a> </div> </div> <div> <h3 class="text-lg font-semibold mb-4">Link with Both Icons</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-info-600 hover:text-info-800"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> </svg> Documentation <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </a> </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
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
<div class="p-8 space-y-8"> <div> <h3 class="text-lg font-semibold mb-4">Link with Icon Before</h3> <div class="flex flex-wrap gap-4"> <%= render BetterUi::LinkComponent.new(href: "#", variant: :primary) do |link| %> <% link.with_icon_before do %> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> <% end %> External Link <% end %> <%= render BetterUi::LinkComponent.new(href: "#", variant: :success, style: :underline) do |link| %> <% link.with_icon_before do %> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <% end %> Confirmed <% end %> </div> </div> <div> <h3 class="text-lg font-semibold mb-4">Link with Icon After</h3> <div class="flex flex-wrap gap-4"> <%= render BetterUi::LinkComponent.new(href: "#", variant: :primary) do |link| %> <% link.with_icon_after do %> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path> </svg> <% end %> Continue <% end %> <%= render BetterUi::LinkComponent.new(href: "#", variant: :danger, style: :ghost) do |link| %> <% link.with_icon_after do %> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path> </svg> <% end %> Delete <% end %> </div> </div> <div> <h3 class="text-lg font-semibold mb-4">Link with Both Icons</h3> <div class="flex flex-wrap gap-4"> <%= render BetterUi::LinkComponent.new(href: "#", variant: :info) do |link| %> <% link.with_icon_before do %> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> </svg> <% end %> <% link.with_icon_after do %> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> <% end %> Documentation <% end %> </div> </div></div>No notes provided.
No params configured.