@patternfly/patternfly 5.3.0-prerelease.4 → 5.3.0
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/Label/label.css +14 -0
- package/components/Label/label.scss +19 -0
- package/docs/components/Label/examples/Label.md +1119 -13
- package/package.json +3 -3
- package/patternfly-no-globals.css +14 -0
- package/patternfly-theme-dark-unversioned.css +14 -0
- package/patternfly.css +14 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -84,6 +84,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
84
84
|
</span>
|
|
85
85
|
</span>
|
|
86
86
|
|
|
87
|
+
<span class="pf-v5-c-label">
|
|
88
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
89
|
+
<span class="pf-v5-c-label__text">Grey clickable</span>
|
|
90
|
+
</button>
|
|
91
|
+
</span>
|
|
92
|
+
|
|
93
|
+
<span class="pf-v5-c-label">
|
|
94
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
95
|
+
<span class="pf-v5-c-label__text">Grey clickable removable</span>
|
|
96
|
+
</button>
|
|
97
|
+
<span class="pf-v5-c-label__actions">
|
|
98
|
+
<button
|
|
99
|
+
class="pf-v5-c-button pf-m-plain"
|
|
100
|
+
type="button"
|
|
101
|
+
id="default-clickable-removable-button"
|
|
102
|
+
aria-label="Remove"
|
|
103
|
+
aria-labelledby="default-clickable-removable-button default-clickable-removable-text"
|
|
104
|
+
>
|
|
105
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
106
|
+
</button>
|
|
107
|
+
</span>
|
|
108
|
+
</span>
|
|
109
|
+
|
|
87
110
|
<span class="pf-v5-c-label">
|
|
88
111
|
<span class="pf-v5-c-label__content">
|
|
89
112
|
<span class="pf-v5-c-label__icon">
|
|
@@ -119,6 +142,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
119
142
|
</span>
|
|
120
143
|
</span>
|
|
121
144
|
|
|
145
|
+
<span class="pf-v5-c-label pf-m-disabled">
|
|
146
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
147
|
+
<span class="pf-v5-c-label__icon">
|
|
148
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
149
|
+
</span>
|
|
150
|
+
<span class="pf-v5-c-label__text">Grey link removable (disabled)</span>
|
|
151
|
+
</a>
|
|
152
|
+
<span class="pf-v5-c-label__actions">
|
|
153
|
+
<button
|
|
154
|
+
class="pf-v5-c-button pf-m-plain"
|
|
155
|
+
type="button"
|
|
156
|
+
disabled
|
|
157
|
+
id="default-link-disabled-button"
|
|
158
|
+
aria-label="Remove"
|
|
159
|
+
aria-labelledby="default-link-disabled-button default-link-disabled-text"
|
|
160
|
+
>
|
|
161
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
162
|
+
</button>
|
|
163
|
+
</span>
|
|
164
|
+
</span>
|
|
165
|
+
|
|
166
|
+
<span class="pf-v5-c-label pf-m-disabled">
|
|
167
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
168
|
+
<span class="pf-v5-c-label__icon">
|
|
169
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
170
|
+
</span>
|
|
171
|
+
<span class="pf-v5-c-label__text">Grey clickable removable (disabled)</span>
|
|
172
|
+
</button>
|
|
173
|
+
<span class="pf-v5-c-label__actions">
|
|
174
|
+
<button
|
|
175
|
+
class="pf-v5-c-button pf-m-plain"
|
|
176
|
+
type="button"
|
|
177
|
+
disabled
|
|
178
|
+
id="default-clickable-disabled-button"
|
|
179
|
+
aria-label="Remove"
|
|
180
|
+
aria-labelledby="default-clickable-disabled-button default-clickable-disabled-text"
|
|
181
|
+
>
|
|
182
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
183
|
+
</button>
|
|
184
|
+
</span>
|
|
185
|
+
</span>
|
|
186
|
+
|
|
122
187
|
<br />
|
|
123
188
|
<br />
|
|
124
189
|
|
|
@@ -197,6 +262,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
197
262
|
</span>
|
|
198
263
|
</span>
|
|
199
264
|
|
|
265
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
266
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
267
|
+
<span class="pf-v5-c-label__text">Blue clickable</span>
|
|
268
|
+
</button>
|
|
269
|
+
</span>
|
|
270
|
+
|
|
271
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
272
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
273
|
+
<span class="pf-v5-c-label__text">Blue clickable removable</span>
|
|
274
|
+
</button>
|
|
275
|
+
<span class="pf-v5-c-label__actions">
|
|
276
|
+
<button
|
|
277
|
+
class="pf-v5-c-button pf-m-plain"
|
|
278
|
+
type="button"
|
|
279
|
+
id="blue-clickable-removable-button"
|
|
280
|
+
aria-label="Remove"
|
|
281
|
+
aria-labelledby="blue-clickable-removable-button blue-clickable-removable-text"
|
|
282
|
+
>
|
|
283
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
284
|
+
</button>
|
|
285
|
+
</span>
|
|
286
|
+
</span>
|
|
287
|
+
|
|
200
288
|
<span class="pf-v5-c-label pf-m-blue">
|
|
201
289
|
<span class="pf-v5-c-label__content">
|
|
202
290
|
<span class="pf-v5-c-label__icon">
|
|
@@ -232,6 +320,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
232
320
|
</span>
|
|
233
321
|
</span>
|
|
234
322
|
|
|
323
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-blue">
|
|
324
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
325
|
+
<span class="pf-v5-c-label__icon">
|
|
326
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
327
|
+
</span>
|
|
328
|
+
<span class="pf-v5-c-label__text">Blue link removable (disabled)</span>
|
|
329
|
+
</a>
|
|
330
|
+
<span class="pf-v5-c-label__actions">
|
|
331
|
+
<button
|
|
332
|
+
class="pf-v5-c-button pf-m-plain"
|
|
333
|
+
type="button"
|
|
334
|
+
disabled
|
|
335
|
+
id="blue-link-disabled-button"
|
|
336
|
+
aria-label="Remove"
|
|
337
|
+
aria-labelledby="blue-link-disabled-button blue-link-disabled-text"
|
|
338
|
+
>
|
|
339
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
340
|
+
</button>
|
|
341
|
+
</span>
|
|
342
|
+
</span>
|
|
343
|
+
|
|
344
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-blue">
|
|
345
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
346
|
+
<span class="pf-v5-c-label__icon">
|
|
347
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
348
|
+
</span>
|
|
349
|
+
<span class="pf-v5-c-label__text">Blue clickable removable (disabled)</span>
|
|
350
|
+
</button>
|
|
351
|
+
<span class="pf-v5-c-label__actions">
|
|
352
|
+
<button
|
|
353
|
+
class="pf-v5-c-button pf-m-plain"
|
|
354
|
+
type="button"
|
|
355
|
+
disabled
|
|
356
|
+
id="blue-clickable-disabled-button"
|
|
357
|
+
aria-label="Remove"
|
|
358
|
+
aria-labelledby="blue-clickable-disabled-button blue-clickable-disabled-text"
|
|
359
|
+
>
|
|
360
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
361
|
+
</button>
|
|
362
|
+
</span>
|
|
363
|
+
</span>
|
|
364
|
+
|
|
235
365
|
<br />
|
|
236
366
|
<br />
|
|
237
367
|
|
|
@@ -310,6 +440,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
310
440
|
</span>
|
|
311
441
|
</span>
|
|
312
442
|
|
|
443
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
444
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
445
|
+
<span class="pf-v5-c-label__text">Green clickable</span>
|
|
446
|
+
</button>
|
|
447
|
+
</span>
|
|
448
|
+
|
|
449
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
450
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
451
|
+
<span class="pf-v5-c-label__text">Green clickable removable</span>
|
|
452
|
+
</button>
|
|
453
|
+
<span class="pf-v5-c-label__actions">
|
|
454
|
+
<button
|
|
455
|
+
class="pf-v5-c-button pf-m-plain"
|
|
456
|
+
type="button"
|
|
457
|
+
id="green-clickable-removable-button"
|
|
458
|
+
aria-label="Remove"
|
|
459
|
+
aria-labelledby="green-clickable-removable-button green-clickable-removable-text"
|
|
460
|
+
>
|
|
461
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
462
|
+
</button>
|
|
463
|
+
</span>
|
|
464
|
+
</span>
|
|
465
|
+
|
|
313
466
|
<span class="pf-v5-c-label pf-m-green">
|
|
314
467
|
<span class="pf-v5-c-label__content">
|
|
315
468
|
<span class="pf-v5-c-label__icon">
|
|
@@ -345,6 +498,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
345
498
|
</span>
|
|
346
499
|
</span>
|
|
347
500
|
|
|
501
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-green">
|
|
502
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
503
|
+
<span class="pf-v5-c-label__icon">
|
|
504
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
505
|
+
</span>
|
|
506
|
+
<span class="pf-v5-c-label__text">Green link removable (disabled)</span>
|
|
507
|
+
</a>
|
|
508
|
+
<span class="pf-v5-c-label__actions">
|
|
509
|
+
<button
|
|
510
|
+
class="pf-v5-c-button pf-m-plain"
|
|
511
|
+
type="button"
|
|
512
|
+
disabled
|
|
513
|
+
id="green-link-disabled-button"
|
|
514
|
+
aria-label="Remove"
|
|
515
|
+
aria-labelledby="green-link-disabled-button green-link-disabled-text"
|
|
516
|
+
>
|
|
517
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
518
|
+
</button>
|
|
519
|
+
</span>
|
|
520
|
+
</span>
|
|
521
|
+
|
|
522
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-green">
|
|
523
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
524
|
+
<span class="pf-v5-c-label__icon">
|
|
525
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
526
|
+
</span>
|
|
527
|
+
<span class="pf-v5-c-label__text">Green clickable removable (disabled)</span>
|
|
528
|
+
</button>
|
|
529
|
+
<span class="pf-v5-c-label__actions">
|
|
530
|
+
<button
|
|
531
|
+
class="pf-v5-c-button pf-m-plain"
|
|
532
|
+
type="button"
|
|
533
|
+
disabled
|
|
534
|
+
id="green-clickable-disabled-button"
|
|
535
|
+
aria-label="Remove"
|
|
536
|
+
aria-labelledby="green-clickable-disabled-button green-clickable-disabled-text"
|
|
537
|
+
>
|
|
538
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
539
|
+
</button>
|
|
540
|
+
</span>
|
|
541
|
+
</span>
|
|
542
|
+
|
|
348
543
|
<br />
|
|
349
544
|
<br />
|
|
350
545
|
|
|
@@ -423,6 +618,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
423
618
|
</span>
|
|
424
619
|
</span>
|
|
425
620
|
|
|
621
|
+
<span class="pf-v5-c-label pf-m-orange">
|
|
622
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
623
|
+
<span class="pf-v5-c-label__text">Orange clickable</span>
|
|
624
|
+
</button>
|
|
625
|
+
</span>
|
|
626
|
+
|
|
627
|
+
<span class="pf-v5-c-label pf-m-orange">
|
|
628
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
629
|
+
<span class="pf-v5-c-label__text">Orange clickable removable</span>
|
|
630
|
+
</button>
|
|
631
|
+
<span class="pf-v5-c-label__actions">
|
|
632
|
+
<button
|
|
633
|
+
class="pf-v5-c-button pf-m-plain"
|
|
634
|
+
type="button"
|
|
635
|
+
id="orange-clickable-removable-button"
|
|
636
|
+
aria-label="Remove"
|
|
637
|
+
aria-labelledby="orange-clickable-removable-button orange-clickable-removable-text"
|
|
638
|
+
>
|
|
639
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
640
|
+
</button>
|
|
641
|
+
</span>
|
|
642
|
+
</span>
|
|
643
|
+
|
|
426
644
|
<span class="pf-v5-c-label pf-m-orange">
|
|
427
645
|
<span class="pf-v5-c-label__content">
|
|
428
646
|
<span class="pf-v5-c-label__icon">
|
|
@@ -458,6 +676,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
458
676
|
</span>
|
|
459
677
|
</span>
|
|
460
678
|
|
|
679
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-orange">
|
|
680
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
681
|
+
<span class="pf-v5-c-label__icon">
|
|
682
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
683
|
+
</span>
|
|
684
|
+
<span class="pf-v5-c-label__text">Orange link removable (disabled)</span>
|
|
685
|
+
</a>
|
|
686
|
+
<span class="pf-v5-c-label__actions">
|
|
687
|
+
<button
|
|
688
|
+
class="pf-v5-c-button pf-m-plain"
|
|
689
|
+
type="button"
|
|
690
|
+
disabled
|
|
691
|
+
id="orange-link-disabled-button"
|
|
692
|
+
aria-label="Remove"
|
|
693
|
+
aria-labelledby="orange-link-disabled-button orange-link-disabled-text"
|
|
694
|
+
>
|
|
695
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
696
|
+
</button>
|
|
697
|
+
</span>
|
|
698
|
+
</span>
|
|
699
|
+
|
|
700
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-orange">
|
|
701
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
702
|
+
<span class="pf-v5-c-label__icon">
|
|
703
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
704
|
+
</span>
|
|
705
|
+
<span class="pf-v5-c-label__text">Orange clickable removable (disabled)</span>
|
|
706
|
+
</button>
|
|
707
|
+
<span class="pf-v5-c-label__actions">
|
|
708
|
+
<button
|
|
709
|
+
class="pf-v5-c-button pf-m-plain"
|
|
710
|
+
type="button"
|
|
711
|
+
disabled
|
|
712
|
+
id="orange-clickable-disabled-button"
|
|
713
|
+
aria-label="Remove"
|
|
714
|
+
aria-labelledby="orange-clickable-disabled-button orange-clickable-disabled-text"
|
|
715
|
+
>
|
|
716
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
717
|
+
</button>
|
|
718
|
+
</span>
|
|
719
|
+
</span>
|
|
720
|
+
|
|
461
721
|
<br />
|
|
462
722
|
<br />
|
|
463
723
|
|
|
@@ -536,6 +796,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
536
796
|
</span>
|
|
537
797
|
</span>
|
|
538
798
|
|
|
799
|
+
<span class="pf-v5-c-label pf-m-red">
|
|
800
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
801
|
+
<span class="pf-v5-c-label__text">Red clickable</span>
|
|
802
|
+
</button>
|
|
803
|
+
</span>
|
|
804
|
+
|
|
805
|
+
<span class="pf-v5-c-label pf-m-red">
|
|
806
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
807
|
+
<span class="pf-v5-c-label__text">Red clickable removable</span>
|
|
808
|
+
</button>
|
|
809
|
+
<span class="pf-v5-c-label__actions">
|
|
810
|
+
<button
|
|
811
|
+
class="pf-v5-c-button pf-m-plain"
|
|
812
|
+
type="button"
|
|
813
|
+
id="red-clickable-removable-button"
|
|
814
|
+
aria-label="Remove"
|
|
815
|
+
aria-labelledby="red-clickable-removable-button red-clickable-removable-text"
|
|
816
|
+
>
|
|
817
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
818
|
+
</button>
|
|
819
|
+
</span>
|
|
820
|
+
</span>
|
|
821
|
+
|
|
539
822
|
<span class="pf-v5-c-label pf-m-red">
|
|
540
823
|
<span class="pf-v5-c-label__content">
|
|
541
824
|
<span class="pf-v5-c-label__icon">
|
|
@@ -571,6 +854,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
571
854
|
</span>
|
|
572
855
|
</span>
|
|
573
856
|
|
|
857
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-red">
|
|
858
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
859
|
+
<span class="pf-v5-c-label__icon">
|
|
860
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
861
|
+
</span>
|
|
862
|
+
<span class="pf-v5-c-label__text">Red link removable (disabled)</span>
|
|
863
|
+
</a>
|
|
864
|
+
<span class="pf-v5-c-label__actions">
|
|
865
|
+
<button
|
|
866
|
+
class="pf-v5-c-button pf-m-plain"
|
|
867
|
+
type="button"
|
|
868
|
+
disabled
|
|
869
|
+
id="red-link-disabled-button"
|
|
870
|
+
aria-label="Remove"
|
|
871
|
+
aria-labelledby="red-link-disabled-button red-link-disabled-text"
|
|
872
|
+
>
|
|
873
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
874
|
+
</button>
|
|
875
|
+
</span>
|
|
876
|
+
</span>
|
|
877
|
+
|
|
878
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-red">
|
|
879
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
880
|
+
<span class="pf-v5-c-label__icon">
|
|
881
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
882
|
+
</span>
|
|
883
|
+
<span class="pf-v5-c-label__text">Red clickable removable (disabled)</span>
|
|
884
|
+
</button>
|
|
885
|
+
<span class="pf-v5-c-label__actions">
|
|
886
|
+
<button
|
|
887
|
+
class="pf-v5-c-button pf-m-plain"
|
|
888
|
+
type="button"
|
|
889
|
+
disabled
|
|
890
|
+
id="red-clickable-disabled-button"
|
|
891
|
+
aria-label="Remove"
|
|
892
|
+
aria-labelledby="red-clickable-disabled-button red-clickable-disabled-text"
|
|
893
|
+
>
|
|
894
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
895
|
+
</button>
|
|
896
|
+
</span>
|
|
897
|
+
</span>
|
|
898
|
+
|
|
574
899
|
<br />
|
|
575
900
|
<br />
|
|
576
901
|
|
|
@@ -649,6 +974,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
649
974
|
</span>
|
|
650
975
|
</span>
|
|
651
976
|
|
|
977
|
+
<span class="pf-v5-c-label pf-m-purple">
|
|
978
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
979
|
+
<span class="pf-v5-c-label__text">Purple clickable</span>
|
|
980
|
+
</button>
|
|
981
|
+
</span>
|
|
982
|
+
|
|
983
|
+
<span class="pf-v5-c-label pf-m-purple">
|
|
984
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
985
|
+
<span class="pf-v5-c-label__text">Purple clickable removable</span>
|
|
986
|
+
</button>
|
|
987
|
+
<span class="pf-v5-c-label__actions">
|
|
988
|
+
<button
|
|
989
|
+
class="pf-v5-c-button pf-m-plain"
|
|
990
|
+
type="button"
|
|
991
|
+
id="purple-clickable-removable-button"
|
|
992
|
+
aria-label="Remove"
|
|
993
|
+
aria-labelledby="purple-clickable-removable-button purple-clickable-removable-text"
|
|
994
|
+
>
|
|
995
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
996
|
+
</button>
|
|
997
|
+
</span>
|
|
998
|
+
</span>
|
|
999
|
+
|
|
652
1000
|
<span class="pf-v5-c-label pf-m-purple">
|
|
653
1001
|
<span class="pf-v5-c-label__content">
|
|
654
1002
|
<span class="pf-v5-c-label__icon">
|
|
@@ -684,10 +1032,52 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
684
1032
|
</span>
|
|
685
1033
|
</span>
|
|
686
1034
|
|
|
687
|
-
<
|
|
688
|
-
<
|
|
689
|
-
|
|
690
|
-
<
|
|
1035
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-purple">
|
|
1036
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
1037
|
+
<span class="pf-v5-c-label__icon">
|
|
1038
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1039
|
+
</span>
|
|
1040
|
+
<span class="pf-v5-c-label__text">Purple link removable (disabled)</span>
|
|
1041
|
+
</a>
|
|
1042
|
+
<span class="pf-v5-c-label__actions">
|
|
1043
|
+
<button
|
|
1044
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1045
|
+
type="button"
|
|
1046
|
+
disabled
|
|
1047
|
+
id="purple-link-disabled-button"
|
|
1048
|
+
aria-label="Remove"
|
|
1049
|
+
aria-labelledby="purple-link-disabled-button purple-link-disabled-text"
|
|
1050
|
+
>
|
|
1051
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1052
|
+
</button>
|
|
1053
|
+
</span>
|
|
1054
|
+
</span>
|
|
1055
|
+
|
|
1056
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-purple">
|
|
1057
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
1058
|
+
<span class="pf-v5-c-label__icon">
|
|
1059
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1060
|
+
</span>
|
|
1061
|
+
<span class="pf-v5-c-label__text">Purple clickable removable (disabled)</span>
|
|
1062
|
+
</button>
|
|
1063
|
+
<span class="pf-v5-c-label__actions">
|
|
1064
|
+
<button
|
|
1065
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1066
|
+
type="button"
|
|
1067
|
+
disabled
|
|
1068
|
+
id="purple-clickable-disabled-button"
|
|
1069
|
+
aria-label="Remove"
|
|
1070
|
+
aria-labelledby="purple-clickable-disabled-button purple-clickable-disabled-text"
|
|
1071
|
+
>
|
|
1072
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1073
|
+
</button>
|
|
1074
|
+
</span>
|
|
1075
|
+
</span>
|
|
1076
|
+
|
|
1077
|
+
<br />
|
|
1078
|
+
<br />
|
|
1079
|
+
|
|
1080
|
+
<span class="pf-v5-c-label pf-m-cyan">
|
|
691
1081
|
<span class="pf-v5-c-label__content">
|
|
692
1082
|
<span class="pf-v5-c-label__text">Cyan</span>
|
|
693
1083
|
</span>
|
|
@@ -762,6 +1152,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
762
1152
|
</span>
|
|
763
1153
|
</span>
|
|
764
1154
|
|
|
1155
|
+
<span class="pf-v5-c-label pf-m-cyan">
|
|
1156
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1157
|
+
<span class="pf-v5-c-label__text">Cyan clickable</span>
|
|
1158
|
+
</button>
|
|
1159
|
+
</span>
|
|
1160
|
+
|
|
1161
|
+
<span class="pf-v5-c-label pf-m-cyan">
|
|
1162
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1163
|
+
<span class="pf-v5-c-label__text">Cyan clickable removable</span>
|
|
1164
|
+
</button>
|
|
1165
|
+
<span class="pf-v5-c-label__actions">
|
|
1166
|
+
<button
|
|
1167
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1168
|
+
type="button"
|
|
1169
|
+
id="cyan-clickable-removable-button"
|
|
1170
|
+
aria-label="Remove"
|
|
1171
|
+
aria-labelledby="cyan-clickable-removable-button cyan-clickable-removable-text"
|
|
1172
|
+
>
|
|
1173
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1174
|
+
</button>
|
|
1175
|
+
</span>
|
|
1176
|
+
</span>
|
|
1177
|
+
|
|
765
1178
|
<span class="pf-v5-c-label pf-m-cyan">
|
|
766
1179
|
<span class="pf-v5-c-label__content">
|
|
767
1180
|
<span class="pf-v5-c-label__icon">
|
|
@@ -797,6 +1210,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
797
1210
|
</span>
|
|
798
1211
|
</span>
|
|
799
1212
|
|
|
1213
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-cyan">
|
|
1214
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
1215
|
+
<span class="pf-v5-c-label__icon">
|
|
1216
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1217
|
+
</span>
|
|
1218
|
+
<span class="pf-v5-c-label__text">Cyan link removable (disabled)</span>
|
|
1219
|
+
</a>
|
|
1220
|
+
<span class="pf-v5-c-label__actions">
|
|
1221
|
+
<button
|
|
1222
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1223
|
+
type="button"
|
|
1224
|
+
disabled
|
|
1225
|
+
id="cyan-link-disabled-button"
|
|
1226
|
+
aria-label="Remove"
|
|
1227
|
+
aria-labelledby="cyan-link-disabled-button cyan-link-disabled-text"
|
|
1228
|
+
>
|
|
1229
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1230
|
+
</button>
|
|
1231
|
+
</span>
|
|
1232
|
+
</span>
|
|
1233
|
+
|
|
1234
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-cyan">
|
|
1235
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
1236
|
+
<span class="pf-v5-c-label__icon">
|
|
1237
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1238
|
+
</span>
|
|
1239
|
+
<span class="pf-v5-c-label__text">Cyan clickable removable (disabled)</span>
|
|
1240
|
+
</button>
|
|
1241
|
+
<span class="pf-v5-c-label__actions">
|
|
1242
|
+
<button
|
|
1243
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1244
|
+
type="button"
|
|
1245
|
+
disabled
|
|
1246
|
+
id="cyan-clickable-disabled-button"
|
|
1247
|
+
aria-label="Remove"
|
|
1248
|
+
aria-labelledby="cyan-clickable-disabled-button cyan-clickable-disabled-text"
|
|
1249
|
+
>
|
|
1250
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1251
|
+
</button>
|
|
1252
|
+
</span>
|
|
1253
|
+
</span>
|
|
1254
|
+
|
|
800
1255
|
<br />
|
|
801
1256
|
<br />
|
|
802
1257
|
<span class="pf-v5-c-label pf-m-gold">
|
|
@@ -874,6 +1329,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
874
1329
|
</span>
|
|
875
1330
|
</span>
|
|
876
1331
|
|
|
1332
|
+
<span class="pf-v5-c-label pf-m-gold">
|
|
1333
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1334
|
+
<span class="pf-v5-c-label__text">Gold clickable</span>
|
|
1335
|
+
</button>
|
|
1336
|
+
</span>
|
|
1337
|
+
|
|
1338
|
+
<span class="pf-v5-c-label pf-m-gold">
|
|
1339
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1340
|
+
<span class="pf-v5-c-label__text">Gold clickable removable</span>
|
|
1341
|
+
</button>
|
|
1342
|
+
<span class="pf-v5-c-label__actions">
|
|
1343
|
+
<button
|
|
1344
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1345
|
+
type="button"
|
|
1346
|
+
id="gold-clickable-removable-button"
|
|
1347
|
+
aria-label="Remove"
|
|
1348
|
+
aria-labelledby="gold-clickable-removable-button gold-clickable-removable-text"
|
|
1349
|
+
>
|
|
1350
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1351
|
+
</button>
|
|
1352
|
+
</span>
|
|
1353
|
+
</span>
|
|
1354
|
+
|
|
877
1355
|
<span class="pf-v5-c-label pf-m-gold">
|
|
878
1356
|
<span class="pf-v5-c-label__content">
|
|
879
1357
|
<span class="pf-v5-c-label__icon">
|
|
@@ -909,6 +1387,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
909
1387
|
</span>
|
|
910
1388
|
</span>
|
|
911
1389
|
|
|
1390
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-gold">
|
|
1391
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
1392
|
+
<span class="pf-v5-c-label__icon">
|
|
1393
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1394
|
+
</span>
|
|
1395
|
+
<span class="pf-v5-c-label__text">Gold link removable (disabled)</span>
|
|
1396
|
+
</a>
|
|
1397
|
+
<span class="pf-v5-c-label__actions">
|
|
1398
|
+
<button
|
|
1399
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1400
|
+
type="button"
|
|
1401
|
+
disabled
|
|
1402
|
+
id="gold-link-disabled-button"
|
|
1403
|
+
aria-label="Remove"
|
|
1404
|
+
aria-labelledby="gold-link-disabled-button gold-link-disabled-text"
|
|
1405
|
+
>
|
|
1406
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1407
|
+
</button>
|
|
1408
|
+
</span>
|
|
1409
|
+
</span>
|
|
1410
|
+
|
|
1411
|
+
<span class="pf-v5-c-label pf-m-disabled pf-m-gold">
|
|
1412
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
1413
|
+
<span class="pf-v5-c-label__icon">
|
|
1414
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1415
|
+
</span>
|
|
1416
|
+
<span class="pf-v5-c-label__text">Gold clickable removable (disabled)</span>
|
|
1417
|
+
</button>
|
|
1418
|
+
<span class="pf-v5-c-label__actions">
|
|
1419
|
+
<button
|
|
1420
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1421
|
+
type="button"
|
|
1422
|
+
disabled
|
|
1423
|
+
id="gold-clickable-disabled-button"
|
|
1424
|
+
aria-label="Remove"
|
|
1425
|
+
aria-labelledby="gold-clickable-disabled-button gold-clickable-disabled-text"
|
|
1426
|
+
>
|
|
1427
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1428
|
+
</button>
|
|
1429
|
+
</span>
|
|
1430
|
+
</span>
|
|
1431
|
+
|
|
912
1432
|
```
|
|
913
1433
|
|
|
914
1434
|
### Outline
|
|
@@ -989,6 +1509,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
989
1509
|
</span>
|
|
990
1510
|
</span>
|
|
991
1511
|
|
|
1512
|
+
<span class="pf-v5-c-label pf-m-outline">
|
|
1513
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1514
|
+
<span class="pf-v5-c-label__text">Grey clickable</span>
|
|
1515
|
+
</button>
|
|
1516
|
+
</span>
|
|
1517
|
+
|
|
1518
|
+
<span class="pf-v5-c-label pf-m-outline">
|
|
1519
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1520
|
+
<span class="pf-v5-c-label__text">Grey clickable removable</span>
|
|
1521
|
+
</button>
|
|
1522
|
+
<span class="pf-v5-c-label__actions">
|
|
1523
|
+
<button
|
|
1524
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1525
|
+
type="button"
|
|
1526
|
+
id="grey-outline-clickable-removable-button"
|
|
1527
|
+
aria-label="Remove"
|
|
1528
|
+
aria-labelledby="grey-outline-clickable-removable-button grey-outline-clickable-removable-text"
|
|
1529
|
+
>
|
|
1530
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1531
|
+
</button>
|
|
1532
|
+
</span>
|
|
1533
|
+
</span>
|
|
1534
|
+
|
|
992
1535
|
<span class="pf-v5-c-label pf-m-outline">
|
|
993
1536
|
<span class="pf-v5-c-label__content">
|
|
994
1537
|
<span class="pf-v5-c-label__icon">
|
|
@@ -1024,6 +1567,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1024
1567
|
</span>
|
|
1025
1568
|
</span>
|
|
1026
1569
|
|
|
1570
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled">
|
|
1571
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
1572
|
+
<span class="pf-v5-c-label__icon">
|
|
1573
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1574
|
+
</span>
|
|
1575
|
+
<span class="pf-v5-c-label__text">Grey link removable (disabled)</span>
|
|
1576
|
+
</a>
|
|
1577
|
+
<span class="pf-v5-c-label__actions">
|
|
1578
|
+
<button
|
|
1579
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1580
|
+
type="button"
|
|
1581
|
+
disabled
|
|
1582
|
+
id="grey-outline-link-disabled-button"
|
|
1583
|
+
aria-label="Remove"
|
|
1584
|
+
aria-labelledby="grey-outline-link-disabled-button grey-outline-link-disabled-text"
|
|
1585
|
+
>
|
|
1586
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1587
|
+
</button>
|
|
1588
|
+
</span>
|
|
1589
|
+
</span>
|
|
1590
|
+
|
|
1591
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled">
|
|
1592
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
1593
|
+
<span class="pf-v5-c-label__icon">
|
|
1594
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1595
|
+
</span>
|
|
1596
|
+
<span class="pf-v5-c-label__text">Grey clickable removable (disabled)</span>
|
|
1597
|
+
</button>
|
|
1598
|
+
<span class="pf-v5-c-label__actions">
|
|
1599
|
+
<button
|
|
1600
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1601
|
+
type="button"
|
|
1602
|
+
disabled
|
|
1603
|
+
id="grey-outline-clickable-disabled-button"
|
|
1604
|
+
aria-label="Remove"
|
|
1605
|
+
aria-labelledby="grey-outline-clickable-disabled-button grey-outline-clickable-disabled-text"
|
|
1606
|
+
>
|
|
1607
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1608
|
+
</button>
|
|
1609
|
+
</span>
|
|
1610
|
+
</span>
|
|
1611
|
+
|
|
1027
1612
|
<br />
|
|
1028
1613
|
<br />
|
|
1029
1614
|
|
|
@@ -1102,6 +1687,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1102
1687
|
</span>
|
|
1103
1688
|
</span>
|
|
1104
1689
|
|
|
1690
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-blue">
|
|
1691
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1692
|
+
<span class="pf-v5-c-label__text">Blue clickable</span>
|
|
1693
|
+
</button>
|
|
1694
|
+
</span>
|
|
1695
|
+
|
|
1696
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-blue">
|
|
1697
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1698
|
+
<span class="pf-v5-c-label__text">Blue clickable removable</span>
|
|
1699
|
+
</button>
|
|
1700
|
+
<span class="pf-v5-c-label__actions">
|
|
1701
|
+
<button
|
|
1702
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1703
|
+
type="button"
|
|
1704
|
+
id="blue-outline-clickable-removable-button"
|
|
1705
|
+
aria-label="Remove"
|
|
1706
|
+
aria-labelledby="blue-outline-clickable-removable-button blue-outline-clickable-removable-text"
|
|
1707
|
+
>
|
|
1708
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1709
|
+
</button>
|
|
1710
|
+
</span>
|
|
1711
|
+
</span>
|
|
1712
|
+
|
|
1105
1713
|
<span class="pf-v5-c-label pf-m-outline pf-m-blue">
|
|
1106
1714
|
<span class="pf-v5-c-label__content">
|
|
1107
1715
|
<span class="pf-v5-c-label__icon">
|
|
@@ -1137,6 +1745,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1137
1745
|
</span>
|
|
1138
1746
|
</span>
|
|
1139
1747
|
|
|
1748
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-blue">
|
|
1749
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
1750
|
+
<span class="pf-v5-c-label__icon">
|
|
1751
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1752
|
+
</span>
|
|
1753
|
+
<span class="pf-v5-c-label__text">Blue link removable (disabled)</span>
|
|
1754
|
+
</a>
|
|
1755
|
+
<span class="pf-v5-c-label__actions">
|
|
1756
|
+
<button
|
|
1757
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1758
|
+
type="button"
|
|
1759
|
+
disabled
|
|
1760
|
+
id="blue-outline-link-disabled-button"
|
|
1761
|
+
aria-label="Remove"
|
|
1762
|
+
aria-labelledby="blue-outline-link-disabled-button blue-outline-link-disabled-text"
|
|
1763
|
+
>
|
|
1764
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1765
|
+
</button>
|
|
1766
|
+
</span>
|
|
1767
|
+
</span>
|
|
1768
|
+
|
|
1769
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-blue">
|
|
1770
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
1771
|
+
<span class="pf-v5-c-label__icon">
|
|
1772
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1773
|
+
</span>
|
|
1774
|
+
<span class="pf-v5-c-label__text">Blue clickable removable (disabled)</span>
|
|
1775
|
+
</button>
|
|
1776
|
+
<span class="pf-v5-c-label__actions">
|
|
1777
|
+
<button
|
|
1778
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1779
|
+
type="button"
|
|
1780
|
+
disabled
|
|
1781
|
+
id="blue-outline-clickable-disabled-button"
|
|
1782
|
+
aria-label="Remove"
|
|
1783
|
+
aria-labelledby="blue-outline-clickable-disabled-button blue-outline-clickable-disabled-text"
|
|
1784
|
+
>
|
|
1785
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1786
|
+
</button>
|
|
1787
|
+
</span>
|
|
1788
|
+
</span>
|
|
1789
|
+
|
|
1140
1790
|
<br />
|
|
1141
1791
|
<br />
|
|
1142
1792
|
|
|
@@ -1215,6 +1865,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1215
1865
|
</span>
|
|
1216
1866
|
</span>
|
|
1217
1867
|
|
|
1868
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-green">
|
|
1869
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1870
|
+
<span class="pf-v5-c-label__text">Green clickable</span>
|
|
1871
|
+
</button>
|
|
1872
|
+
</span>
|
|
1873
|
+
|
|
1874
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-green">
|
|
1875
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
1876
|
+
<span class="pf-v5-c-label__text">Green clickable removable</span>
|
|
1877
|
+
</button>
|
|
1878
|
+
<span class="pf-v5-c-label__actions">
|
|
1879
|
+
<button
|
|
1880
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1881
|
+
type="button"
|
|
1882
|
+
id="green-outline-clickable-removable-button"
|
|
1883
|
+
aria-label="Remove"
|
|
1884
|
+
aria-labelledby="green-outline-clickable-removable-button green-outline-clickable-removable-text"
|
|
1885
|
+
>
|
|
1886
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1887
|
+
</button>
|
|
1888
|
+
</span>
|
|
1889
|
+
</span>
|
|
1890
|
+
|
|
1218
1891
|
<span class="pf-v5-c-label pf-m-outline pf-m-green">
|
|
1219
1892
|
<span class="pf-v5-c-label__content">
|
|
1220
1893
|
<span class="pf-v5-c-label__icon">
|
|
@@ -1250,6 +1923,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1250
1923
|
</span>
|
|
1251
1924
|
</span>
|
|
1252
1925
|
|
|
1926
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-green">
|
|
1927
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
1928
|
+
<span class="pf-v5-c-label__icon">
|
|
1929
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1930
|
+
</span>
|
|
1931
|
+
<span class="pf-v5-c-label__text">Green link removable (disabled)</span>
|
|
1932
|
+
</a>
|
|
1933
|
+
<span class="pf-v5-c-label__actions">
|
|
1934
|
+
<button
|
|
1935
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1936
|
+
type="button"
|
|
1937
|
+
disabled
|
|
1938
|
+
id="green-outline-link-disabled-button"
|
|
1939
|
+
aria-label="Remove"
|
|
1940
|
+
aria-labelledby="green-outline-link-disabled-button green-outline-link-disabled-text"
|
|
1941
|
+
>
|
|
1942
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1943
|
+
</button>
|
|
1944
|
+
</span>
|
|
1945
|
+
</span>
|
|
1946
|
+
|
|
1947
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-green">
|
|
1948
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
1949
|
+
<span class="pf-v5-c-label__icon">
|
|
1950
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1951
|
+
</span>
|
|
1952
|
+
<span class="pf-v5-c-label__text">Green clickable removable (disabled)</span>
|
|
1953
|
+
</button>
|
|
1954
|
+
<span class="pf-v5-c-label__actions">
|
|
1955
|
+
<button
|
|
1956
|
+
class="pf-v5-c-button pf-m-plain"
|
|
1957
|
+
type="button"
|
|
1958
|
+
disabled
|
|
1959
|
+
id="green-outline-clickable-disabled-button"
|
|
1960
|
+
aria-label="Remove"
|
|
1961
|
+
aria-labelledby="green-outline-clickable-disabled-button green-outline-clickable-disabled-text"
|
|
1962
|
+
>
|
|
1963
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1964
|
+
</button>
|
|
1965
|
+
</span>
|
|
1966
|
+
</span>
|
|
1967
|
+
|
|
1253
1968
|
<br />
|
|
1254
1969
|
<br />
|
|
1255
1970
|
|
|
@@ -1328,6 +2043,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1328
2043
|
</span>
|
|
1329
2044
|
</span>
|
|
1330
2045
|
|
|
2046
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-orange">
|
|
2047
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2048
|
+
<span class="pf-v5-c-label__text">Orange clickable</span>
|
|
2049
|
+
</button>
|
|
2050
|
+
</span>
|
|
2051
|
+
|
|
2052
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-orange">
|
|
2053
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2054
|
+
<span class="pf-v5-c-label__text">Orange clickable removable</span>
|
|
2055
|
+
</button>
|
|
2056
|
+
<span class="pf-v5-c-label__actions">
|
|
2057
|
+
<button
|
|
2058
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2059
|
+
type="button"
|
|
2060
|
+
id="orange-outline-clickable-removable-button"
|
|
2061
|
+
aria-label="Remove"
|
|
2062
|
+
aria-labelledby="orange-outline-clickable-removable-button orange-outline-clickable-removable-text"
|
|
2063
|
+
>
|
|
2064
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2065
|
+
</button>
|
|
2066
|
+
</span>
|
|
2067
|
+
</span>
|
|
2068
|
+
|
|
1331
2069
|
<span class="pf-v5-c-label pf-m-outline pf-m-orange">
|
|
1332
2070
|
<span class="pf-v5-c-label__content">
|
|
1333
2071
|
<span class="pf-v5-c-label__icon">
|
|
@@ -1340,23 +2078,65 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1340
2078
|
</span>
|
|
1341
2079
|
</span>
|
|
1342
2080
|
|
|
1343
|
-
<span class="pf-v5-c-label pf-m-outline pf-m-orange">
|
|
1344
|
-
<span class="pf-v5-c-label__content">
|
|
2081
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-orange">
|
|
2082
|
+
<span class="pf-v5-c-label__content">
|
|
2083
|
+
<span class="pf-v5-c-label__icon">
|
|
2084
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2085
|
+
</span>
|
|
2086
|
+
<span
|
|
2087
|
+
class="pf-v5-c-label__text"
|
|
2088
|
+
style="--pf-v5-c-label__text--MaxWidth: 38ch"
|
|
2089
|
+
>Orange label with icon and set max-width truncation customization</span>
|
|
2090
|
+
</span>
|
|
2091
|
+
<span class="pf-v5-c-label__actions">
|
|
2092
|
+
<button
|
|
2093
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2094
|
+
type="button"
|
|
2095
|
+
id="orange-outline-truncated-with-icon-button"
|
|
2096
|
+
aria-label="Remove"
|
|
2097
|
+
aria-labelledby="orange-outline-truncated-with-icon-button orange-outline-truncated-with-icon-text"
|
|
2098
|
+
>
|
|
2099
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2100
|
+
</button>
|
|
2101
|
+
</span>
|
|
2102
|
+
</span>
|
|
2103
|
+
|
|
2104
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-orange">
|
|
2105
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
2106
|
+
<span class="pf-v5-c-label__icon">
|
|
2107
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2108
|
+
</span>
|
|
2109
|
+
<span class="pf-v5-c-label__text">Orange link removable (disabled)</span>
|
|
2110
|
+
</a>
|
|
2111
|
+
<span class="pf-v5-c-label__actions">
|
|
2112
|
+
<button
|
|
2113
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2114
|
+
type="button"
|
|
2115
|
+
disabled
|
|
2116
|
+
id="orange-outline-link-disabled-button"
|
|
2117
|
+
aria-label="Remove"
|
|
2118
|
+
aria-labelledby="orange-outline-link-disabled-button orange-outline-link-disabled-text"
|
|
2119
|
+
>
|
|
2120
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2121
|
+
</button>
|
|
2122
|
+
</span>
|
|
2123
|
+
</span>
|
|
2124
|
+
|
|
2125
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-orange">
|
|
2126
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
1345
2127
|
<span class="pf-v5-c-label__icon">
|
|
1346
2128
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1347
2129
|
</span>
|
|
1348
|
-
<span
|
|
1349
|
-
|
|
1350
|
-
style="--pf-v5-c-label__text--MaxWidth: 38ch"
|
|
1351
|
-
>Orange label with icon and set max-width truncation customization</span>
|
|
1352
|
-
</span>
|
|
2130
|
+
<span class="pf-v5-c-label__text">Orange clickable removable (disabled)</span>
|
|
2131
|
+
</button>
|
|
1353
2132
|
<span class="pf-v5-c-label__actions">
|
|
1354
2133
|
<button
|
|
1355
2134
|
class="pf-v5-c-button pf-m-plain"
|
|
1356
2135
|
type="button"
|
|
1357
|
-
|
|
2136
|
+
disabled
|
|
2137
|
+
id="orange-outline-clickable-disabled-button"
|
|
1358
2138
|
aria-label="Remove"
|
|
1359
|
-
aria-labelledby="orange-outline-
|
|
2139
|
+
aria-labelledby="orange-outline-clickable-disabled-button orange-outline-clickable-disabled-text"
|
|
1360
2140
|
>
|
|
1361
2141
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1362
2142
|
</button>
|
|
@@ -1441,6 +2221,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1441
2221
|
</span>
|
|
1442
2222
|
</span>
|
|
1443
2223
|
|
|
2224
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-red">
|
|
2225
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2226
|
+
<span class="pf-v5-c-label__text">Red clickable</span>
|
|
2227
|
+
</button>
|
|
2228
|
+
</span>
|
|
2229
|
+
|
|
2230
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-red">
|
|
2231
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2232
|
+
<span class="pf-v5-c-label__text">Red clickable removable</span>
|
|
2233
|
+
</button>
|
|
2234
|
+
<span class="pf-v5-c-label__actions">
|
|
2235
|
+
<button
|
|
2236
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2237
|
+
type="button"
|
|
2238
|
+
id="red-outline-clickable-removable-button"
|
|
2239
|
+
aria-label="Remove"
|
|
2240
|
+
aria-labelledby="red-outline-clickable-removable-button red-outline-clickable-removable-text"
|
|
2241
|
+
>
|
|
2242
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2243
|
+
</button>
|
|
2244
|
+
</span>
|
|
2245
|
+
</span>
|
|
2246
|
+
|
|
1444
2247
|
<span class="pf-v5-c-label pf-m-outline pf-m-red">
|
|
1445
2248
|
<span class="pf-v5-c-label__content">
|
|
1446
2249
|
<span class="pf-v5-c-label__icon">
|
|
@@ -1476,6 +2279,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1476
2279
|
</span>
|
|
1477
2280
|
</span>
|
|
1478
2281
|
|
|
2282
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-red">
|
|
2283
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
2284
|
+
<span class="pf-v5-c-label__icon">
|
|
2285
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2286
|
+
</span>
|
|
2287
|
+
<span class="pf-v5-c-label__text">Red link removable (disabled)</span>
|
|
2288
|
+
</a>
|
|
2289
|
+
<span class="pf-v5-c-label__actions">
|
|
2290
|
+
<button
|
|
2291
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2292
|
+
type="button"
|
|
2293
|
+
disabled
|
|
2294
|
+
id="red-outline-link-disabled-button"
|
|
2295
|
+
aria-label="Remove"
|
|
2296
|
+
aria-labelledby="red-outline-link-disabled-button red-outline-link-disabled-text"
|
|
2297
|
+
>
|
|
2298
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2299
|
+
</button>
|
|
2300
|
+
</span>
|
|
2301
|
+
</span>
|
|
2302
|
+
|
|
2303
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-red">
|
|
2304
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
2305
|
+
<span class="pf-v5-c-label__icon">
|
|
2306
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2307
|
+
</span>
|
|
2308
|
+
<span class="pf-v5-c-label__text">Red clickable removable (disabled)</span>
|
|
2309
|
+
</button>
|
|
2310
|
+
<span class="pf-v5-c-label__actions">
|
|
2311
|
+
<button
|
|
2312
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2313
|
+
type="button"
|
|
2314
|
+
disabled
|
|
2315
|
+
id="red-outline-clickable-disabled-button"
|
|
2316
|
+
aria-label="Remove"
|
|
2317
|
+
aria-labelledby="red-outline-clickable-disabled-button red-outline-clickable-disabled-text"
|
|
2318
|
+
>
|
|
2319
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2320
|
+
</button>
|
|
2321
|
+
</span>
|
|
2322
|
+
</span>
|
|
2323
|
+
|
|
1479
2324
|
<br />
|
|
1480
2325
|
<br />
|
|
1481
2326
|
|
|
@@ -1554,6 +2399,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1554
2399
|
</span>
|
|
1555
2400
|
</span>
|
|
1556
2401
|
|
|
2402
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-purple">
|
|
2403
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2404
|
+
<span class="pf-v5-c-label__text">Purple clickable</span>
|
|
2405
|
+
</button>
|
|
2406
|
+
</span>
|
|
2407
|
+
|
|
2408
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-purple">
|
|
2409
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2410
|
+
<span class="pf-v5-c-label__text">Purple clickable removable</span>
|
|
2411
|
+
</button>
|
|
2412
|
+
<span class="pf-v5-c-label__actions">
|
|
2413
|
+
<button
|
|
2414
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2415
|
+
type="button"
|
|
2416
|
+
id="purple-outline-clickable-removable-button"
|
|
2417
|
+
aria-label="Remove"
|
|
2418
|
+
aria-labelledby="purple-outline-clickable-removable-button purple-outline-clickable-removable-text"
|
|
2419
|
+
>
|
|
2420
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2421
|
+
</button>
|
|
2422
|
+
</span>
|
|
2423
|
+
</span>
|
|
2424
|
+
|
|
1557
2425
|
<span class="pf-v5-c-label pf-m-outline pf-m-purple">
|
|
1558
2426
|
<span class="pf-v5-c-label__content">
|
|
1559
2427
|
<span class="pf-v5-c-label__icon">
|
|
@@ -1589,6 +2457,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1589
2457
|
</span>
|
|
1590
2458
|
</span>
|
|
1591
2459
|
|
|
2460
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-purple">
|
|
2461
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
2462
|
+
<span class="pf-v5-c-label__icon">
|
|
2463
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2464
|
+
</span>
|
|
2465
|
+
<span class="pf-v5-c-label__text">Purple link removable (disabled)</span>
|
|
2466
|
+
</a>
|
|
2467
|
+
<span class="pf-v5-c-label__actions">
|
|
2468
|
+
<button
|
|
2469
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2470
|
+
type="button"
|
|
2471
|
+
disabled
|
|
2472
|
+
id="purple-outline-link-disabled-button"
|
|
2473
|
+
aria-label="Remove"
|
|
2474
|
+
aria-labelledby="purple-outline-link-disabled-button purple-outline-link-disabled-text"
|
|
2475
|
+
>
|
|
2476
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2477
|
+
</button>
|
|
2478
|
+
</span>
|
|
2479
|
+
</span>
|
|
2480
|
+
|
|
2481
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-purple">
|
|
2482
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
2483
|
+
<span class="pf-v5-c-label__icon">
|
|
2484
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2485
|
+
</span>
|
|
2486
|
+
<span class="pf-v5-c-label__text">Purple clickable removable (disabled)</span>
|
|
2487
|
+
</button>
|
|
2488
|
+
<span class="pf-v5-c-label__actions">
|
|
2489
|
+
<button
|
|
2490
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2491
|
+
type="button"
|
|
2492
|
+
disabled
|
|
2493
|
+
id="purple-outline-clickable-disabled-button"
|
|
2494
|
+
aria-label="Remove"
|
|
2495
|
+
aria-labelledby="purple-outline-clickable-disabled-button purple-outline-clickable-disabled-text"
|
|
2496
|
+
>
|
|
2497
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2498
|
+
</button>
|
|
2499
|
+
</span>
|
|
2500
|
+
</span>
|
|
2501
|
+
|
|
1592
2502
|
<br />
|
|
1593
2503
|
<br />
|
|
1594
2504
|
|
|
@@ -1667,6 +2577,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1667
2577
|
</span>
|
|
1668
2578
|
</span>
|
|
1669
2579
|
|
|
2580
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-cyan">
|
|
2581
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2582
|
+
<span class="pf-v5-c-label__text">Cyan clickable</span>
|
|
2583
|
+
</button>
|
|
2584
|
+
</span>
|
|
2585
|
+
|
|
2586
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-cyan">
|
|
2587
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2588
|
+
<span class="pf-v5-c-label__text">Cyan clickable removable</span>
|
|
2589
|
+
</button>
|
|
2590
|
+
<span class="pf-v5-c-label__actions">
|
|
2591
|
+
<button
|
|
2592
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2593
|
+
type="button"
|
|
2594
|
+
id="cyan-outline-clickable-removable-button"
|
|
2595
|
+
aria-label="Remove"
|
|
2596
|
+
aria-labelledby="cyan-outline-clickable-removable-button cyan-outline-clickable-removable-text"
|
|
2597
|
+
>
|
|
2598
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2599
|
+
</button>
|
|
2600
|
+
</span>
|
|
2601
|
+
</span>
|
|
2602
|
+
|
|
1670
2603
|
<span class="pf-v5-c-label pf-m-outline pf-m-cyan">
|
|
1671
2604
|
<span class="pf-v5-c-label__content">
|
|
1672
2605
|
<span class="pf-v5-c-label__icon">
|
|
@@ -1702,6 +2635,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1702
2635
|
</span>
|
|
1703
2636
|
</span>
|
|
1704
2637
|
|
|
2638
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-cyan">
|
|
2639
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
2640
|
+
<span class="pf-v5-c-label__icon">
|
|
2641
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2642
|
+
</span>
|
|
2643
|
+
<span class="pf-v5-c-label__text">Cyan link removable (disabled)</span>
|
|
2644
|
+
</a>
|
|
2645
|
+
<span class="pf-v5-c-label__actions">
|
|
2646
|
+
<button
|
|
2647
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2648
|
+
type="button"
|
|
2649
|
+
disabled
|
|
2650
|
+
id="cyan-outline-link-disabled-button"
|
|
2651
|
+
aria-label="Remove"
|
|
2652
|
+
aria-labelledby="cyan-outline-link-disabled-button cyan-outline-link-disabled-text"
|
|
2653
|
+
>
|
|
2654
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2655
|
+
</button>
|
|
2656
|
+
</span>
|
|
2657
|
+
</span>
|
|
2658
|
+
|
|
2659
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-cyan">
|
|
2660
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
2661
|
+
<span class="pf-v5-c-label__icon">
|
|
2662
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2663
|
+
</span>
|
|
2664
|
+
<span class="pf-v5-c-label__text">Cyan clickable removable (disabled)</span>
|
|
2665
|
+
</button>
|
|
2666
|
+
<span class="pf-v5-c-label__actions">
|
|
2667
|
+
<button
|
|
2668
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2669
|
+
type="button"
|
|
2670
|
+
disabled
|
|
2671
|
+
id="cyan-outline-clickable-disabled-button"
|
|
2672
|
+
aria-label="Remove"
|
|
2673
|
+
aria-labelledby="cyan-outline-clickable-disabled-button cyan-outline-clickable-disabled-text"
|
|
2674
|
+
>
|
|
2675
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2676
|
+
</button>
|
|
2677
|
+
</span>
|
|
2678
|
+
</span>
|
|
2679
|
+
|
|
1705
2680
|
<br />
|
|
1706
2681
|
<br />
|
|
1707
2682
|
|
|
@@ -1780,6 +2755,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1780
2755
|
</span>
|
|
1781
2756
|
</span>
|
|
1782
2757
|
|
|
2758
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-gold">
|
|
2759
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2760
|
+
<span class="pf-v5-c-label__text">Gold clickable</span>
|
|
2761
|
+
</button>
|
|
2762
|
+
</span>
|
|
2763
|
+
|
|
2764
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-gold">
|
|
2765
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2766
|
+
<span class="pf-v5-c-label__text">Gold clickable removable</span>
|
|
2767
|
+
</button>
|
|
2768
|
+
<span class="pf-v5-c-label__actions">
|
|
2769
|
+
<button
|
|
2770
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2771
|
+
type="button"
|
|
2772
|
+
id="gold-outline-clickable-removable-button"
|
|
2773
|
+
aria-label="Remove"
|
|
2774
|
+
aria-labelledby="gold-outline-clickable-removable-button gold-outline-clickable-removable-text"
|
|
2775
|
+
>
|
|
2776
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2777
|
+
</button>
|
|
2778
|
+
</span>
|
|
2779
|
+
</span>
|
|
2780
|
+
|
|
1783
2781
|
<span class="pf-v5-c-label pf-m-outline pf-m-gold">
|
|
1784
2782
|
<span class="pf-v5-c-label__content">
|
|
1785
2783
|
<span class="pf-v5-c-label__icon">
|
|
@@ -1815,6 +2813,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1815
2813
|
</span>
|
|
1816
2814
|
</span>
|
|
1817
2815
|
|
|
2816
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-gold">
|
|
2817
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
2818
|
+
<span class="pf-v5-c-label__icon">
|
|
2819
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2820
|
+
</span>
|
|
2821
|
+
<span class="pf-v5-c-label__text">Gold link removable (disabled)</span>
|
|
2822
|
+
</a>
|
|
2823
|
+
<span class="pf-v5-c-label__actions">
|
|
2824
|
+
<button
|
|
2825
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2826
|
+
type="button"
|
|
2827
|
+
disabled
|
|
2828
|
+
id="gold-outline-link-disabled-button"
|
|
2829
|
+
aria-label="Remove"
|
|
2830
|
+
aria-labelledby="gold-outline-link-disabled-button gold-outline-link-disabled-text"
|
|
2831
|
+
>
|
|
2832
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2833
|
+
</button>
|
|
2834
|
+
</span>
|
|
2835
|
+
</span>
|
|
2836
|
+
|
|
2837
|
+
<span class="pf-v5-c-label pf-m-outline pf-m-disabled pf-m-gold">
|
|
2838
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
2839
|
+
<span class="pf-v5-c-label__icon">
|
|
2840
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2841
|
+
</span>
|
|
2842
|
+
<span class="pf-v5-c-label__text">Gold clickable removable (disabled)</span>
|
|
2843
|
+
</button>
|
|
2844
|
+
<span class="pf-v5-c-label__actions">
|
|
2845
|
+
<button
|
|
2846
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2847
|
+
type="button"
|
|
2848
|
+
disabled
|
|
2849
|
+
id="gold-outline-clickable-disabled-button"
|
|
2850
|
+
aria-label="Remove"
|
|
2851
|
+
aria-labelledby="gold-outline-clickable-disabled-button gold-outline-clickable-disabled-text"
|
|
2852
|
+
>
|
|
2853
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2854
|
+
</button>
|
|
2855
|
+
</span>
|
|
2856
|
+
</span>
|
|
2857
|
+
|
|
1818
2858
|
```
|
|
1819
2859
|
|
|
1820
2860
|
### Compact
|
|
@@ -1895,6 +2935,29 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1895
2935
|
</span>
|
|
1896
2936
|
</span>
|
|
1897
2937
|
|
|
2938
|
+
<span class="pf-v5-c-label pf-m-compact">
|
|
2939
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2940
|
+
<span class="pf-v5-c-label__text">Compact clickable</span>
|
|
2941
|
+
</button>
|
|
2942
|
+
</span>
|
|
2943
|
+
|
|
2944
|
+
<span class="pf-v5-c-label pf-m-compact">
|
|
2945
|
+
<button class="pf-v5-c-label__content" type="button">
|
|
2946
|
+
<span class="pf-v5-c-label__text">Compact clickable removable</span>
|
|
2947
|
+
</button>
|
|
2948
|
+
<span class="pf-v5-c-label__actions">
|
|
2949
|
+
<button
|
|
2950
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2951
|
+
type="button"
|
|
2952
|
+
id="compact-clickable-removable-button"
|
|
2953
|
+
aria-label="Remove"
|
|
2954
|
+
aria-labelledby="compact-clickable-removable-button compact-clickable-removable-text"
|
|
2955
|
+
>
|
|
2956
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2957
|
+
</button>
|
|
2958
|
+
</span>
|
|
2959
|
+
</span>
|
|
2960
|
+
|
|
1898
2961
|
<span class="pf-v5-c-label pf-m-compact">
|
|
1899
2962
|
<span class="pf-v5-c-label__content">
|
|
1900
2963
|
<span class="pf-v5-c-label__icon">
|
|
@@ -1930,6 +2993,48 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
|
|
|
1930
2993
|
</span>
|
|
1931
2994
|
</span>
|
|
1932
2995
|
|
|
2996
|
+
<span class="pf-v5-c-label pf-m-compact pf-m-disabled">
|
|
2997
|
+
<a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
|
|
2998
|
+
<span class="pf-v5-c-label__icon">
|
|
2999
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3000
|
+
</span>
|
|
3001
|
+
<span class="pf-v5-c-label__text">Compact link removable (disabled)</span>
|
|
3002
|
+
</a>
|
|
3003
|
+
<span class="pf-v5-c-label__actions">
|
|
3004
|
+
<button
|
|
3005
|
+
class="pf-v5-c-button pf-m-plain"
|
|
3006
|
+
type="button"
|
|
3007
|
+
disabled
|
|
3008
|
+
id="compact-link-disabled-button"
|
|
3009
|
+
aria-label="Remove"
|
|
3010
|
+
aria-labelledby="compact-link-disabled-button compact-link-disabled-text"
|
|
3011
|
+
>
|
|
3012
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
3013
|
+
</button>
|
|
3014
|
+
</span>
|
|
3015
|
+
</span>
|
|
3016
|
+
|
|
3017
|
+
<span class="pf-v5-c-label pf-m-compact pf-m-disabled">
|
|
3018
|
+
<button class="pf-v5-c-label__content" type="button" disabled>
|
|
3019
|
+
<span class="pf-v5-c-label__icon">
|
|
3020
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3021
|
+
</span>
|
|
3022
|
+
<span class="pf-v5-c-label__text">Compact clickable removable (disabled)</span>
|
|
3023
|
+
</button>
|
|
3024
|
+
<span class="pf-v5-c-label__actions">
|
|
3025
|
+
<button
|
|
3026
|
+
class="pf-v5-c-button pf-m-plain"
|
|
3027
|
+
type="button"
|
|
3028
|
+
disabled
|
|
3029
|
+
id="compact-clickable-disabled-button"
|
|
3030
|
+
aria-label="Remove"
|
|
3031
|
+
aria-labelledby="compact-clickable-disabled-button compact-clickable-disabled-text"
|
|
3032
|
+
>
|
|
3033
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
3034
|
+
</button>
|
|
3035
|
+
</span>
|
|
3036
|
+
</span>
|
|
3037
|
+
|
|
1933
3038
|
```
|
|
1934
3039
|
|
|
1935
3040
|
### Overflow
|
|
@@ -3259,6 +4364,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
3259
4364
|
| `.pf-m-gold` | `.pf-v5-c-label` | Modifies the label to have gold colored styling. |
|
|
3260
4365
|
| `.pf-m-editable` | `.pf-v5-c-label` | Modifies label for editable styles. |
|
|
3261
4366
|
| `.pf-m-editable-active` | `.pf-v5-c-label.pf-m-editable` | Modifies editable label for active styles. |
|
|
4367
|
+
| `.pf-m-disabled` | `.pf-v5-c-label` | Modifies label for disabled styles. |
|
|
3262
4368
|
| `--pf-v5-c-label__text--MaxWidth` | `.pf-v5-c-label` | Modifiex the max width of the text before text will truncate. |
|
|
3263
4369
|
|
|
3264
4370
|
### Label group accessibility
|