@patternfly/patternfly 6.0.0-alpha.41 → 6.0.0-alpha.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button/button.css +366 -347
- package/components/Button/button.scss +422 -471
- package/components/Spinner/spinner.css +4 -0
- package/components/Spinner/spinner.scss +3 -0
- package/components/TabContent/tab-content.css +17 -11
- package/components/TabContent/tab-content.scss +18 -14
- package/docs/components/Button/examples/Button.css +4 -0
- package/docs/components/Button/examples/Button.md +1380 -81
- package/docs/components/TabContent/examples/TabContent.md +10 -10
- package/package.json +1 -1
- package/patternfly-no-globals.css +387 -358
- package/patternfly-theme-dark-unversioned.css +387 -358
- package/patternfly.css +387 -358
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Button/themes/dark/button.scss +0 -51
|
@@ -26,255 +26,1374 @@ cssPrefix: pf-v5-c-button
|
|
|
26
26
|
|
|
27
27
|
<br />
|
|
28
28
|
<br />
|
|
29
|
+
|
|
30
|
+
<button class="pf-v5-c-button pf-m-link" type="button">Link</button>
|
|
31
|
+
|
|
32
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-link" type="button">Link danger</button>
|
|
33
|
+
|
|
34
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Inline link</button>
|
|
35
|
+
|
|
36
|
+
<button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
|
|
37
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
38
|
+
</button>
|
|
39
|
+
|
|
40
|
+
<br />
|
|
41
|
+
<br />
|
|
42
|
+
|
|
43
|
+
<button class="pf-v5-c-button pf-m-control" type="button">Control</button>
|
|
44
|
+
|
|
45
|
+
<button
|
|
46
|
+
class="pf-v5-c-button pf-m-control"
|
|
47
|
+
type="button"
|
|
48
|
+
aria-label="Copy input"
|
|
49
|
+
>
|
|
50
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
51
|
+
</button>
|
|
52
|
+
|
|
53
|
+
<br />
|
|
54
|
+
<br />
|
|
55
|
+
|
|
56
|
+
<div>
|
|
57
|
+
<strong>Icon</strong>
|
|
58
|
+
</div>
|
|
59
|
+
<button class="pf-v5-c-button pf-m-primary" type="button">
|
|
60
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
61
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
62
|
+
</span>
|
|
63
|
+
Primary
|
|
64
|
+
</button>
|
|
65
|
+
|
|
66
|
+
<button class="pf-v5-c-button pf-m-secondary" type="button">
|
|
67
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
68
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
69
|
+
</span>
|
|
70
|
+
Secondary
|
|
71
|
+
</button>
|
|
72
|
+
|
|
73
|
+
<button class="pf-v5-c-button pf-m-secondary pf-m-danger" type="button">
|
|
74
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
75
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
76
|
+
</span>
|
|
77
|
+
Secondary danger
|
|
78
|
+
</button>
|
|
79
|
+
|
|
80
|
+
<button class="pf-v5-c-button pf-m-tertiary" type="button">
|
|
81
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
82
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
83
|
+
</span>
|
|
84
|
+
Tertiary
|
|
85
|
+
</button>
|
|
86
|
+
|
|
87
|
+
<button class="pf-v5-c-button pf-m-danger" type="button">
|
|
88
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
89
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
90
|
+
</span>
|
|
91
|
+
Danger
|
|
92
|
+
</button>
|
|
93
|
+
|
|
94
|
+
<button class="pf-v5-c-button pf-m-warning" type="button">
|
|
95
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
96
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
97
|
+
</span>
|
|
98
|
+
Warning
|
|
99
|
+
</button>
|
|
100
|
+
|
|
101
|
+
<br />
|
|
102
|
+
<br />
|
|
103
|
+
|
|
104
|
+
<button class="pf-v5-c-button pf-m-link" type="button">
|
|
105
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
106
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
107
|
+
</span>
|
|
108
|
+
Link
|
|
109
|
+
</button>
|
|
110
|
+
|
|
111
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-link" type="button">
|
|
112
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
113
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
114
|
+
</span>
|
|
115
|
+
Link danger
|
|
116
|
+
</button>
|
|
117
|
+
|
|
118
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">
|
|
119
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
120
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
121
|
+
</span>
|
|
122
|
+
Inline link
|
|
123
|
+
</button>
|
|
124
|
+
|
|
125
|
+
<button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
|
|
126
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
127
|
+
</button>
|
|
128
|
+
|
|
129
|
+
<br />
|
|
130
|
+
<br />
|
|
131
|
+
|
|
132
|
+
<button class="pf-v5-c-button pf-m-control" type="button">
|
|
133
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
134
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
135
|
+
</span>
|
|
136
|
+
Control
|
|
137
|
+
</button>
|
|
138
|
+
|
|
139
|
+
<button
|
|
140
|
+
class="pf-v5-c-button pf-m-control"
|
|
141
|
+
type="button"
|
|
142
|
+
aria-label="Copy input"
|
|
143
|
+
>
|
|
144
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
145
|
+
</button>
|
|
146
|
+
|
|
147
|
+
<br />
|
|
148
|
+
<br />
|
|
149
|
+
|
|
150
|
+
<div>
|
|
151
|
+
<strong>Icon end</strong>
|
|
152
|
+
</div>
|
|
153
|
+
<button class="pf-v5-c-button pf-m-primary" type="button">
|
|
154
|
+
Primary
|
|
155
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
156
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
157
|
+
</span>
|
|
158
|
+
</button>
|
|
159
|
+
|
|
160
|
+
<button class="pf-v5-c-button pf-m-secondary" type="button">
|
|
161
|
+
Secondary
|
|
162
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
163
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
164
|
+
</span>
|
|
165
|
+
</button>
|
|
166
|
+
|
|
167
|
+
<button class="pf-v5-c-button pf-m-secondary pf-m-danger" type="button">
|
|
168
|
+
Secondary danger
|
|
169
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
170
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
171
|
+
</span>
|
|
172
|
+
</button>
|
|
173
|
+
|
|
174
|
+
<button class="pf-v5-c-button pf-m-tertiary" type="button">
|
|
175
|
+
Tertiary
|
|
176
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
177
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
178
|
+
</span>
|
|
179
|
+
</button>
|
|
180
|
+
|
|
181
|
+
<button class="pf-v5-c-button pf-m-danger" type="button">
|
|
182
|
+
Danger
|
|
183
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
184
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
185
|
+
</span>
|
|
186
|
+
</button>
|
|
187
|
+
|
|
188
|
+
<button class="pf-v5-c-button pf-m-warning" type="button">
|
|
189
|
+
Warning
|
|
190
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
191
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
192
|
+
</span>
|
|
193
|
+
</button>
|
|
194
|
+
|
|
195
|
+
<br />
|
|
196
|
+
<br />
|
|
197
|
+
|
|
29
198
|
<button class="pf-v5-c-button pf-m-link" type="button">
|
|
199
|
+
Link
|
|
200
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
201
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
202
|
+
</span>
|
|
203
|
+
</button>
|
|
204
|
+
|
|
205
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-link" type="button">
|
|
206
|
+
Link danger
|
|
207
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
208
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
209
|
+
</span>
|
|
210
|
+
</button>
|
|
211
|
+
|
|
212
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">
|
|
213
|
+
Inline link
|
|
214
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
215
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
216
|
+
</span>
|
|
217
|
+
</button>
|
|
218
|
+
|
|
219
|
+
<button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
|
|
220
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
221
|
+
</button>
|
|
222
|
+
|
|
223
|
+
<br />
|
|
224
|
+
<br />
|
|
225
|
+
|
|
226
|
+
<button class="pf-v5-c-button pf-m-control" type="button">
|
|
227
|
+
Control
|
|
228
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
229
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
230
|
+
</span>
|
|
231
|
+
</button>
|
|
232
|
+
|
|
233
|
+
<button
|
|
234
|
+
class="pf-v5-c-button pf-m-control"
|
|
235
|
+
type="button"
|
|
236
|
+
aria-label="Copy input"
|
|
237
|
+
>
|
|
238
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
239
|
+
</button>
|
|
240
|
+
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
### Clicked buttons
|
|
244
|
+
|
|
245
|
+
```html
|
|
246
|
+
<button class="pf-v5-c-button pf-m-primary pf-m-clicked" type="button">Primary</button>
|
|
247
|
+
|
|
248
|
+
<button
|
|
249
|
+
class="pf-v5-c-button pf-m-secondary pf-m-clicked"
|
|
250
|
+
type="button"
|
|
251
|
+
>Secondary</button>
|
|
252
|
+
|
|
253
|
+
<button
|
|
254
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-clicked"
|
|
255
|
+
type="button"
|
|
256
|
+
>Secondary danger</button>
|
|
257
|
+
|
|
258
|
+
<button class="pf-v5-c-button pf-m-tertiary pf-m-clicked" type="button">Tertiary</button>
|
|
259
|
+
|
|
260
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-clicked" type="button">Danger</button>
|
|
261
|
+
|
|
262
|
+
<button class="pf-v5-c-button pf-m-warning pf-m-clicked" type="button">Warning</button>
|
|
263
|
+
|
|
264
|
+
<br />
|
|
265
|
+
<br />
|
|
266
|
+
|
|
267
|
+
<button class="pf-v5-c-button pf-m-link pf-m-clicked" type="button">Link</button>
|
|
268
|
+
|
|
269
|
+
<button
|
|
270
|
+
class="pf-v5-c-button pf-m-danger pf-m-link pf-m-clicked"
|
|
271
|
+
type="button"
|
|
272
|
+
>Link danger</button>
|
|
273
|
+
|
|
274
|
+
<button
|
|
275
|
+
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-clicked"
|
|
276
|
+
type="button"
|
|
277
|
+
>Inline link</button>
|
|
278
|
+
|
|
279
|
+
<button
|
|
280
|
+
class="pf-v5-c-button pf-m-plain pf-m-clicked"
|
|
281
|
+
type="button"
|
|
282
|
+
aria-label="Remove"
|
|
283
|
+
>
|
|
284
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
285
|
+
</button>
|
|
286
|
+
|
|
287
|
+
<br />
|
|
288
|
+
<br />
|
|
289
|
+
|
|
290
|
+
<button class="pf-v5-c-button pf-m-control pf-m-clicked" type="button">Control</button>
|
|
291
|
+
|
|
292
|
+
<button
|
|
293
|
+
class="pf-v5-c-button pf-m-control pf-m-clicked"
|
|
294
|
+
type="button"
|
|
295
|
+
aria-label="Copy input"
|
|
296
|
+
>
|
|
297
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
298
|
+
</button>
|
|
299
|
+
|
|
300
|
+
<br />
|
|
301
|
+
<br />
|
|
302
|
+
|
|
303
|
+
<div>
|
|
304
|
+
<strong>Icon</strong>
|
|
305
|
+
</div>
|
|
306
|
+
<button class="pf-v5-c-button pf-m-primary pf-m-clicked" type="button">
|
|
307
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
308
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
309
|
+
</span>
|
|
310
|
+
Primary
|
|
311
|
+
</button>
|
|
312
|
+
|
|
313
|
+
<button class="pf-v5-c-button pf-m-secondary pf-m-clicked" type="button">
|
|
314
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
315
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
316
|
+
</span>
|
|
317
|
+
Secondary
|
|
318
|
+
</button>
|
|
319
|
+
|
|
320
|
+
<button
|
|
321
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-clicked"
|
|
322
|
+
type="button"
|
|
323
|
+
>
|
|
324
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
325
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
326
|
+
</span>
|
|
327
|
+
Secondary danger
|
|
328
|
+
</button>
|
|
329
|
+
|
|
330
|
+
<button class="pf-v5-c-button pf-m-tertiary pf-m-clicked" type="button">
|
|
331
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
332
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
333
|
+
</span>
|
|
334
|
+
Tertiary
|
|
335
|
+
</button>
|
|
336
|
+
|
|
337
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-clicked" type="button">
|
|
338
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
339
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
340
|
+
</span>
|
|
341
|
+
Danger
|
|
342
|
+
</button>
|
|
343
|
+
|
|
344
|
+
<button class="pf-v5-c-button pf-m-warning pf-m-clicked" type="button">
|
|
345
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
346
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
347
|
+
</span>
|
|
348
|
+
Warning
|
|
349
|
+
</button>
|
|
350
|
+
|
|
351
|
+
<br />
|
|
352
|
+
<br />
|
|
353
|
+
|
|
354
|
+
<button class="pf-v5-c-button pf-m-link pf-m-clicked" type="button">
|
|
355
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
356
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
357
|
+
</span>
|
|
358
|
+
Link
|
|
359
|
+
</button>
|
|
360
|
+
|
|
361
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-link pf-m-clicked" type="button">
|
|
362
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
363
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
364
|
+
</span>
|
|
365
|
+
Link danger
|
|
366
|
+
</button>
|
|
367
|
+
|
|
368
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-clicked" type="button">
|
|
369
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
370
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
371
|
+
</span>
|
|
372
|
+
Inline link
|
|
373
|
+
</button>
|
|
374
|
+
|
|
375
|
+
<button
|
|
376
|
+
class="pf-v5-c-button pf-m-plain pf-m-clicked"
|
|
377
|
+
type="button"
|
|
378
|
+
aria-label="Remove"
|
|
379
|
+
>
|
|
380
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
381
|
+
</button>
|
|
382
|
+
|
|
383
|
+
<br />
|
|
384
|
+
<br />
|
|
385
|
+
|
|
386
|
+
<button class="pf-v5-c-button pf-m-control pf-m-clicked" type="button">
|
|
387
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
388
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
389
|
+
</span>
|
|
390
|
+
Control
|
|
391
|
+
</button>
|
|
392
|
+
|
|
393
|
+
<button
|
|
394
|
+
class="pf-v5-c-button pf-m-control pf-m-clicked"
|
|
395
|
+
type="button"
|
|
396
|
+
aria-label="Copy input"
|
|
397
|
+
>
|
|
398
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
399
|
+
</button>
|
|
400
|
+
|
|
401
|
+
<br />
|
|
402
|
+
<br />
|
|
403
|
+
|
|
404
|
+
<div>
|
|
405
|
+
<strong>Icon end</strong>
|
|
406
|
+
</div>
|
|
407
|
+
<button class="pf-v5-c-button pf-m-primary pf-m-clicked" type="button">
|
|
408
|
+
Primary
|
|
409
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
410
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
411
|
+
</span>
|
|
412
|
+
</button>
|
|
413
|
+
|
|
414
|
+
<button class="pf-v5-c-button pf-m-secondary pf-m-clicked" type="button">
|
|
415
|
+
Secondary
|
|
416
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
417
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
418
|
+
</span>
|
|
419
|
+
</button>
|
|
420
|
+
|
|
421
|
+
<button
|
|
422
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-clicked"
|
|
423
|
+
type="button"
|
|
424
|
+
>
|
|
425
|
+
Secondary danger
|
|
426
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
427
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
428
|
+
</span>
|
|
429
|
+
</button>
|
|
430
|
+
|
|
431
|
+
<button class="pf-v5-c-button pf-m-tertiary pf-m-clicked" type="button">
|
|
432
|
+
Tertiary
|
|
433
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
434
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
435
|
+
</span>
|
|
436
|
+
</button>
|
|
437
|
+
|
|
438
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-clicked" type="button">
|
|
439
|
+
Danger
|
|
440
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
441
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
442
|
+
</span>
|
|
443
|
+
</button>
|
|
444
|
+
|
|
445
|
+
<button class="pf-v5-c-button pf-m-warning pf-m-clicked" type="button">
|
|
446
|
+
Warning
|
|
447
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
448
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
449
|
+
</span>
|
|
450
|
+
</button>
|
|
451
|
+
|
|
452
|
+
<br />
|
|
453
|
+
<br />
|
|
454
|
+
|
|
455
|
+
<button class="pf-v5-c-button pf-m-link pf-m-clicked" type="button">
|
|
456
|
+
Link
|
|
457
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
458
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
459
|
+
</span>
|
|
460
|
+
</button>
|
|
461
|
+
|
|
462
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-link pf-m-clicked" type="button">
|
|
463
|
+
Link danger
|
|
464
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
465
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
466
|
+
</span>
|
|
467
|
+
</button>
|
|
468
|
+
|
|
469
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-clicked" type="button">
|
|
470
|
+
Inline link
|
|
471
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
472
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
473
|
+
</span>
|
|
474
|
+
</button>
|
|
475
|
+
|
|
476
|
+
<button
|
|
477
|
+
class="pf-v5-c-button pf-m-plain pf-m-clicked"
|
|
478
|
+
type="button"
|
|
479
|
+
aria-label="Remove"
|
|
480
|
+
>
|
|
481
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
482
|
+
</button>
|
|
483
|
+
|
|
484
|
+
<br />
|
|
485
|
+
<br />
|
|
486
|
+
|
|
487
|
+
<button class="pf-v5-c-button pf-m-control pf-m-clicked" type="button">
|
|
488
|
+
Control
|
|
489
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
490
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
491
|
+
</span>
|
|
492
|
+
</button>
|
|
493
|
+
|
|
494
|
+
<button
|
|
495
|
+
class="pf-v5-c-button pf-m-control pf-m-clicked"
|
|
496
|
+
type="button"
|
|
497
|
+
aria-label="Copy input"
|
|
498
|
+
>
|
|
499
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
500
|
+
</button>
|
|
501
|
+
|
|
502
|
+
```
|
|
503
|
+
|
|
504
|
+
### Small buttons
|
|
505
|
+
|
|
506
|
+
```html
|
|
507
|
+
<button class="pf-v5-c-button pf-m-primary pf-m-small" type="button">Primary</button>
|
|
508
|
+
|
|
509
|
+
<button class="pf-v5-c-button pf-m-secondary pf-m-small" type="button">Secondary</button>
|
|
510
|
+
|
|
511
|
+
<button
|
|
512
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-small"
|
|
513
|
+
type="button"
|
|
514
|
+
>Secondary danger</button>
|
|
515
|
+
|
|
516
|
+
<button class="pf-v5-c-button pf-m-tertiary pf-m-small" type="button">Tertiary</button>
|
|
517
|
+
|
|
518
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-small" type="button">Danger</button>
|
|
519
|
+
|
|
520
|
+
<button class="pf-v5-c-button pf-m-warning pf-m-small" type="button">Warning</button>
|
|
521
|
+
|
|
522
|
+
<br />
|
|
523
|
+
<br />
|
|
524
|
+
|
|
525
|
+
<button class="pf-v5-c-button pf-m-link pf-m-small" type="button">Link</button>
|
|
526
|
+
|
|
527
|
+
<button
|
|
528
|
+
class="pf-v5-c-button pf-m-danger pf-m-link pf-m-small"
|
|
529
|
+
type="button"
|
|
530
|
+
>Link danger</button>
|
|
531
|
+
|
|
532
|
+
<button
|
|
533
|
+
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-small"
|
|
534
|
+
type="button"
|
|
535
|
+
>Inline link</button>
|
|
536
|
+
|
|
537
|
+
<button
|
|
538
|
+
class="pf-v5-c-button pf-m-plain pf-m-small"
|
|
539
|
+
type="button"
|
|
540
|
+
aria-label="Remove"
|
|
541
|
+
>
|
|
542
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
543
|
+
</button>
|
|
544
|
+
|
|
545
|
+
<br />
|
|
546
|
+
<br />
|
|
547
|
+
|
|
548
|
+
<button class="pf-v5-c-button pf-m-control pf-m-small" type="button">Control</button>
|
|
549
|
+
|
|
550
|
+
<button
|
|
551
|
+
class="pf-v5-c-button pf-m-control pf-m-small"
|
|
552
|
+
type="button"
|
|
553
|
+
aria-label="Copy input"
|
|
554
|
+
>
|
|
555
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
556
|
+
</button>
|
|
557
|
+
|
|
558
|
+
<br />
|
|
559
|
+
<br />
|
|
560
|
+
|
|
561
|
+
<div>
|
|
562
|
+
<strong>Icon</strong>
|
|
563
|
+
</div>
|
|
564
|
+
<button class="pf-v5-c-button pf-m-primary pf-m-small" type="button">
|
|
565
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
566
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
567
|
+
</span>
|
|
568
|
+
Primary
|
|
569
|
+
</button>
|
|
570
|
+
|
|
571
|
+
<button class="pf-v5-c-button pf-m-secondary pf-m-small" type="button">
|
|
572
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
573
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
574
|
+
</span>
|
|
575
|
+
Secondary
|
|
576
|
+
</button>
|
|
577
|
+
|
|
578
|
+
<button
|
|
579
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-small"
|
|
580
|
+
type="button"
|
|
581
|
+
>
|
|
582
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
583
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
584
|
+
</span>
|
|
585
|
+
Secondary danger
|
|
586
|
+
</button>
|
|
587
|
+
|
|
588
|
+
<button class="pf-v5-c-button pf-m-tertiary pf-m-small" type="button">
|
|
589
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
590
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
591
|
+
</span>
|
|
592
|
+
Tertiary
|
|
593
|
+
</button>
|
|
594
|
+
|
|
595
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-small" type="button">
|
|
596
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
597
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
598
|
+
</span>
|
|
599
|
+
Danger
|
|
600
|
+
</button>
|
|
601
|
+
|
|
602
|
+
<button class="pf-v5-c-button pf-m-warning pf-m-small" type="button">
|
|
603
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
604
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
605
|
+
</span>
|
|
606
|
+
Warning
|
|
607
|
+
</button>
|
|
608
|
+
|
|
609
|
+
<br />
|
|
610
|
+
<br />
|
|
611
|
+
|
|
612
|
+
<button class="pf-v5-c-button pf-m-link pf-m-small" type="button">
|
|
613
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
614
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
615
|
+
</span>
|
|
616
|
+
Link
|
|
617
|
+
</button>
|
|
618
|
+
|
|
619
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-link pf-m-small" type="button">
|
|
620
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
621
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
622
|
+
</span>
|
|
623
|
+
Link danger
|
|
624
|
+
</button>
|
|
625
|
+
|
|
626
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-small" type="button">
|
|
627
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
628
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
629
|
+
</span>
|
|
630
|
+
Inline link
|
|
631
|
+
</button>
|
|
632
|
+
|
|
633
|
+
<button
|
|
634
|
+
class="pf-v5-c-button pf-m-plain pf-m-small"
|
|
635
|
+
type="button"
|
|
636
|
+
aria-label="Remove"
|
|
637
|
+
>
|
|
638
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
639
|
+
</button>
|
|
640
|
+
|
|
641
|
+
<br />
|
|
642
|
+
<br />
|
|
643
|
+
|
|
644
|
+
<button class="pf-v5-c-button pf-m-control pf-m-small" type="button">
|
|
645
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
646
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
647
|
+
</span>
|
|
648
|
+
Control
|
|
649
|
+
</button>
|
|
650
|
+
|
|
651
|
+
<button
|
|
652
|
+
class="pf-v5-c-button pf-m-control pf-m-small"
|
|
653
|
+
type="button"
|
|
654
|
+
aria-label="Copy input"
|
|
655
|
+
>
|
|
656
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
657
|
+
</button>
|
|
658
|
+
|
|
659
|
+
<br />
|
|
660
|
+
<br />
|
|
661
|
+
|
|
662
|
+
<div>
|
|
663
|
+
<strong>Icon end</strong>
|
|
664
|
+
</div>
|
|
665
|
+
<button class="pf-v5-c-button pf-m-primary pf-m-small" type="button">
|
|
666
|
+
Primary
|
|
667
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
668
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
669
|
+
</span>
|
|
670
|
+
</button>
|
|
671
|
+
|
|
672
|
+
<button class="pf-v5-c-button pf-m-secondary pf-m-small" type="button">
|
|
673
|
+
Secondary
|
|
674
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
675
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
676
|
+
</span>
|
|
677
|
+
</button>
|
|
678
|
+
|
|
679
|
+
<button
|
|
680
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-small"
|
|
681
|
+
type="button"
|
|
682
|
+
>
|
|
683
|
+
Secondary danger
|
|
684
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
685
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
686
|
+
</span>
|
|
687
|
+
</button>
|
|
688
|
+
|
|
689
|
+
<button class="pf-v5-c-button pf-m-tertiary pf-m-small" type="button">
|
|
690
|
+
Tertiary
|
|
691
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
692
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
693
|
+
</span>
|
|
694
|
+
</button>
|
|
695
|
+
|
|
696
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-small" type="button">
|
|
697
|
+
Danger
|
|
698
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
699
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
700
|
+
</span>
|
|
701
|
+
</button>
|
|
702
|
+
|
|
703
|
+
<button class="pf-v5-c-button pf-m-warning pf-m-small" type="button">
|
|
704
|
+
Warning
|
|
705
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
706
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
707
|
+
</span>
|
|
708
|
+
</button>
|
|
709
|
+
|
|
710
|
+
<br />
|
|
711
|
+
<br />
|
|
712
|
+
|
|
713
|
+
<button class="pf-v5-c-button pf-m-link pf-m-small" type="button">
|
|
714
|
+
Link
|
|
715
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
716
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
717
|
+
</span>
|
|
718
|
+
</button>
|
|
719
|
+
|
|
720
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-link pf-m-small" type="button">
|
|
721
|
+
Link danger
|
|
722
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
723
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
724
|
+
</span>
|
|
725
|
+
</button>
|
|
726
|
+
|
|
727
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-small" type="button">
|
|
728
|
+
Inline link
|
|
729
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
730
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
731
|
+
</span>
|
|
732
|
+
</button>
|
|
733
|
+
|
|
734
|
+
<button
|
|
735
|
+
class="pf-v5-c-button pf-m-plain pf-m-small"
|
|
736
|
+
type="button"
|
|
737
|
+
aria-label="Remove"
|
|
738
|
+
>
|
|
739
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
740
|
+
</button>
|
|
741
|
+
|
|
742
|
+
<br />
|
|
743
|
+
<br />
|
|
744
|
+
|
|
745
|
+
<button class="pf-v5-c-button pf-m-control pf-m-small" type="button">
|
|
746
|
+
Control
|
|
747
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
748
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
749
|
+
</span>
|
|
750
|
+
</button>
|
|
751
|
+
|
|
752
|
+
<button
|
|
753
|
+
class="pf-v5-c-button pf-m-control pf-m-small"
|
|
754
|
+
type="button"
|
|
755
|
+
aria-label="Copy input"
|
|
756
|
+
>
|
|
757
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
758
|
+
</button>
|
|
759
|
+
|
|
760
|
+
```
|
|
761
|
+
|
|
762
|
+
### Disabled
|
|
763
|
+
|
|
764
|
+
```html
|
|
765
|
+
<button class="pf-v5-c-button pf-m-primary" type="button" disabled>Primary</button>
|
|
766
|
+
|
|
767
|
+
<button class="pf-v5-c-button pf-m-secondary" type="button" disabled>Secondary</button>
|
|
768
|
+
|
|
769
|
+
<button
|
|
770
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger"
|
|
771
|
+
type="button"
|
|
772
|
+
disabled
|
|
773
|
+
>Secondary danger</button>
|
|
774
|
+
|
|
775
|
+
<button class="pf-v5-c-button pf-m-tertiary" type="button" disabled>Tertiary</button>
|
|
776
|
+
|
|
777
|
+
<button class="pf-v5-c-button pf-m-danger" type="button" disabled>Danger</button>
|
|
778
|
+
|
|
779
|
+
<button class="pf-v5-c-button pf-m-warning" type="button" disabled>Warning</button>
|
|
780
|
+
|
|
781
|
+
<br />
|
|
782
|
+
<br />
|
|
783
|
+
|
|
784
|
+
<button class="pf-v5-c-button pf-m-link" type="button" disabled>Link</button>
|
|
785
|
+
|
|
786
|
+
<button
|
|
787
|
+
class="pf-v5-c-button pf-m-danger pf-m-link"
|
|
788
|
+
type="button"
|
|
789
|
+
disabled
|
|
790
|
+
>Link danger</button>
|
|
791
|
+
|
|
792
|
+
<button
|
|
793
|
+
class="pf-v5-c-button pf-m-link pf-m-inline"
|
|
794
|
+
type="button"
|
|
795
|
+
disabled
|
|
796
|
+
>Inline link</button>
|
|
797
|
+
|
|
798
|
+
<button
|
|
799
|
+
class="pf-v5-c-button pf-m-plain"
|
|
800
|
+
type="button"
|
|
801
|
+
disabled
|
|
802
|
+
aria-label="Remove"
|
|
803
|
+
>
|
|
804
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
805
|
+
</button>
|
|
806
|
+
|
|
807
|
+
<br />
|
|
808
|
+
<br />
|
|
809
|
+
|
|
810
|
+
<button class="pf-v5-c-button pf-m-control" type="button" disabled>Control</button>
|
|
811
|
+
|
|
812
|
+
<button
|
|
813
|
+
class="pf-v5-c-button pf-m-control"
|
|
814
|
+
type="button"
|
|
815
|
+
disabled
|
|
816
|
+
aria-label="Copy input"
|
|
817
|
+
>
|
|
818
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
819
|
+
</button>
|
|
820
|
+
|
|
821
|
+
<br />
|
|
822
|
+
<br />
|
|
823
|
+
|
|
824
|
+
<div>
|
|
825
|
+
<strong>Icon</strong>
|
|
826
|
+
</div>
|
|
827
|
+
<button class="pf-v5-c-button pf-m-primary" type="button" disabled>
|
|
828
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
829
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
830
|
+
</span>
|
|
831
|
+
Primary
|
|
832
|
+
</button>
|
|
833
|
+
|
|
834
|
+
<button class="pf-v5-c-button pf-m-secondary" type="button" disabled>
|
|
835
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
836
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
837
|
+
</span>
|
|
838
|
+
Secondary
|
|
839
|
+
</button>
|
|
840
|
+
|
|
841
|
+
<button
|
|
842
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger"
|
|
843
|
+
type="button"
|
|
844
|
+
disabled
|
|
845
|
+
>
|
|
846
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
847
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
848
|
+
</span>
|
|
849
|
+
Secondary danger
|
|
850
|
+
</button>
|
|
851
|
+
|
|
852
|
+
<button class="pf-v5-c-button pf-m-tertiary" type="button" disabled>
|
|
30
853
|
<span class="pf-v5-c-button__icon pf-m-start">
|
|
31
854
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
32
855
|
</span>
|
|
33
|
-
|
|
856
|
+
Tertiary
|
|
34
857
|
</button>
|
|
35
858
|
|
|
36
|
-
<button class="pf-v5-c-button pf-m-
|
|
37
|
-
|
|
38
|
-
<span class="pf-v5-c-button__icon pf-m-end">
|
|
859
|
+
<button class="pf-v5-c-button pf-m-danger" type="button" disabled>
|
|
860
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
39
861
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
40
862
|
</span>
|
|
863
|
+
Danger
|
|
41
864
|
</button>
|
|
42
865
|
|
|
43
|
-
<button class="pf-v5-c-button pf-m-
|
|
866
|
+
<button class="pf-v5-c-button pf-m-warning" type="button" disabled>
|
|
44
867
|
<span class="pf-v5-c-button__icon pf-m-start">
|
|
45
868
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
46
869
|
</span>
|
|
47
|
-
|
|
870
|
+
Warning
|
|
48
871
|
</button>
|
|
49
872
|
|
|
50
|
-
<button class="pf-v5-c-button pf-m-inline pf-m-link" type="button">Inline link</button>
|
|
51
873
|
<br />
|
|
52
874
|
<br />
|
|
53
|
-
|
|
54
|
-
<button class="pf-v5-c-button pf-m-
|
|
55
|
-
<
|
|
875
|
+
|
|
876
|
+
<button class="pf-v5-c-button pf-m-link" type="button" disabled>
|
|
877
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
878
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
879
|
+
</span>
|
|
880
|
+
Link
|
|
56
881
|
</button>
|
|
57
|
-
|
|
58
|
-
<
|
|
882
|
+
|
|
883
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-link" type="button" disabled>
|
|
884
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
885
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
886
|
+
</span>
|
|
887
|
+
Link danger
|
|
888
|
+
</button>
|
|
889
|
+
|
|
890
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline" type="button" disabled>
|
|
891
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
892
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
893
|
+
</span>
|
|
894
|
+
Inline link
|
|
895
|
+
</button>
|
|
896
|
+
|
|
59
897
|
<button
|
|
60
|
-
class="pf-v5-c-button pf-m-plain
|
|
898
|
+
class="pf-v5-c-button pf-m-plain"
|
|
61
899
|
type="button"
|
|
900
|
+
disabled
|
|
62
901
|
aria-label="Remove"
|
|
63
902
|
>
|
|
64
903
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
65
904
|
</button>
|
|
905
|
+
|
|
66
906
|
<br />
|
|
67
907
|
<br />
|
|
68
|
-
|
|
908
|
+
|
|
909
|
+
<button class="pf-v5-c-button pf-m-control" type="button" disabled>
|
|
910
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
911
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
912
|
+
</span>
|
|
913
|
+
Control
|
|
914
|
+
</button>
|
|
69
915
|
|
|
70
916
|
<button
|
|
71
917
|
class="pf-v5-c-button pf-m-control"
|
|
72
918
|
type="button"
|
|
919
|
+
disabled
|
|
73
920
|
aria-label="Copy input"
|
|
74
921
|
>
|
|
75
922
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
76
923
|
</button>
|
|
77
924
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
### Small buttons
|
|
925
|
+
<br />
|
|
926
|
+
<br />
|
|
81
927
|
|
|
82
|
-
|
|
83
|
-
<
|
|
928
|
+
<div>
|
|
929
|
+
<strong>Icon end</strong>
|
|
930
|
+
</div>
|
|
931
|
+
<button class="pf-v5-c-button pf-m-primary" type="button" disabled>
|
|
932
|
+
Primary
|
|
933
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
934
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
935
|
+
</span>
|
|
936
|
+
</button>
|
|
84
937
|
|
|
85
|
-
<button class="pf-v5-c-button pf-m-secondary
|
|
938
|
+
<button class="pf-v5-c-button pf-m-secondary" type="button" disabled>
|
|
939
|
+
Secondary
|
|
940
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
941
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
942
|
+
</span>
|
|
943
|
+
</button>
|
|
86
944
|
|
|
87
945
|
<button
|
|
88
|
-
class="pf-v5-c-button pf-m-secondary pf-m-danger
|
|
946
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger"
|
|
89
947
|
type="button"
|
|
90
|
-
|
|
948
|
+
disabled
|
|
949
|
+
>
|
|
950
|
+
Secondary danger
|
|
951
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
952
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
953
|
+
</span>
|
|
954
|
+
</button>
|
|
91
955
|
|
|
92
|
-
<button class="pf-v5-c-button pf-m-tertiary
|
|
956
|
+
<button class="pf-v5-c-button pf-m-tertiary" type="button" disabled>
|
|
957
|
+
Tertiary
|
|
958
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
959
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
960
|
+
</span>
|
|
961
|
+
</button>
|
|
93
962
|
|
|
94
|
-
<button class="pf-v5-c-button pf-m-danger
|
|
963
|
+
<button class="pf-v5-c-button pf-m-danger" type="button" disabled>
|
|
964
|
+
Danger
|
|
965
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
966
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
967
|
+
</span>
|
|
968
|
+
</button>
|
|
95
969
|
|
|
96
|
-
<button class="pf-v5-c-button pf-m-warning
|
|
970
|
+
<button class="pf-v5-c-button pf-m-warning" type="button" disabled>
|
|
971
|
+
Warning
|
|
972
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
973
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
974
|
+
</span>
|
|
975
|
+
</button>
|
|
97
976
|
|
|
98
|
-
<
|
|
977
|
+
<br />
|
|
978
|
+
<br />
|
|
979
|
+
|
|
980
|
+
<button class="pf-v5-c-button pf-m-link" type="button" disabled>
|
|
99
981
|
Link
|
|
100
982
|
<span class="pf-v5-c-button__icon pf-m-end">
|
|
101
983
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
102
984
|
</span>
|
|
103
985
|
</button>
|
|
104
986
|
|
|
105
|
-
<button class="pf-v5-c-button pf-m-
|
|
987
|
+
<button class="pf-v5-c-button pf-m-danger pf-m-link" type="button" disabled>
|
|
106
988
|
Link danger
|
|
107
989
|
<span class="pf-v5-c-button__icon pf-m-end">
|
|
108
990
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
109
991
|
</span>
|
|
110
992
|
</button>
|
|
111
993
|
|
|
994
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline" type="button" disabled>
|
|
995
|
+
Inline link
|
|
996
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
997
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
998
|
+
</span>
|
|
999
|
+
</button>
|
|
1000
|
+
|
|
112
1001
|
<button
|
|
113
|
-
class="pf-v5-c-button pf-m-
|
|
1002
|
+
class="pf-v5-c-button pf-m-plain"
|
|
114
1003
|
type="button"
|
|
115
|
-
|
|
1004
|
+
disabled
|
|
1005
|
+
aria-label="Remove"
|
|
1006
|
+
>
|
|
1007
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1008
|
+
</button>
|
|
116
1009
|
|
|
117
|
-
<
|
|
1010
|
+
<br />
|
|
1011
|
+
<br />
|
|
1012
|
+
|
|
1013
|
+
<button class="pf-v5-c-button pf-m-control" type="button" disabled>
|
|
1014
|
+
Control
|
|
1015
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1016
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1017
|
+
</span>
|
|
1018
|
+
</button>
|
|
1019
|
+
|
|
1020
|
+
<button
|
|
1021
|
+
class="pf-v5-c-button pf-m-control"
|
|
1022
|
+
type="button"
|
|
1023
|
+
disabled
|
|
1024
|
+
aria-label="Copy input"
|
|
1025
|
+
>
|
|
1026
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
1027
|
+
</button>
|
|
118
1028
|
|
|
119
1029
|
```
|
|
120
1030
|
|
|
121
|
-
###
|
|
1031
|
+
### Aria-disabled
|
|
122
1032
|
|
|
123
1033
|
```html
|
|
124
1034
|
<button
|
|
125
|
-
class="pf-v5-c-button pf-m-primary"
|
|
1035
|
+
class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
|
|
126
1036
|
type="button"
|
|
127
|
-
disabled
|
|
128
|
-
>Primary
|
|
1037
|
+
aria-disabled="true"
|
|
1038
|
+
>Primary</button>
|
|
129
1039
|
|
|
130
1040
|
<button
|
|
131
|
-
class="pf-v5-c-button pf-m-secondary"
|
|
1041
|
+
class="pf-v5-c-button pf-m-secondary pf-m-aria-disabled"
|
|
132
1042
|
type="button"
|
|
133
|
-
disabled
|
|
134
|
-
>Secondary
|
|
1043
|
+
aria-disabled="true"
|
|
1044
|
+
>Secondary</button>
|
|
135
1045
|
|
|
136
1046
|
<button
|
|
137
|
-
class="pf-v5-c-button pf-m-secondary pf-m-danger"
|
|
1047
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-aria-disabled"
|
|
138
1048
|
type="button"
|
|
139
|
-
disabled
|
|
140
|
-
>Secondary danger
|
|
1049
|
+
aria-disabled="true"
|
|
1050
|
+
>Secondary danger</button>
|
|
141
1051
|
|
|
142
1052
|
<button
|
|
143
|
-
class="pf-v5-c-button pf-m-tertiary"
|
|
1053
|
+
class="pf-v5-c-button pf-m-tertiary pf-m-aria-disabled"
|
|
144
1054
|
type="button"
|
|
145
|
-
disabled
|
|
146
|
-
>Tertiary
|
|
1055
|
+
aria-disabled="true"
|
|
1056
|
+
>Tertiary</button>
|
|
147
1057
|
|
|
148
1058
|
<button
|
|
149
|
-
class="pf-v5-c-button pf-m-danger"
|
|
1059
|
+
class="pf-v5-c-button pf-m-danger pf-m-aria-disabled"
|
|
150
1060
|
type="button"
|
|
151
|
-
disabled
|
|
152
|
-
>Danger
|
|
1061
|
+
aria-disabled="true"
|
|
1062
|
+
>Danger</button>
|
|
153
1063
|
|
|
154
1064
|
<button
|
|
155
|
-
class="pf-v5-c-button pf-m-warning"
|
|
1065
|
+
class="pf-v5-c-button pf-m-warning pf-m-aria-disabled"
|
|
156
1066
|
type="button"
|
|
157
|
-
disabled
|
|
158
|
-
>Warning
|
|
1067
|
+
aria-disabled="true"
|
|
1068
|
+
>Warning</button>
|
|
159
1069
|
|
|
160
|
-
<
|
|
1070
|
+
<br />
|
|
1071
|
+
<br />
|
|
1072
|
+
|
|
1073
|
+
<button
|
|
1074
|
+
class="pf-v5-c-button pf-m-link pf-m-aria-disabled"
|
|
1075
|
+
type="button"
|
|
1076
|
+
aria-disabled="true"
|
|
1077
|
+
>Link</button>
|
|
1078
|
+
|
|
1079
|
+
<button
|
|
1080
|
+
class="pf-v5-c-button pf-m-danger pf-m-link pf-m-aria-disabled"
|
|
1081
|
+
type="button"
|
|
1082
|
+
aria-disabled="true"
|
|
1083
|
+
>Link danger</button>
|
|
1084
|
+
|
|
1085
|
+
<button
|
|
1086
|
+
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-aria-disabled"
|
|
1087
|
+
type="button"
|
|
1088
|
+
aria-disabled="true"
|
|
1089
|
+
>Inline link</button>
|
|
1090
|
+
|
|
1091
|
+
<button
|
|
1092
|
+
class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
|
|
1093
|
+
type="button"
|
|
1094
|
+
aria-disabled="true"
|
|
1095
|
+
aria-label="Remove"
|
|
1096
|
+
>
|
|
1097
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1098
|
+
</button>
|
|
1099
|
+
|
|
1100
|
+
<br />
|
|
1101
|
+
<br />
|
|
1102
|
+
|
|
1103
|
+
<button
|
|
1104
|
+
class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
|
|
1105
|
+
type="button"
|
|
1106
|
+
aria-disabled="true"
|
|
1107
|
+
>Control</button>
|
|
1108
|
+
|
|
1109
|
+
<button
|
|
1110
|
+
class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
|
|
1111
|
+
type="button"
|
|
1112
|
+
aria-disabled="true"
|
|
1113
|
+
aria-label="Copy input"
|
|
1114
|
+
>
|
|
1115
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
1116
|
+
</button>
|
|
1117
|
+
|
|
1118
|
+
<br />
|
|
1119
|
+
<br />
|
|
1120
|
+
|
|
1121
|
+
<div>
|
|
1122
|
+
<strong>Icon</strong>
|
|
1123
|
+
</div>
|
|
1124
|
+
<button
|
|
1125
|
+
class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
|
|
1126
|
+
type="button"
|
|
1127
|
+
aria-disabled="true"
|
|
1128
|
+
>
|
|
1129
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
1130
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1131
|
+
</span>
|
|
1132
|
+
Primary
|
|
1133
|
+
</button>
|
|
1134
|
+
|
|
1135
|
+
<button
|
|
1136
|
+
class="pf-v5-c-button pf-m-secondary pf-m-aria-disabled"
|
|
1137
|
+
type="button"
|
|
1138
|
+
aria-disabled="true"
|
|
1139
|
+
>
|
|
1140
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
1141
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1142
|
+
</span>
|
|
1143
|
+
Secondary
|
|
1144
|
+
</button>
|
|
1145
|
+
|
|
1146
|
+
<button
|
|
1147
|
+
class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-aria-disabled"
|
|
1148
|
+
type="button"
|
|
1149
|
+
aria-disabled="true"
|
|
1150
|
+
>
|
|
1151
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
1152
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1153
|
+
</span>
|
|
1154
|
+
Secondary danger
|
|
1155
|
+
</button>
|
|
1156
|
+
|
|
1157
|
+
<button
|
|
1158
|
+
class="pf-v5-c-button pf-m-tertiary pf-m-aria-disabled"
|
|
1159
|
+
type="button"
|
|
1160
|
+
aria-disabled="true"
|
|
1161
|
+
>
|
|
1162
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
1163
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1164
|
+
</span>
|
|
1165
|
+
Tertiary
|
|
1166
|
+
</button>
|
|
1167
|
+
|
|
1168
|
+
<button
|
|
1169
|
+
class="pf-v5-c-button pf-m-danger pf-m-aria-disabled"
|
|
1170
|
+
type="button"
|
|
1171
|
+
aria-disabled="true"
|
|
1172
|
+
>
|
|
1173
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
1174
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1175
|
+
</span>
|
|
1176
|
+
Danger
|
|
1177
|
+
</button>
|
|
1178
|
+
|
|
1179
|
+
<button
|
|
1180
|
+
class="pf-v5-c-button pf-m-warning pf-m-aria-disabled"
|
|
1181
|
+
type="button"
|
|
1182
|
+
aria-disabled="true"
|
|
1183
|
+
>
|
|
1184
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
1185
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1186
|
+
</span>
|
|
1187
|
+
Warning
|
|
1188
|
+
</button>
|
|
1189
|
+
|
|
1190
|
+
<br />
|
|
1191
|
+
<br />
|
|
1192
|
+
|
|
1193
|
+
<button
|
|
1194
|
+
class="pf-v5-c-button pf-m-link pf-m-aria-disabled"
|
|
1195
|
+
type="button"
|
|
1196
|
+
aria-disabled="true"
|
|
1197
|
+
>
|
|
161
1198
|
<span class="pf-v5-c-button__icon pf-m-start">
|
|
162
1199
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
163
1200
|
</span>
|
|
164
|
-
Link
|
|
1201
|
+
Link
|
|
165
1202
|
</button>
|
|
166
1203
|
|
|
167
|
-
<button
|
|
1204
|
+
<button
|
|
1205
|
+
class="pf-v5-c-button pf-m-danger pf-m-link pf-m-aria-disabled"
|
|
1206
|
+
type="button"
|
|
1207
|
+
aria-disabled="true"
|
|
1208
|
+
>
|
|
168
1209
|
<span class="pf-v5-c-button__icon pf-m-start">
|
|
169
1210
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
170
1211
|
</span>
|
|
171
|
-
Link danger
|
|
1212
|
+
Link danger
|
|
172
1213
|
</button>
|
|
173
1214
|
|
|
174
1215
|
<button
|
|
175
|
-
class="pf-v5-c-button pf-m-link pf-m-inline"
|
|
1216
|
+
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-aria-disabled"
|
|
176
1217
|
type="button"
|
|
177
|
-
disabled
|
|
178
|
-
>
|
|
1218
|
+
aria-disabled="true"
|
|
1219
|
+
>
|
|
1220
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
1221
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1222
|
+
</span>
|
|
1223
|
+
Inline link
|
|
1224
|
+
</button>
|
|
179
1225
|
|
|
180
1226
|
<button
|
|
181
|
-
class="pf-v5-c-button pf-m-plain"
|
|
1227
|
+
class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
|
|
182
1228
|
type="button"
|
|
1229
|
+
aria-disabled="true"
|
|
183
1230
|
aria-label="Remove"
|
|
184
|
-
disabled
|
|
185
1231
|
>
|
|
186
1232
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
187
1233
|
</button>
|
|
188
1234
|
|
|
1235
|
+
<br />
|
|
1236
|
+
<br />
|
|
1237
|
+
|
|
189
1238
|
<button
|
|
190
|
-
class="pf-v5-c-button pf-m-control"
|
|
1239
|
+
class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
|
|
191
1240
|
type="button"
|
|
192
|
-
disabled
|
|
193
|
-
>
|
|
1241
|
+
aria-disabled="true"
|
|
1242
|
+
>
|
|
1243
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
1244
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1245
|
+
</span>
|
|
1246
|
+
Control
|
|
1247
|
+
</button>
|
|
194
1248
|
|
|
195
|
-
|
|
1249
|
+
<button
|
|
1250
|
+
class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
|
|
1251
|
+
type="button"
|
|
1252
|
+
aria-disabled="true"
|
|
1253
|
+
aria-label="Copy input"
|
|
1254
|
+
>
|
|
1255
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
1256
|
+
</button>
|
|
196
1257
|
|
|
197
|
-
|
|
1258
|
+
<br />
|
|
1259
|
+
<br />
|
|
198
1260
|
|
|
199
|
-
|
|
1261
|
+
<div>
|
|
1262
|
+
<strong>Icon end</strong>
|
|
1263
|
+
</div>
|
|
200
1264
|
<button
|
|
201
1265
|
class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
|
|
202
1266
|
type="button"
|
|
203
1267
|
aria-disabled="true"
|
|
204
|
-
>
|
|
1268
|
+
>
|
|
1269
|
+
Primary
|
|
1270
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1271
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1272
|
+
</span>
|
|
1273
|
+
</button>
|
|
205
1274
|
|
|
206
1275
|
<button
|
|
207
1276
|
class="pf-v5-c-button pf-m-secondary pf-m-aria-disabled"
|
|
208
1277
|
type="button"
|
|
209
1278
|
aria-disabled="true"
|
|
210
|
-
>
|
|
1279
|
+
>
|
|
1280
|
+
Secondary
|
|
1281
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1282
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1283
|
+
</span>
|
|
1284
|
+
</button>
|
|
211
1285
|
|
|
212
1286
|
<button
|
|
213
1287
|
class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-aria-disabled"
|
|
214
1288
|
type="button"
|
|
215
1289
|
aria-disabled="true"
|
|
216
|
-
>
|
|
1290
|
+
>
|
|
1291
|
+
Secondary danger
|
|
1292
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1293
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1294
|
+
</span>
|
|
1295
|
+
</button>
|
|
217
1296
|
|
|
218
1297
|
<button
|
|
219
1298
|
class="pf-v5-c-button pf-m-tertiary pf-m-aria-disabled"
|
|
220
1299
|
type="button"
|
|
221
1300
|
aria-disabled="true"
|
|
222
|
-
>
|
|
1301
|
+
>
|
|
1302
|
+
Tertiary
|
|
1303
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1304
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1305
|
+
</span>
|
|
1306
|
+
</button>
|
|
223
1307
|
|
|
224
1308
|
<button
|
|
225
1309
|
class="pf-v5-c-button pf-m-danger pf-m-aria-disabled"
|
|
226
1310
|
type="button"
|
|
227
1311
|
aria-disabled="true"
|
|
228
|
-
>
|
|
1312
|
+
>
|
|
1313
|
+
Danger
|
|
1314
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1315
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1316
|
+
</span>
|
|
1317
|
+
</button>
|
|
229
1318
|
|
|
230
1319
|
<button
|
|
231
1320
|
class="pf-v5-c-button pf-m-warning pf-m-aria-disabled"
|
|
232
1321
|
type="button"
|
|
233
1322
|
aria-disabled="true"
|
|
234
|
-
>
|
|
1323
|
+
>
|
|
1324
|
+
Warning
|
|
1325
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1326
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1327
|
+
</span>
|
|
1328
|
+
</button>
|
|
1329
|
+
|
|
1330
|
+
<br />
|
|
1331
|
+
<br />
|
|
235
1332
|
|
|
236
1333
|
<button
|
|
237
1334
|
class="pf-v5-c-button pf-m-link pf-m-aria-disabled"
|
|
238
1335
|
type="button"
|
|
239
1336
|
aria-disabled="true"
|
|
240
1337
|
>
|
|
241
|
-
|
|
1338
|
+
Link
|
|
1339
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
242
1340
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
243
1341
|
</span>
|
|
244
|
-
Link disabled
|
|
245
1342
|
</button>
|
|
246
1343
|
|
|
247
1344
|
<button
|
|
248
|
-
class="pf-v5-c-button pf-m-
|
|
1345
|
+
class="pf-v5-c-button pf-m-danger pf-m-link pf-m-aria-disabled"
|
|
249
1346
|
type="button"
|
|
250
1347
|
aria-disabled="true"
|
|
251
1348
|
>
|
|
252
|
-
|
|
1349
|
+
Link danger
|
|
1350
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
253
1351
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
254
1352
|
</span>
|
|
255
|
-
Link danger disabled
|
|
256
1353
|
</button>
|
|
257
1354
|
|
|
258
1355
|
<button
|
|
259
1356
|
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-aria-disabled"
|
|
260
1357
|
type="button"
|
|
261
1358
|
aria-disabled="true"
|
|
262
|
-
>
|
|
1359
|
+
>
|
|
1360
|
+
Inline link
|
|
1361
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1362
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1363
|
+
</span>
|
|
1364
|
+
</button>
|
|
263
1365
|
|
|
264
1366
|
<button
|
|
265
1367
|
class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
|
|
266
1368
|
type="button"
|
|
267
|
-
aria-label="Remove"
|
|
268
1369
|
aria-disabled="true"
|
|
1370
|
+
aria-label="Remove"
|
|
269
1371
|
>
|
|
270
1372
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
271
1373
|
</button>
|
|
272
1374
|
|
|
1375
|
+
<br />
|
|
1376
|
+
<br />
|
|
1377
|
+
|
|
1378
|
+
<button
|
|
1379
|
+
class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
|
|
1380
|
+
type="button"
|
|
1381
|
+
aria-disabled="true"
|
|
1382
|
+
>
|
|
1383
|
+
Control
|
|
1384
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1385
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1386
|
+
</span>
|
|
1387
|
+
</button>
|
|
1388
|
+
|
|
273
1389
|
<button
|
|
274
1390
|
class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
|
|
275
1391
|
type="button"
|
|
276
1392
|
aria-disabled="true"
|
|
277
|
-
|
|
1393
|
+
aria-label="Copy input"
|
|
1394
|
+
>
|
|
1395
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
1396
|
+
</button>
|
|
278
1397
|
|
|
279
1398
|
```
|
|
280
1399
|
|
|
@@ -386,6 +1505,45 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
386
1505
|
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
387
1506
|
</span>
|
|
388
1507
|
</button>
|
|
1508
|
+
<br />
|
|
1509
|
+
<br />
|
|
1510
|
+
<strong>disabled</strong>
|
|
1511
|
+
<br />
|
|
1512
|
+
<button
|
|
1513
|
+
class="pf-v5-c-button pf-m-primary pf-m-display-lg"
|
|
1514
|
+
type="button"
|
|
1515
|
+
disabled
|
|
1516
|
+
>Call to action</button>
|
|
1517
|
+
|
|
1518
|
+
<button
|
|
1519
|
+
class="pf-v5-c-button pf-m-secondary pf-m-display-lg"
|
|
1520
|
+
type="button"
|
|
1521
|
+
disabled
|
|
1522
|
+
>Call to action</button>
|
|
1523
|
+
|
|
1524
|
+
<button
|
|
1525
|
+
class="pf-v5-c-button pf-m-tertiary pf-m-display-lg"
|
|
1526
|
+
type="button"
|
|
1527
|
+
disabled
|
|
1528
|
+
>Call to action</button>
|
|
1529
|
+
|
|
1530
|
+
<button class="pf-v5-c-button pf-m-link pf-m-display-lg" type="button" disabled>
|
|
1531
|
+
Call to action
|
|
1532
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1533
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
1534
|
+
</span>
|
|
1535
|
+
</button>
|
|
1536
|
+
|
|
1537
|
+
<button
|
|
1538
|
+
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-display-lg"
|
|
1539
|
+
type="button"
|
|
1540
|
+
disabled
|
|
1541
|
+
>
|
|
1542
|
+
Call to action
|
|
1543
|
+
<span class="pf-v5-c-button__icon pf-m-end">
|
|
1544
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
1545
|
+
</span>
|
|
1546
|
+
</button>
|
|
389
1547
|
|
|
390
1548
|
```
|
|
391
1549
|
|
|
@@ -456,12 +1614,12 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
456
1614
|
</button>
|
|
457
1615
|
<br />
|
|
458
1616
|
<button
|
|
459
|
-
class="pf-v5-c-button pf-m-
|
|
1617
|
+
class="pf-v5-c-button pf-m-inline pf-m-progress pf-m-link"
|
|
460
1618
|
type="button"
|
|
461
1619
|
>Inline loader</button>
|
|
462
1620
|
|
|
463
1621
|
<button
|
|
464
|
-
class="pf-v5-c-button pf-m-
|
|
1622
|
+
class="pf-v5-c-button pf-m-inline pf-m-progress pf-m-in-progress pf-m-link"
|
|
465
1623
|
type="button"
|
|
466
1624
|
>
|
|
467
1625
|
<span class="pf-v5-c-button__progress">
|
|
@@ -479,12 +1637,80 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
479
1637
|
|
|
480
1638
|
```
|
|
481
1639
|
|
|
482
|
-
###
|
|
1640
|
+
### Counts
|
|
483
1641
|
|
|
484
1642
|
```html isBeta
|
|
1643
|
+
<button
|
|
1644
|
+
class="pf-v5-c-button pf-m-primary"
|
|
1645
|
+
type="button"
|
|
1646
|
+
aria-label="View 7 issues"
|
|
1647
|
+
>
|
|
1648
|
+
View issues
|
|
1649
|
+
<span class="pf-v5-c-button__count">
|
|
1650
|
+
<span class="pf-v5-c-badge pf-m-unread">7</span>
|
|
1651
|
+
</span>
|
|
1652
|
+
</button>
|
|
1653
|
+
<button
|
|
1654
|
+
class="pf-v5-c-button pf-m-primary"
|
|
1655
|
+
type="button"
|
|
1656
|
+
aria-label="View 7 issues"
|
|
1657
|
+
>
|
|
1658
|
+
View issues
|
|
1659
|
+
<span class="pf-v5-c-button__count">
|
|
1660
|
+
<span class="pf-v5-c-badge pf-m-read">7</span>
|
|
1661
|
+
</span>
|
|
1662
|
+
</button>
|
|
1663
|
+
|
|
1664
|
+
<button
|
|
1665
|
+
class="pf-v5-c-button pf-m-link"
|
|
1666
|
+
type="button"
|
|
1667
|
+
aria-label="View 7 issues"
|
|
1668
|
+
>
|
|
1669
|
+
View issues
|
|
1670
|
+
<span class="pf-v5-c-button__count">
|
|
1671
|
+
<span class="pf-v5-c-badge pf-m-unread">7</span>
|
|
1672
|
+
</span>
|
|
1673
|
+
</button>
|
|
1674
|
+
<button
|
|
1675
|
+
class="pf-v5-c-button pf-m-link"
|
|
1676
|
+
type="button"
|
|
1677
|
+
aria-label="View 7 issues"
|
|
1678
|
+
>
|
|
1679
|
+
View issues
|
|
1680
|
+
<span class="pf-v5-c-button__count">
|
|
1681
|
+
<span class="pf-v5-c-badge pf-m-read">7</span>
|
|
1682
|
+
</span>
|
|
1683
|
+
</button>
|
|
1684
|
+
<br />
|
|
1685
|
+
<strong>disabled</strong>
|
|
1686
|
+
<br />
|
|
1687
|
+
<button
|
|
1688
|
+
class="pf-v5-c-button pf-m-primary"
|
|
1689
|
+
type="button"
|
|
1690
|
+
disabled
|
|
1691
|
+
aria-label="View 7 issues"
|
|
1692
|
+
>
|
|
1693
|
+
View issues
|
|
1694
|
+
<span class="pf-v5-c-button__count">
|
|
1695
|
+
<span class="pf-v5-c-badge pf-m-unread">7</span>
|
|
1696
|
+
</span>
|
|
1697
|
+
</button>
|
|
1698
|
+
<button
|
|
1699
|
+
class="pf-v5-c-button pf-m-primary"
|
|
1700
|
+
type="button"
|
|
1701
|
+
disabled
|
|
1702
|
+
aria-label="View 7 issues"
|
|
1703
|
+
>
|
|
1704
|
+
View issues
|
|
1705
|
+
<span class="pf-v5-c-button__count">
|
|
1706
|
+
<span class="pf-v5-c-badge pf-m-read">7</span>
|
|
1707
|
+
</span>
|
|
1708
|
+
</button>
|
|
1709
|
+
|
|
485
1710
|
<button
|
|
486
1711
|
class="pf-v5-c-button pf-m-link"
|
|
487
1712
|
type="button"
|
|
1713
|
+
disabled
|
|
488
1714
|
aria-label="View 7 issues"
|
|
489
1715
|
>
|
|
490
1716
|
View issues
|
|
@@ -495,6 +1721,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
495
1721
|
<button
|
|
496
1722
|
class="pf-v5-c-button pf-m-link"
|
|
497
1723
|
type="button"
|
|
1724
|
+
disabled
|
|
498
1725
|
aria-label="View 7 issues"
|
|
499
1726
|
>
|
|
500
1727
|
View issues
|
|
@@ -505,6 +1732,77 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
505
1732
|
|
|
506
1733
|
```
|
|
507
1734
|
|
|
1735
|
+
### Plain with no padding
|
|
1736
|
+
|
|
1737
|
+
```html
|
|
1738
|
+
For when a plain/icon button is placed inline with text
|
|
1739
|
+
<button
|
|
1740
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
1741
|
+
type="button"
|
|
1742
|
+
aria-label="More info"
|
|
1743
|
+
>
|
|
1744
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1745
|
+
</button>
|
|
1746
|
+
.
|
|
1747
|
+
|
|
1748
|
+
```
|
|
1749
|
+
|
|
1750
|
+
### Stateful
|
|
1751
|
+
|
|
1752
|
+
```html
|
|
1753
|
+
<strong>Read</strong>
|
|
1754
|
+
<br />
|
|
1755
|
+
<button class="pf-v5-c-button pf-m-stateful pf-m-read" type="button">
|
|
1756
|
+
<i class="fas fa-bell" aria-hidden="true"></i> 10
|
|
1757
|
+
<span class="pf-v5-screen-reader">items</span>
|
|
1758
|
+
</button>
|
|
1759
|
+
|
|
1760
|
+
<button
|
|
1761
|
+
class="pf-v5-c-button pf-m-stateful pf-m-read pf-m-clicked"
|
|
1762
|
+
type="button"
|
|
1763
|
+
>
|
|
1764
|
+
<i class="fas fa-bell" aria-hidden="true"></i> 10
|
|
1765
|
+
<span class="pf-v5-screen-reader">items</span>
|
|
1766
|
+
</button>
|
|
1767
|
+
|
|
1768
|
+
<br />
|
|
1769
|
+
<br />
|
|
1770
|
+
|
|
1771
|
+
<strong>Unread</strong>
|
|
1772
|
+
<br />
|
|
1773
|
+
<button class="pf-v5-c-button pf-m-stateful pf-m-unread" type="button">
|
|
1774
|
+
<i class="fas fa-bell" aria-hidden="true"></i> 10
|
|
1775
|
+
<span class="pf-v5-screen-reader">unread items</span>
|
|
1776
|
+
</button>
|
|
1777
|
+
|
|
1778
|
+
<button
|
|
1779
|
+
class="pf-v5-c-button pf-m-stateful pf-m-unread pf-m-clicked"
|
|
1780
|
+
type="button"
|
|
1781
|
+
>
|
|
1782
|
+
<i class="fas fa-bell" aria-hidden="true"></i> 10
|
|
1783
|
+
<span class="pf-v5-screen-reader">unread items</span>
|
|
1784
|
+
</button>
|
|
1785
|
+
|
|
1786
|
+
<br />
|
|
1787
|
+
<br />
|
|
1788
|
+
|
|
1789
|
+
<strong>Attention</strong>
|
|
1790
|
+
<br />
|
|
1791
|
+
<button class="pf-v5-c-button pf-m-stateful pf-m-attention" type="button">
|
|
1792
|
+
<i class="fas fa-bell" aria-hidden="true"></i> 10
|
|
1793
|
+
<span class="pf-v5-screen-reader">unread items, needs attention</span>
|
|
1794
|
+
</button>
|
|
1795
|
+
|
|
1796
|
+
<button
|
|
1797
|
+
class="pf-v5-c-button pf-m-stateful pf-m-attention pf-m-clicked"
|
|
1798
|
+
type="button"
|
|
1799
|
+
>
|
|
1800
|
+
<i class="fas fa-bell" aria-hidden="true"></i> 10
|
|
1801
|
+
<span class="pf-v5-screen-reader">unread items, needs attention</span>
|
|
1802
|
+
</button>
|
|
1803
|
+
|
|
1804
|
+
```
|
|
1805
|
+
|
|
508
1806
|
## Documentation
|
|
509
1807
|
|
|
510
1808
|
### Overview
|
|
@@ -557,3 +1855,4 @@ Semantic buttons and links are important for usability as well as accessibility.
|
|
|
557
1855
|
| `.pf-m-display-lg` | `.pf-v5-c-button`, `pf-v5-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
|
|
558
1856
|
| `.pf-m-progress` | `.pf-v5-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
|
|
559
1857
|
| `.pf-m-in-progress` | `.pf-v5-c-button` | Indicates that the button is in the in progress state. |
|
|
1858
|
+
| `.pf-m-stateful` | `.pf-v5-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
|