Pages

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
<!-- Starting Icon -->
<button type="button" class="btn-with-starting-icon btn" data-testid="button-button">
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-starting-icon">
<path d="M15 6L9 12L15 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Button
</button>
<!-- Ending Icon -->
<button type="button" class="btn-with-ending-icon btn" data-testid="button-button">
Button
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-ending-icon">
<path d="M9 6L15 12L9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<!-- Primary With Starting Icon -->
<button type="button" class="btn-with-starting-icon btn btn-primary" data-testid="button-button">
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-starting-icon">
<path d="M15 6L9 12L15 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Button
</button>
<!-- Primary With Ending Icon -->
<button type="button" class="btn-with-ending-icon btn btn-primary" data-testid="button-button">
Button
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-ending-icon">
<path d="M9 6L15 12L9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<!-- Critical With Starting Icon -->
<button type="button" class="btn-with-starting-icon btn btn-critical" data-testid="button-button">
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-starting-icon">
<path d="M15 6L9 12L15 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Button
</button>
<!-- Critical With Ending Icon -->
<button type="button" class="btn-with-ending-icon btn btn-critical" data-testid="button-button">
Button
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-ending-icon">
<path d="M9 6L15 12L9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<!-- Text With Starting Icon -->
<button type="button" class="btn-with-starting-icon btn btn-text" data-testid="button-button">
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-starting-icon">
<path d="M15 6L9 12L15 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Button
</button>
<!-- Text With Ending Icon -->
<button type="button" class="btn-with-ending-icon btn btn-text" data-testid="button-button">
Button
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-ending-icon">
<path d="M9 6L15 12L9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<!-- Small With Starting Icon -->
<button type="button" class="btn-small btn-with-starting-icon btn" data-testid="button-button">
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-starting-icon">
<path d="M15 6L9 12L15 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Button
</button>
<!-- Small With Ending Icon -->
<button type="button" class="btn-small btn-with-ending-icon btn" data-testid="button-button">
Button
<!-- Source: Iconoir, added via `bin/add_icon` -->
<svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-ending-icon">
<path d="M9 6L15 12L9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
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
# Starting Icon
anchor_button do |c|
c.with_starting_icon(icon: "nav-arrow-left")
"Button"
end
# Ending Icon
anchor_button do |c|
c.with_ending_icon(icon: "nav-arrow-right")
"Button"
end
# Primary With Starting Icon
anchor_button(variant: :primary) do |c|
c.with_starting_icon(icon: "nav-arrow-left")
"Button"
end
# Primary With Ending Icon
anchor_button(variant: :primary) do |c|
c.with_ending_icon(icon: "nav-arrow-right")
"Button"
end
# Critical With Starting Icon
anchor_button(variant: :critical) do |c|
c.with_starting_icon(icon: "nav-arrow-left")
"Button"
end
# Critical With Ending Icon
anchor_button(variant: :critical) do |c|
c.with_ending_icon(icon: "nav-arrow-right")
"Button"
end
# Text With Starting Icon
anchor_button(variant: :text) do |c|
c.with_starting_icon(icon: "nav-arrow-left")
"Button"
end
# Text With Ending Icon
anchor_button(variant: :text) do |c|
c.with_ending_icon(icon: "nav-arrow-right")
"Button"
end
# Small With Starting Icon
anchor_button(size: :small) do |c|
c.with_starting_icon(icon: "nav-arrow-left")
"Button"
end
# Small With Ending Icon
anchor_button(size: :small) do |c|
c.with_ending_icon(icon: "nav-arrow-right")
"Button"
end