x
1
<button name="button" type="button" class="btn btn--feedback">Feedback</button>1
<%= button_tag "Feedback", type: "button", class: "btn btn--feedback" %>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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
.btn { align-items: center; background-color: var(--btn-background, var(--color-surface)); block-size: var(--btn-block-size, auto); border: 1px solid var(--btn-border-color, var(--color-border)); border-radius: var(--btn-radius, var(--rounded-lg)); box-shadow: var(--btn-box-shadow, var(--shadow-xs)); color: var(--btn-color, var(--color-text)); column-gap: var(--btn-column-gap, var(--size-1_5)); cursor: var(--btn-cursor, default); display: inline-flex; font-size: var(--btn-font-size, var(--text-sm)); font-weight: var(--btn-font-weight, var(--font-medium)); inline-size: var(--btn-inline-size, auto); justify-content: var(--btn-justify-content, center); padding: var(--btn-padding, .25rem .625rem); position: relative; white-space: nowrap; .icon { --icon-size: var(--btn-icon-size, 1rem); } &:hover { background-color: var(--btn-hover-color, var(--color-border-light)); } &:focus-visible { outline: var(--btn-outline-size, 2px) solid var(--color-selected-dark); } &:is(:disabled, [aria-disabled="true"]) { opacity: var(--opacity-50); pointer-events: none; }}/* Variants */.btn--primary { --btn-background: var(--color-primary); --btn-border-color: transparent; --btn-color: var(--color-text-reversed); --btn-hover-color: rgb(from var(--color-primary) r g b / .9);}.btn--secondary { --btn-background: var(--color-secondary); --btn-border-color: transparent; --btn-hover-color: rgb(from var(--color-secondary) r g b / .8);}.btn--borderless { --btn-background: transparent; --btn-border-color: transparent; --btn-box-shadow: none;}.btn--positive { --btn-background: var(--color-positive); --btn-border-color: transparent; --btn-color: white; --btn-hover-color: rgb(from var(--color-positive) r g b / .9);}.btn--negative { --btn-background: var(--color-negative); --btn-border-color: transparent; --btn-color: white; --btn-hover-color: rgb(from var(--color-negative) r g b / .9);}.btn--plain { --btn-background: transparent; --btn-border-color: transparent; --btn-box-shadow: none; --btn-hover-color: transparent; --btn-padding: 0;}.btn--icon { --btn-padding: var(--size-1_5);}/* Sizes */.btn--xs { --btn-font-size: var(--text-xs); --btn-padding: var(--size-0_5) var(--size-2);}.btn--icon-xs { --btn-icon-size: var(--size-3_5); --btn-padding: var(--size-1);}.btn--sm { --btn-padding: var(--size-0_5) var(--size-2_5);}.btn--icon-sm { --btn-padding: var(--size-1);}.btn--lg { --btn-padding: var(--size-1_5) var(--size-3);}.btn--icon-lg { --btn-padding: var(--size-2);}/* Extras */.btn--feedback { transition-duration: var(--time-150); transition-property: transform; transition-timing-function: var(--ease-out-3); &:active { transform: scale(0.97); }}[aria-busy] .btn--busy:disabled { > * { visibility: hidden; } &::after { animation: x-spin 1s linear infinite; background-color: currentColor; block-size: var(--size-4); content: ""; inline-size: var(--size-4); mask-image: url("loading.svg"); mask-size: cover; position: absolute; }}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.