@patternfly/patternfly 6.0.0-alpha.105 → 6.0.0-alpha.107

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.
Files changed (43) hide show
  1. package/components/Divider/divider.css +42 -42
  2. package/components/Label/label.css +14 -0
  3. package/components/Label/label.scss +19 -0
  4. package/components/Masthead/masthead.css +70 -70
  5. package/components/Pagination/pagination.css +30 -30
  6. package/components/Tabs/tabs.css +90 -90
  7. package/components/Toolbar/toolbar.css +288 -288
  8. package/docs/components/Label/examples/Label.md +1781 -56
  9. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  10. package/docs/layouts/Flex/examples/Flex.css +4 -4
  11. package/docs/layouts/Flex/examples/Flex.md +50 -50
  12. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  13. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  14. package/docs/layouts/Grid/examples/Grid.css +3 -3
  15. package/docs/layouts/Grid/examples/Grid.md +33 -33
  16. package/docs/layouts/Level/examples/Level.css +5 -5
  17. package/docs/layouts/Split/examples/Split.css +4 -4
  18. package/docs/layouts/Stack/examples/Stack.css +5 -5
  19. package/layouts/Bullseye/bullseye.css +5 -1
  20. package/layouts/Bullseye/bullseye.scss +4 -1
  21. package/layouts/Flex/flex.css +207 -203
  22. package/layouts/Flex/flex.scss +34 -31
  23. package/layouts/Gallery/gallery.css +6 -2
  24. package/layouts/Gallery/gallery.scss +8 -5
  25. package/layouts/Grid/grid.css +6 -2
  26. package/layouts/Grid/grid.scss +7 -4
  27. package/layouts/Level/level.css +5 -1
  28. package/layouts/Level/level.scss +5 -2
  29. package/layouts/Split/split.css +5 -1
  30. package/layouts/Split/split.scss +5 -2
  31. package/layouts/Stack/stack.css +5 -1
  32. package/layouts/Stack/stack.scss +5 -2
  33. package/package.json +1 -1
  34. package/patternfly-addons.css +672 -672
  35. package/patternfly-no-globals.css +773 -731
  36. package/patternfly-theme-dark-unversioned.css +773 -731
  37. package/patternfly.css +773 -731
  38. package/patternfly.min.css +1 -1
  39. package/patternfly.min.css.map +1 -1
  40. package/sass-utilities/functions.scss +3 -3
  41. package/sass-utilities/scss-variables.scss +9 -9
  42. package/utilities/Spacing/spacing.css +672 -672
  43. package/utilities/Spacing/spacing.scss +1 -1
@@ -160,6 +160,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
160
160
  </span>
161
161
  </span>
162
162
 
163
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-clickable">
164
+ <a
165
+ class="pf-v6-c-label__content pf-m-clickable"
166
+ href="#"
167
+ tabindex="-1"
168
+ aria-disabled="true"
169
+ >
170
+ <span class="pf-v6-c-label__icon">
171
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
172
+ </span>
173
+ <span
174
+ class="pf-v6-c-label__text"
175
+ id="grey-filled-link-removable-disabled-text"
176
+ >Grey link removable (disabled)</span>
177
+ </a>
178
+ <span class="pf-v6-c-label__actions">
179
+ <button
180
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
181
+ type="button"
182
+ disabled
183
+ id="grey-filled-link-removable-disabled-button"
184
+ aria-label="Remove"
185
+ aria-labelledby="grey-filled-link-removable-disabled-button grey-filled-link-removable-disabled-text"
186
+ >
187
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
188
+ </button>
189
+ </span>
190
+ </span>
191
+
192
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-clickable">
193
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
194
+ <span class="pf-v6-c-label__icon">
195
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
196
+ </span>
197
+ <span
198
+ class="pf-v6-c-label__text"
199
+ id="grey-filled-button-removable-disabled-text"
200
+ >Grey button removable (disabled)</span>
201
+ </button>
202
+ <span class="pf-v6-c-label__actions">
203
+ <button
204
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
205
+ type="button"
206
+ disabled
207
+ id="grey-filled-button-removable-disabled-button"
208
+ aria-label="Remove"
209
+ aria-labelledby="grey-filled-button-removable-disabled-button grey-filled-button-removable-disabled-text"
210
+ >
211
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
212
+ </button>
213
+ </span>
214
+ </span>
215
+
163
216
  <br />
164
217
  <br />
165
218
 
@@ -309,6 +362,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
309
362
  </span>
310
363
  </span>
311
364
 
365
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-blue pf-m-clickable">
366
+ <a
367
+ class="pf-v6-c-label__content pf-m-clickable"
368
+ href="#"
369
+ tabindex="-1"
370
+ aria-disabled="true"
371
+ >
372
+ <span class="pf-v6-c-label__icon">
373
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
374
+ </span>
375
+ <span
376
+ class="pf-v6-c-label__text"
377
+ id="blue-filled-link-removable-disabled-text"
378
+ >Blue link removable (disabled)</span>
379
+ </a>
380
+ <span class="pf-v6-c-label__actions">
381
+ <button
382
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
383
+ type="button"
384
+ disabled
385
+ id="blue-filled-link-removable-disabled-button"
386
+ aria-label="Remove"
387
+ aria-labelledby="blue-filled-link-removable-disabled-button blue-filled-link-removable-disabled-text"
388
+ >
389
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
390
+ </button>
391
+ </span>
392
+ </span>
393
+
394
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-blue pf-m-clickable">
395
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
396
+ <span class="pf-v6-c-label__icon">
397
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
398
+ </span>
399
+ <span
400
+ class="pf-v6-c-label__text"
401
+ id="blue-filled-button-removable-disabled-text"
402
+ >Blue button removable (disabled)</span>
403
+ </button>
404
+ <span class="pf-v6-c-label__actions">
405
+ <button
406
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
407
+ type="button"
408
+ disabled
409
+ id="blue-filled-button-removable-disabled-button"
410
+ aria-label="Remove"
411
+ aria-labelledby="blue-filled-button-removable-disabled-button blue-filled-button-removable-disabled-text"
412
+ >
413
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
414
+ </button>
415
+ </span>
416
+ </span>
417
+
312
418
  <br />
313
419
  <br />
314
420
 
@@ -458,6 +564,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
458
564
  </span>
459
565
  </span>
460
566
 
567
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-green pf-m-clickable">
568
+ <a
569
+ class="pf-v6-c-label__content pf-m-clickable"
570
+ href="#"
571
+ tabindex="-1"
572
+ aria-disabled="true"
573
+ >
574
+ <span class="pf-v6-c-label__icon">
575
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
576
+ </span>
577
+ <span
578
+ class="pf-v6-c-label__text"
579
+ id="green-filled-link-removable-disabled-text"
580
+ >Green link removable (disabled)</span>
581
+ </a>
582
+ <span class="pf-v6-c-label__actions">
583
+ <button
584
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
585
+ type="button"
586
+ disabled
587
+ id="green-filled-link-removable-disabled-button"
588
+ aria-label="Remove"
589
+ aria-labelledby="green-filled-link-removable-disabled-button green-filled-link-removable-disabled-text"
590
+ >
591
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
592
+ </button>
593
+ </span>
594
+ </span>
595
+
596
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-green pf-m-clickable">
597
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
598
+ <span class="pf-v6-c-label__icon">
599
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
600
+ </span>
601
+ <span
602
+ class="pf-v6-c-label__text"
603
+ id="green-filled-button-removable-disabled-text"
604
+ >Green button removable (disabled)</span>
605
+ </button>
606
+ <span class="pf-v6-c-label__actions">
607
+ <button
608
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
609
+ type="button"
610
+ disabled
611
+ id="green-filled-button-removable-disabled-button"
612
+ aria-label="Remove"
613
+ aria-labelledby="green-filled-button-removable-disabled-button green-filled-button-removable-disabled-text"
614
+ >
615
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
616
+ </button>
617
+ </span>
618
+ </span>
619
+
461
620
  <br />
462
621
  <br />
463
622
 
@@ -607,6 +766,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
607
766
  </span>
608
767
  </span>
609
768
 
769
+ <span
770
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orange pf-m-clickable"
771
+ >
772
+ <a
773
+ class="pf-v6-c-label__content pf-m-clickable"
774
+ href="#"
775
+ tabindex="-1"
776
+ aria-disabled="true"
777
+ >
778
+ <span class="pf-v6-c-label__icon">
779
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
780
+ </span>
781
+ <span
782
+ class="pf-v6-c-label__text"
783
+ id="orange-filled-link-removable-disabled-text"
784
+ >Orange link removable (disabled)</span>
785
+ </a>
786
+ <span class="pf-v6-c-label__actions">
787
+ <button
788
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
789
+ type="button"
790
+ disabled
791
+ id="orange-filled-link-removable-disabled-button"
792
+ aria-label="Remove"
793
+ aria-labelledby="orange-filled-link-removable-disabled-button orange-filled-link-removable-disabled-text"
794
+ >
795
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
796
+ </button>
797
+ </span>
798
+ </span>
799
+
800
+ <span
801
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orange pf-m-clickable"
802
+ >
803
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
804
+ <span class="pf-v6-c-label__icon">
805
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
806
+ </span>
807
+ <span
808
+ class="pf-v6-c-label__text"
809
+ id="orange-filled-button-removable-disabled-text"
810
+ >Orange button removable (disabled)</span>
811
+ </button>
812
+ <span class="pf-v6-c-label__actions">
813
+ <button
814
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
815
+ type="button"
816
+ disabled
817
+ id="orange-filled-button-removable-disabled-button"
818
+ aria-label="Remove"
819
+ aria-labelledby="orange-filled-button-removable-disabled-button orange-filled-button-removable-disabled-text"
820
+ >
821
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
822
+ </button>
823
+ </span>
824
+ </span>
825
+
610
826
  <br />
611
827
  <br />
612
828
 
@@ -756,6 +972,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
756
972
  </span>
757
973
  </span>
758
974
 
975
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-red pf-m-clickable">
976
+ <a
977
+ class="pf-v6-c-label__content pf-m-clickable"
978
+ href="#"
979
+ tabindex="-1"
980
+ aria-disabled="true"
981
+ >
982
+ <span class="pf-v6-c-label__icon">
983
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
984
+ </span>
985
+ <span
986
+ class="pf-v6-c-label__text"
987
+ id="red-filled-link-removable-disabled-text"
988
+ >Red link removable (disabled)</span>
989
+ </a>
990
+ <span class="pf-v6-c-label__actions">
991
+ <button
992
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
993
+ type="button"
994
+ disabled
995
+ id="red-filled-link-removable-disabled-button"
996
+ aria-label="Remove"
997
+ aria-labelledby="red-filled-link-removable-disabled-button red-filled-link-removable-disabled-text"
998
+ >
999
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1000
+ </button>
1001
+ </span>
1002
+ </span>
1003
+
1004
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-red pf-m-clickable">
1005
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
1006
+ <span class="pf-v6-c-label__icon">
1007
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1008
+ </span>
1009
+ <span
1010
+ class="pf-v6-c-label__text"
1011
+ id="red-filled-button-removable-disabled-text"
1012
+ >Red button removable (disabled)</span>
1013
+ </button>
1014
+ <span class="pf-v6-c-label__actions">
1015
+ <button
1016
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1017
+ type="button"
1018
+ disabled
1019
+ id="red-filled-button-removable-disabled-button"
1020
+ aria-label="Remove"
1021
+ aria-labelledby="red-filled-button-removable-disabled-button red-filled-button-removable-disabled-text"
1022
+ >
1023
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1024
+ </button>
1025
+ </span>
1026
+ </span>
1027
+
759
1028
  <br />
760
1029
  <br />
761
1030
 
@@ -905,6 +1174,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
905
1174
  </span>
906
1175
  </span>
907
1176
 
1177
+ <span
1178
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orangered pf-m-clickable"
1179
+ >
1180
+ <a
1181
+ class="pf-v6-c-label__content pf-m-clickable"
1182
+ href="#"
1183
+ tabindex="-1"
1184
+ aria-disabled="true"
1185
+ >
1186
+ <span class="pf-v6-c-label__icon">
1187
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1188
+ </span>
1189
+ <span
1190
+ class="pf-v6-c-label__text"
1191
+ id="orangered-filled-link-removable-disabled-text"
1192
+ >Orange red link removable (disabled)</span>
1193
+ </a>
1194
+ <span class="pf-v6-c-label__actions">
1195
+ <button
1196
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1197
+ type="button"
1198
+ disabled
1199
+ id="orangered-filled-link-removable-disabled-button"
1200
+ aria-label="Remove"
1201
+ aria-labelledby="orangered-filled-link-removable-disabled-button orangered-filled-link-removable-disabled-text"
1202
+ >
1203
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1204
+ </button>
1205
+ </span>
1206
+ </span>
1207
+
1208
+ <span
1209
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orangered pf-m-clickable"
1210
+ >
1211
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
1212
+ <span class="pf-v6-c-label__icon">
1213
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1214
+ </span>
1215
+ <span
1216
+ class="pf-v6-c-label__text"
1217
+ id="orangered-filled-button-removable-disabled-text"
1218
+ >Orange red button removable (disabled)</span>
1219
+ </button>
1220
+ <span class="pf-v6-c-label__actions">
1221
+ <button
1222
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1223
+ type="button"
1224
+ disabled
1225
+ id="orangered-filled-button-removable-disabled-button"
1226
+ aria-label="Remove"
1227
+ aria-labelledby="orangered-filled-button-removable-disabled-button orangered-filled-button-removable-disabled-text"
1228
+ >
1229
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1230
+ </button>
1231
+ </span>
1232
+ </span>
1233
+
908
1234
  <br />
909
1235
  <br />
910
1236
 
@@ -1054,69 +1380,126 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1054
1380
  </span>
1055
1381
  </span>
1056
1382
 
1057
- <br />
1058
- <br />
1059
-
1060
- <span class="pf-v6-c-label pf-m-filled pf-m-cyan">
1061
- <span class="pf-v6-c-label__content">
1062
- <span class="pf-v6-c-label__text">Cyan</span>
1063
- </span>
1064
- </span>
1065
-
1066
- <span class="pf-v6-c-label pf-m-filled pf-m-cyan">
1067
- <span class="pf-v6-c-label__content">
1383
+ <span
1384
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-purple pf-m-clickable"
1385
+ >
1386
+ <a
1387
+ class="pf-v6-c-label__content pf-m-clickable"
1388
+ href="#"
1389
+ tabindex="-1"
1390
+ aria-disabled="true"
1391
+ >
1068
1392
  <span class="pf-v6-c-label__icon">
1069
1393
  <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1070
1394
  </span>
1071
- <span class="pf-v6-c-label__text">Cyan icon</span>
1072
- </span>
1073
- </span>
1074
-
1075
- <span class="pf-v6-c-label pf-m-filled pf-m-cyan">
1076
- <span class="pf-v6-c-label__content">
1077
1395
  <span
1078
1396
  class="pf-v6-c-label__text"
1079
- id="cyan-filled-removable-text"
1080
- >Cyan removable</span>
1081
- </span>
1397
+ id="purple-filled-link-removable-disabled-text"
1398
+ >Purple link removable (disabled)</span>
1399
+ </a>
1082
1400
  <span class="pf-v6-c-label__actions">
1083
1401
  <button
1084
1402
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1085
1403
  type="button"
1086
- id="cyan-filled-removable-button"
1404
+ disabled
1405
+ id="purple-filled-link-removable-disabled-button"
1087
1406
  aria-label="Remove"
1088
- aria-labelledby="cyan-filled-removable-button cyan-filled-removable-text"
1407
+ aria-labelledby="purple-filled-link-removable-disabled-button purple-filled-link-removable-disabled-text"
1089
1408
  >
1090
1409
  <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1091
1410
  </button>
1092
1411
  </span>
1093
1412
  </span>
1094
1413
 
1095
- <span class="pf-v6-c-label pf-m-filled pf-m-cyan">
1096
- <span class="pf-v6-c-label__content">
1414
+ <span
1415
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-purple pf-m-clickable"
1416
+ >
1417
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
1097
1418
  <span class="pf-v6-c-label__icon">
1098
1419
  <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1099
1420
  </span>
1100
1421
  <span
1101
1422
  class="pf-v6-c-label__text"
1102
- id="cyan-filled-icon-removable-text"
1103
- >Cyan icon removable</span>
1104
- </span>
1423
+ id="purple-filled-button-removable-disabled-text"
1424
+ >Purple button removable (disabled)</span>
1425
+ </button>
1105
1426
  <span class="pf-v6-c-label__actions">
1106
1427
  <button
1107
1428
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1108
1429
  type="button"
1109
- id="cyan-filled-icon-removable-button"
1430
+ disabled
1431
+ id="purple-filled-button-removable-disabled-button"
1110
1432
  aria-label="Remove"
1111
- aria-labelledby="cyan-filled-icon-removable-button cyan-filled-icon-removable-text"
1433
+ aria-labelledby="purple-filled-button-removable-disabled-button purple-filled-button-removable-disabled-text"
1112
1434
  >
1113
1435
  <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1114
1436
  </button>
1115
1437
  </span>
1116
1438
  </span>
1117
1439
 
1118
- <span class="pf-v6-c-label pf-m-filled pf-m-cyan pf-m-clickable">
1119
- <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1440
+ <br />
1441
+ <br />
1442
+
1443
+ <span class="pf-v6-c-label pf-m-filled pf-m-cyan">
1444
+ <span class="pf-v6-c-label__content">
1445
+ <span class="pf-v6-c-label__text">Cyan</span>
1446
+ </span>
1447
+ </span>
1448
+
1449
+ <span class="pf-v6-c-label pf-m-filled pf-m-cyan">
1450
+ <span class="pf-v6-c-label__content">
1451
+ <span class="pf-v6-c-label__icon">
1452
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1453
+ </span>
1454
+ <span class="pf-v6-c-label__text">Cyan icon</span>
1455
+ </span>
1456
+ </span>
1457
+
1458
+ <span class="pf-v6-c-label pf-m-filled pf-m-cyan">
1459
+ <span class="pf-v6-c-label__content">
1460
+ <span
1461
+ class="pf-v6-c-label__text"
1462
+ id="cyan-filled-removable-text"
1463
+ >Cyan removable</span>
1464
+ </span>
1465
+ <span class="pf-v6-c-label__actions">
1466
+ <button
1467
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1468
+ type="button"
1469
+ id="cyan-filled-removable-button"
1470
+ aria-label="Remove"
1471
+ aria-labelledby="cyan-filled-removable-button cyan-filled-removable-text"
1472
+ >
1473
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1474
+ </button>
1475
+ </span>
1476
+ </span>
1477
+
1478
+ <span class="pf-v6-c-label pf-m-filled pf-m-cyan">
1479
+ <span class="pf-v6-c-label__content">
1480
+ <span class="pf-v6-c-label__icon">
1481
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1482
+ </span>
1483
+ <span
1484
+ class="pf-v6-c-label__text"
1485
+ id="cyan-filled-icon-removable-text"
1486
+ >Cyan icon removable</span>
1487
+ </span>
1488
+ <span class="pf-v6-c-label__actions">
1489
+ <button
1490
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1491
+ type="button"
1492
+ id="cyan-filled-icon-removable-button"
1493
+ aria-label="Remove"
1494
+ aria-labelledby="cyan-filled-icon-removable-button cyan-filled-icon-removable-text"
1495
+ >
1496
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1497
+ </button>
1498
+ </span>
1499
+ </span>
1500
+
1501
+ <span class="pf-v6-c-label pf-m-filled pf-m-cyan pf-m-clickable">
1502
+ <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1120
1503
  <span class="pf-v6-c-label__text">Cyan link</span>
1121
1504
  </a>
1122
1505
  </span>
@@ -1203,6 +1586,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1203
1586
  </span>
1204
1587
  </span>
1205
1588
 
1589
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-cyan pf-m-clickable">
1590
+ <a
1591
+ class="pf-v6-c-label__content pf-m-clickable"
1592
+ href="#"
1593
+ tabindex="-1"
1594
+ aria-disabled="true"
1595
+ >
1596
+ <span class="pf-v6-c-label__icon">
1597
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1598
+ </span>
1599
+ <span
1600
+ class="pf-v6-c-label__text"
1601
+ id="cyan-filled-link-removable-disabled-text"
1602
+ >Cyan link removable (disabled)</span>
1603
+ </a>
1604
+ <span class="pf-v6-c-label__actions">
1605
+ <button
1606
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1607
+ type="button"
1608
+ disabled
1609
+ id="cyan-filled-link-removable-disabled-button"
1610
+ aria-label="Remove"
1611
+ aria-labelledby="cyan-filled-link-removable-disabled-button cyan-filled-link-removable-disabled-text"
1612
+ >
1613
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1614
+ </button>
1615
+ </span>
1616
+ </span>
1617
+
1618
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-cyan pf-m-clickable">
1619
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
1620
+ <span class="pf-v6-c-label__icon">
1621
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1622
+ </span>
1623
+ <span
1624
+ class="pf-v6-c-label__text"
1625
+ id="cyan-filled-button-removable-disabled-text"
1626
+ >Cyan button removable (disabled)</span>
1627
+ </button>
1628
+ <span class="pf-v6-c-label__actions">
1629
+ <button
1630
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1631
+ type="button"
1632
+ disabled
1633
+ id="cyan-filled-button-removable-disabled-button"
1634
+ aria-label="Remove"
1635
+ aria-labelledby="cyan-filled-button-removable-disabled-button cyan-filled-button-removable-disabled-text"
1636
+ >
1637
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1638
+ </button>
1639
+ </span>
1640
+ </span>
1641
+
1206
1642
  <br />
1207
1643
  <br />
1208
1644
 
@@ -1352,6 +1788,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1352
1788
  </span>
1353
1789
  </span>
1354
1790
 
1791
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-gold pf-m-clickable">
1792
+ <a
1793
+ class="pf-v6-c-label__content pf-m-clickable"
1794
+ href="#"
1795
+ tabindex="-1"
1796
+ aria-disabled="true"
1797
+ >
1798
+ <span class="pf-v6-c-label__icon">
1799
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1800
+ </span>
1801
+ <span
1802
+ class="pf-v6-c-label__text"
1803
+ id="gold-filled-link-removable-disabled-text"
1804
+ >Gold link removable (disabled)</span>
1805
+ </a>
1806
+ <span class="pf-v6-c-label__actions">
1807
+ <button
1808
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1809
+ type="button"
1810
+ disabled
1811
+ id="gold-filled-link-removable-disabled-button"
1812
+ aria-label="Remove"
1813
+ aria-labelledby="gold-filled-link-removable-disabled-button gold-filled-link-removable-disabled-text"
1814
+ >
1815
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1816
+ </button>
1817
+ </span>
1818
+ </span>
1819
+
1820
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-gold pf-m-clickable">
1821
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
1822
+ <span class="pf-v6-c-label__icon">
1823
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
1824
+ </span>
1825
+ <span
1826
+ class="pf-v6-c-label__text"
1827
+ id="gold-filled-button-removable-disabled-text"
1828
+ >Gold button removable (disabled)</span>
1829
+ </button>
1830
+ <span class="pf-v6-c-label__actions">
1831
+ <button
1832
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1833
+ type="button"
1834
+ disabled
1835
+ id="gold-filled-button-removable-disabled-button"
1836
+ aria-label="Remove"
1837
+ aria-labelledby="gold-filled-button-removable-disabled-button gold-filled-button-removable-disabled-text"
1838
+ >
1839
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1840
+ </button>
1841
+ </span>
1842
+ </span>
1843
+
1355
1844
  <br />
1356
1845
  <br />
1357
1846
 
@@ -1368,6 +1857,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1368
1857
  <span class="pf-v6-c-label__text">Success</span>
1369
1858
  </span>
1370
1859
  </span>
1860
+
1371
1861
  <span class="pf-v6-c-label pf-m-filled pf-m-success">
1372
1862
  <span class="pf-v6-c-label__content">
1373
1863
  <span class="pf-v6-c-label__icon">
@@ -1390,6 +1880,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1390
1880
  </button>
1391
1881
  </span>
1392
1882
  </span>
1883
+
1393
1884
  <span class="pf-v6-c-label pf-m-filled pf-m-success pf-m-clickable">
1394
1885
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1395
1886
  <span class="pf-v6-c-label__icon">
@@ -1398,6 +1889,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1398
1889
  <span class="pf-v6-c-label__text">Success link</span>
1399
1890
  </a>
1400
1891
  </span>
1892
+
1401
1893
  <span class="pf-v6-c-label pf-m-filled pf-m-success pf-m-clickable">
1402
1894
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1403
1895
  <span class="pf-v6-c-label__icon">
@@ -1406,6 +1898,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1406
1898
  <span class="pf-v6-c-label__text">Success button</span>
1407
1899
  </button>
1408
1900
  </span>
1901
+
1409
1902
  <span class="pf-v6-c-label pf-m-filled pf-m-success pf-m-clickable">
1410
1903
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1411
1904
  <span class="pf-v6-c-label__icon">
@@ -1428,6 +1921,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1428
1921
  </button>
1429
1922
  </span>
1430
1923
  </span>
1924
+
1431
1925
  <span class="pf-v6-c-label pf-m-filled pf-m-success pf-m-clickable">
1432
1926
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1433
1927
  <span class="pf-v6-c-label__icon">
@@ -1450,6 +1944,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1450
1944
  </button>
1451
1945
  </span>
1452
1946
  </span>
1947
+
1453
1948
  <span class="pf-v6-c-label pf-m-filled pf-m-success">
1454
1949
  <span class="pf-v6-c-label__content">
1455
1950
  <span class="pf-v6-c-label__icon">
@@ -1461,6 +1956,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1461
1956
  >Success, max-width truncation customization</span>
1462
1957
  </span>
1463
1958
  </span>
1959
+
1464
1960
  <span class="pf-v6-c-label pf-m-filled pf-m-success">
1465
1961
  <span class="pf-v6-c-label__content">
1466
1962
  <span class="pf-v6-c-label__icon">
@@ -1485,6 +1981,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1485
1981
  </span>
1486
1982
  </span>
1487
1983
 
1984
+ <span
1985
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-success pf-m-clickable"
1986
+ >
1987
+ <a
1988
+ class="pf-v6-c-label__content pf-m-clickable"
1989
+ href="#"
1990
+ tabindex="-1"
1991
+ aria-disabled="true"
1992
+ >
1993
+ <span class="pf-v6-c-label__icon">
1994
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1995
+ </span>
1996
+ <span
1997
+ class="pf-v6-c-label__text"
1998
+ id="success-filled-status-link-removable-disabled-text"
1999
+ >Success link removable (disabled)</span>
2000
+ </a>
2001
+ <span class="pf-v6-c-label__actions">
2002
+ <button
2003
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2004
+ type="button"
2005
+ disabled
2006
+ id="success-filled-status-link-removable-disabled-button"
2007
+ aria-label="Remove"
2008
+ aria-labelledby="success-filled-status-link-removable-disabled-button success-filled-status-link-removable-disabled-text"
2009
+ >
2010
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2011
+ </button>
2012
+ </span>
2013
+ </span>
2014
+
2015
+ <span
2016
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-success pf-m-clickable"
2017
+ >
2018
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
2019
+ <span class="pf-v6-c-label__icon">
2020
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
2021
+ </span>
2022
+ <span
2023
+ class="pf-v6-c-label__text"
2024
+ id="success-filled-status-button-removable-disabled-text"
2025
+ >Success button removable (disabled)</span>
2026
+ </button>
2027
+ <span class="pf-v6-c-label__actions">
2028
+ <button
2029
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2030
+ type="button"
2031
+ disabled
2032
+ id="success-filled-status-button-removable-disabled-button"
2033
+ aria-label="Remove"
2034
+ aria-labelledby="success-filled-status-button-removable-disabled-button success-filled-status-button-removable-disabled-text"
2035
+ >
2036
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2037
+ </button>
2038
+ </span>
2039
+ </span>
2040
+
1488
2041
  <br />
1489
2042
  <br />
1490
2043
 
@@ -1496,6 +2049,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1496
2049
  <span class="pf-v6-c-label__text">Warning</span>
1497
2050
  </span>
1498
2051
  </span>
2052
+
1499
2053
  <span class="pf-v6-c-label pf-m-filled pf-m-warning">
1500
2054
  <span class="pf-v6-c-label__content">
1501
2055
  <span class="pf-v6-c-label__icon">
@@ -1518,6 +2072,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1518
2072
  </button>
1519
2073
  </span>
1520
2074
  </span>
2075
+
1521
2076
  <span class="pf-v6-c-label pf-m-filled pf-m-warning pf-m-clickable">
1522
2077
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1523
2078
  <span class="pf-v6-c-label__icon">
@@ -1526,6 +2081,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1526
2081
  <span class="pf-v6-c-label__text">Warning link</span>
1527
2082
  </a>
1528
2083
  </span>
2084
+
1529
2085
  <span class="pf-v6-c-label pf-m-filled pf-m-warning pf-m-clickable">
1530
2086
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1531
2087
  <span class="pf-v6-c-label__icon">
@@ -1534,6 +2090,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1534
2090
  <span class="pf-v6-c-label__text">Warning button</span>
1535
2091
  </button>
1536
2092
  </span>
2093
+
1537
2094
  <span class="pf-v6-c-label pf-m-filled pf-m-warning pf-m-clickable">
1538
2095
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1539
2096
  <span class="pf-v6-c-label__icon">
@@ -1556,6 +2113,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1556
2113
  </button>
1557
2114
  </span>
1558
2115
  </span>
2116
+
1559
2117
  <span class="pf-v6-c-label pf-m-filled pf-m-warning pf-m-clickable">
1560
2118
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1561
2119
  <span class="pf-v6-c-label__icon">
@@ -1578,6 +2136,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1578
2136
  </button>
1579
2137
  </span>
1580
2138
  </span>
2139
+
1581
2140
  <span class="pf-v6-c-label pf-m-filled pf-m-warning">
1582
2141
  <span class="pf-v6-c-label__content">
1583
2142
  <span class="pf-v6-c-label__icon">
@@ -1589,6 +2148,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1589
2148
  >Warning, max-width truncation customization</span>
1590
2149
  </span>
1591
2150
  </span>
2151
+
1592
2152
  <span class="pf-v6-c-label pf-m-filled pf-m-warning">
1593
2153
  <span class="pf-v6-c-label__content">
1594
2154
  <span class="pf-v6-c-label__icon">
@@ -1613,6 +2173,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1613
2173
  </span>
1614
2174
  </span>
1615
2175
 
2176
+ <span
2177
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-warning pf-m-clickable"
2178
+ >
2179
+ <a
2180
+ class="pf-v6-c-label__content pf-m-clickable"
2181
+ href="#"
2182
+ tabindex="-1"
2183
+ aria-disabled="true"
2184
+ >
2185
+ <span class="pf-v6-c-label__icon">
2186
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
2187
+ </span>
2188
+ <span
2189
+ class="pf-v6-c-label__text"
2190
+ id="warning-filled-status-link-removable-disabled-text"
2191
+ >Warning link removable (disabled)</span>
2192
+ </a>
2193
+ <span class="pf-v6-c-label__actions">
2194
+ <button
2195
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2196
+ type="button"
2197
+ disabled
2198
+ id="warning-filled-status-link-removable-disabled-button"
2199
+ aria-label="Remove"
2200
+ aria-labelledby="warning-filled-status-link-removable-disabled-button warning-filled-status-link-removable-disabled-text"
2201
+ >
2202
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2203
+ </button>
2204
+ </span>
2205
+ </span>
2206
+
2207
+ <span
2208
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-warning pf-m-clickable"
2209
+ >
2210
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
2211
+ <span class="pf-v6-c-label__icon">
2212
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
2213
+ </span>
2214
+ <span
2215
+ class="pf-v6-c-label__text"
2216
+ id="warning-filled-status-button-removable-disabled-text"
2217
+ >Warning button removable (disabled)</span>
2218
+ </button>
2219
+ <span class="pf-v6-c-label__actions">
2220
+ <button
2221
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2222
+ type="button"
2223
+ disabled
2224
+ id="warning-filled-status-button-removable-disabled-button"
2225
+ aria-label="Remove"
2226
+ aria-labelledby="warning-filled-status-button-removable-disabled-button warning-filled-status-button-removable-disabled-text"
2227
+ >
2228
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2229
+ </button>
2230
+ </span>
2231
+ </span>
2232
+
1616
2233
  <br />
1617
2234
  <br />
1618
2235
 
@@ -1624,6 +2241,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1624
2241
  <span class="pf-v6-c-label__text">Danger</span>
1625
2242
  </span>
1626
2243
  </span>
2244
+
1627
2245
  <span class="pf-v6-c-label pf-m-filled pf-m-danger">
1628
2246
  <span class="pf-v6-c-label__content">
1629
2247
  <span class="pf-v6-c-label__icon">
@@ -1646,6 +2264,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1646
2264
  </button>
1647
2265
  </span>
1648
2266
  </span>
2267
+
1649
2268
  <span class="pf-v6-c-label pf-m-filled pf-m-danger pf-m-clickable">
1650
2269
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1651
2270
  <span class="pf-v6-c-label__icon">
@@ -1654,6 +2273,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1654
2273
  <span class="pf-v6-c-label__text">Danger link</span>
1655
2274
  </a>
1656
2275
  </span>
2276
+
1657
2277
  <span class="pf-v6-c-label pf-m-filled pf-m-danger pf-m-clickable">
1658
2278
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1659
2279
  <span class="pf-v6-c-label__icon">
@@ -1662,6 +2282,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1662
2282
  <span class="pf-v6-c-label__text">Danger button</span>
1663
2283
  </button>
1664
2284
  </span>
2285
+
1665
2286
  <span class="pf-v6-c-label pf-m-filled pf-m-danger pf-m-clickable">
1666
2287
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1667
2288
  <span class="pf-v6-c-label__icon">
@@ -1684,6 +2305,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1684
2305
  </button>
1685
2306
  </span>
1686
2307
  </span>
2308
+
1687
2309
  <span class="pf-v6-c-label pf-m-filled pf-m-danger pf-m-clickable">
1688
2310
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1689
2311
  <span class="pf-v6-c-label__icon">
@@ -1706,6 +2328,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1706
2328
  </button>
1707
2329
  </span>
1708
2330
  </span>
2331
+
1709
2332
  <span class="pf-v6-c-label pf-m-filled pf-m-danger">
1710
2333
  <span class="pf-v6-c-label__content">
1711
2334
  <span class="pf-v6-c-label__icon">
@@ -1717,6 +2340,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1717
2340
  >Danger, max-width truncation customization</span>
1718
2341
  </span>
1719
2342
  </span>
2343
+
1720
2344
  <span class="pf-v6-c-label pf-m-filled pf-m-danger">
1721
2345
  <span class="pf-v6-c-label__content">
1722
2346
  <span class="pf-v6-c-label__icon">
@@ -1734,7 +2358,64 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1734
2358
  type="button"
1735
2359
  id="danger-filled-status-truncated-removable-button"
1736
2360
  aria-label="Remove"
1737
- aria-labelledby="danger-filled-status-truncated-removable-button danger-filled-status-truncated-removable-text"
2361
+ aria-labelledby="danger-filled-status-truncated-removable-button danger-filled-status-truncated-removable-text"
2362
+ >
2363
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2364
+ </button>
2365
+ </span>
2366
+ </span>
2367
+
2368
+ <span
2369
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-danger pf-m-clickable"
2370
+ >
2371
+ <a
2372
+ class="pf-v6-c-label__content pf-m-clickable"
2373
+ href="#"
2374
+ tabindex="-1"
2375
+ aria-disabled="true"
2376
+ >
2377
+ <span class="pf-v6-c-label__icon">
2378
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
2379
+ </span>
2380
+ <span
2381
+ class="pf-v6-c-label__text"
2382
+ id="danger-filled-status-link-removable-disabled-text"
2383
+ >Danger link removable (disabled)</span>
2384
+ </a>
2385
+ <span class="pf-v6-c-label__actions">
2386
+ <button
2387
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2388
+ type="button"
2389
+ disabled
2390
+ id="danger-filled-status-link-removable-disabled-button"
2391
+ aria-label="Remove"
2392
+ aria-labelledby="danger-filled-status-link-removable-disabled-button danger-filled-status-link-removable-disabled-text"
2393
+ >
2394
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2395
+ </button>
2396
+ </span>
2397
+ </span>
2398
+
2399
+ <span
2400
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-danger pf-m-clickable"
2401
+ >
2402
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
2403
+ <span class="pf-v6-c-label__icon">
2404
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
2405
+ </span>
2406
+ <span
2407
+ class="pf-v6-c-label__text"
2408
+ id="danger-filled-status-button-removable-disabled-text"
2409
+ >Danger button removable (disabled)</span>
2410
+ </button>
2411
+ <span class="pf-v6-c-label__actions">
2412
+ <button
2413
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2414
+ type="button"
2415
+ disabled
2416
+ id="danger-filled-status-button-removable-disabled-button"
2417
+ aria-label="Remove"
2418
+ aria-labelledby="danger-filled-status-button-removable-disabled-button danger-filled-status-button-removable-disabled-text"
1738
2419
  >
1739
2420
  <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1740
2421
  </button>
@@ -1752,6 +2433,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1752
2433
  <span class="pf-v6-c-label__text">Info</span>
1753
2434
  </span>
1754
2435
  </span>
2436
+
1755
2437
  <span class="pf-v6-c-label pf-m-filled pf-m-info">
1756
2438
  <span class="pf-v6-c-label__content">
1757
2439
  <span class="pf-v6-c-label__icon">
@@ -1774,6 +2456,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1774
2456
  </button>
1775
2457
  </span>
1776
2458
  </span>
2459
+
1777
2460
  <span class="pf-v6-c-label pf-m-filled pf-m-info pf-m-clickable">
1778
2461
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1779
2462
  <span class="pf-v6-c-label__icon">
@@ -1782,6 +2465,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1782
2465
  <span class="pf-v6-c-label__text">Info link</span>
1783
2466
  </a>
1784
2467
  </span>
2468
+
1785
2469
  <span class="pf-v6-c-label pf-m-filled pf-m-info pf-m-clickable">
1786
2470
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1787
2471
  <span class="pf-v6-c-label__icon">
@@ -1790,6 +2474,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1790
2474
  <span class="pf-v6-c-label__text">Info button</span>
1791
2475
  </button>
1792
2476
  </span>
2477
+
1793
2478
  <span class="pf-v6-c-label pf-m-filled pf-m-info pf-m-clickable">
1794
2479
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1795
2480
  <span class="pf-v6-c-label__icon">
@@ -1812,6 +2497,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1812
2497
  </button>
1813
2498
  </span>
1814
2499
  </span>
2500
+
1815
2501
  <span class="pf-v6-c-label pf-m-filled pf-m-info pf-m-clickable">
1816
2502
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1817
2503
  <span class="pf-v6-c-label__icon">
@@ -1834,6 +2520,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1834
2520
  </button>
1835
2521
  </span>
1836
2522
  </span>
2523
+
1837
2524
  <span class="pf-v6-c-label pf-m-filled pf-m-info">
1838
2525
  <span class="pf-v6-c-label__content">
1839
2526
  <span class="pf-v6-c-label__icon">
@@ -1845,6 +2532,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1845
2532
  >Info, max-width truncation customization</span>
1846
2533
  </span>
1847
2534
  </span>
2535
+
1848
2536
  <span class="pf-v6-c-label pf-m-filled pf-m-info">
1849
2537
  <span class="pf-v6-c-label__content">
1850
2538
  <span class="pf-v6-c-label__icon">
@@ -1869,6 +2557,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1869
2557
  </span>
1870
2558
  </span>
1871
2559
 
2560
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-info pf-m-clickable">
2561
+ <a
2562
+ class="pf-v6-c-label__content pf-m-clickable"
2563
+ href="#"
2564
+ tabindex="-1"
2565
+ aria-disabled="true"
2566
+ >
2567
+ <span class="pf-v6-c-label__icon">
2568
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
2569
+ </span>
2570
+ <span
2571
+ class="pf-v6-c-label__text"
2572
+ id="info-filled-status-link-removable-disabled-text"
2573
+ >Info link removable (disabled)</span>
2574
+ </a>
2575
+ <span class="pf-v6-c-label__actions">
2576
+ <button
2577
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2578
+ type="button"
2579
+ disabled
2580
+ id="info-filled-status-link-removable-disabled-button"
2581
+ aria-label="Remove"
2582
+ aria-labelledby="info-filled-status-link-removable-disabled-button info-filled-status-link-removable-disabled-text"
2583
+ >
2584
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2585
+ </button>
2586
+ </span>
2587
+ </span>
2588
+
2589
+ <span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-info pf-m-clickable">
2590
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
2591
+ <span class="pf-v6-c-label__icon">
2592
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
2593
+ </span>
2594
+ <span
2595
+ class="pf-v6-c-label__text"
2596
+ id="info-filled-status-button-removable-disabled-text"
2597
+ >Info button removable (disabled)</span>
2598
+ </button>
2599
+ <span class="pf-v6-c-label__actions">
2600
+ <button
2601
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2602
+ type="button"
2603
+ disabled
2604
+ id="info-filled-status-button-removable-disabled-button"
2605
+ aria-label="Remove"
2606
+ aria-labelledby="info-filled-status-button-removable-disabled-button info-filled-status-button-removable-disabled-text"
2607
+ >
2608
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2609
+ </button>
2610
+ </span>
2611
+ </span>
2612
+
1872
2613
  <br />
1873
2614
  <br />
1874
2615
 
@@ -1880,6 +2621,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1880
2621
  <span class="pf-v6-c-label__text">Custom</span>
1881
2622
  </span>
1882
2623
  </span>
2624
+
1883
2625
  <span class="pf-v6-c-label pf-m-filled pf-m-custom">
1884
2626
  <span class="pf-v6-c-label__content">
1885
2627
  <span class="pf-v6-c-label__icon">
@@ -1902,6 +2644,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1902
2644
  </button>
1903
2645
  </span>
1904
2646
  </span>
2647
+
1905
2648
  <span class="pf-v6-c-label pf-m-filled pf-m-custom pf-m-clickable">
1906
2649
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1907
2650
  <span class="pf-v6-c-label__icon">
@@ -1910,6 +2653,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1910
2653
  <span class="pf-v6-c-label__text">Custom link</span>
1911
2654
  </a>
1912
2655
  </span>
2656
+
1913
2657
  <span class="pf-v6-c-label pf-m-filled pf-m-custom pf-m-clickable">
1914
2658
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1915
2659
  <span class="pf-v6-c-label__icon">
@@ -1918,6 +2662,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1918
2662
  <span class="pf-v6-c-label__text">Custom button</span>
1919
2663
  </button>
1920
2664
  </span>
2665
+
1921
2666
  <span class="pf-v6-c-label pf-m-filled pf-m-custom pf-m-clickable">
1922
2667
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
1923
2668
  <span class="pf-v6-c-label__icon">
@@ -1940,6 +2685,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1940
2685
  </button>
1941
2686
  </span>
1942
2687
  </span>
2688
+
1943
2689
  <span class="pf-v6-c-label pf-m-filled pf-m-custom pf-m-clickable">
1944
2690
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
1945
2691
  <span class="pf-v6-c-label__icon">
@@ -1962,6 +2708,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1962
2708
  </button>
1963
2709
  </span>
1964
2710
  </span>
2711
+
1965
2712
  <span class="pf-v6-c-label pf-m-filled pf-m-custom">
1966
2713
  <span class="pf-v6-c-label__content">
1967
2714
  <span class="pf-v6-c-label__icon">
@@ -1973,6 +2720,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1973
2720
  >Custom, max-width truncation customization</span>
1974
2721
  </span>
1975
2722
  </span>
2723
+
1976
2724
  <span class="pf-v6-c-label pf-m-filled pf-m-custom">
1977
2725
  <span class="pf-v6-c-label__content">
1978
2726
  <span class="pf-v6-c-label__icon">
@@ -1997,6 +2745,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
1997
2745
  </span>
1998
2746
  </span>
1999
2747
 
2748
+ <span
2749
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-custom pf-m-clickable"
2750
+ >
2751
+ <a
2752
+ class="pf-v6-c-label__content pf-m-clickable"
2753
+ href="#"
2754
+ tabindex="-1"
2755
+ aria-disabled="true"
2756
+ >
2757
+ <span class="pf-v6-c-label__icon">
2758
+ <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
2759
+ </span>
2760
+ <span
2761
+ class="pf-v6-c-label__text"
2762
+ id="custom-filled-status-link-removable-disabled-text"
2763
+ >Custom link removable (disabled)</span>
2764
+ </a>
2765
+ <span class="pf-v6-c-label__actions">
2766
+ <button
2767
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2768
+ type="button"
2769
+ disabled
2770
+ id="custom-filled-status-link-removable-disabled-button"
2771
+ aria-label="Remove"
2772
+ aria-labelledby="custom-filled-status-link-removable-disabled-button custom-filled-status-link-removable-disabled-text"
2773
+ >
2774
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2775
+ </button>
2776
+ </span>
2777
+ </span>
2778
+
2779
+ <span
2780
+ class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-custom pf-m-clickable"
2781
+ >
2782
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
2783
+ <span class="pf-v6-c-label__icon">
2784
+ <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
2785
+ </span>
2786
+ <span
2787
+ class="pf-v6-c-label__text"
2788
+ id="custom-filled-status-button-removable-disabled-text"
2789
+ >Custom button removable (disabled)</span>
2790
+ </button>
2791
+ <span class="pf-v6-c-label__actions">
2792
+ <button
2793
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2794
+ type="button"
2795
+ disabled
2796
+ id="custom-filled-status-button-removable-disabled-button"
2797
+ aria-label="Remove"
2798
+ aria-labelledby="custom-filled-status-button-removable-disabled-button custom-filled-status-button-removable-disabled-text"
2799
+ >
2800
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2801
+ </button>
2802
+ </span>
2803
+ </span>
2804
+
2000
2805
  ```
2001
2806
 
2002
2807
  ### Outline
@@ -2153,6 +2958,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
2153
2958
  </span>
2154
2959
  </span>
2155
2960
 
2961
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-clickable">
2962
+ <a
2963
+ class="pf-v6-c-label__content pf-m-clickable"
2964
+ href="#"
2965
+ tabindex="-1"
2966
+ aria-disabled="true"
2967
+ >
2968
+ <span class="pf-v6-c-label__icon">
2969
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2970
+ </span>
2971
+ <span
2972
+ class="pf-v6-c-label__text"
2973
+ id="grey-outline-link-removable-disabled-text"
2974
+ >Grey link removable (disabled)</span>
2975
+ </a>
2976
+ <span class="pf-v6-c-label__actions">
2977
+ <button
2978
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2979
+ type="button"
2980
+ disabled
2981
+ id="grey-outline-link-removable-disabled-button"
2982
+ aria-label="Remove"
2983
+ aria-labelledby="grey-outline-link-removable-disabled-button grey-outline-link-removable-disabled-text"
2984
+ >
2985
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2986
+ </button>
2987
+ </span>
2988
+ </span>
2989
+
2990
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-clickable">
2991
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
2992
+ <span class="pf-v6-c-label__icon">
2993
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2994
+ </span>
2995
+ <span
2996
+ class="pf-v6-c-label__text"
2997
+ id="grey-outline-button-removable-disabled-text"
2998
+ >Grey button removable (disabled)</span>
2999
+ </button>
3000
+ <span class="pf-v6-c-label__actions">
3001
+ <button
3002
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3003
+ type="button"
3004
+ disabled
3005
+ id="grey-outline-button-removable-disabled-button"
3006
+ aria-label="Remove"
3007
+ aria-labelledby="grey-outline-button-removable-disabled-button grey-outline-button-removable-disabled-text"
3008
+ >
3009
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3010
+ </button>
3011
+ </span>
3012
+ </span>
3013
+
2156
3014
  <br />
2157
3015
  <br />
2158
3016
 
@@ -2302,6 +3160,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
2302
3160
  </span>
2303
3161
  </span>
2304
3162
 
3163
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-blue pf-m-clickable">
3164
+ <a
3165
+ class="pf-v6-c-label__content pf-m-clickable"
3166
+ href="#"
3167
+ tabindex="-1"
3168
+ aria-disabled="true"
3169
+ >
3170
+ <span class="pf-v6-c-label__icon">
3171
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3172
+ </span>
3173
+ <span
3174
+ class="pf-v6-c-label__text"
3175
+ id="blue-outline-link-removable-disabled-text"
3176
+ >Blue link removable (disabled)</span>
3177
+ </a>
3178
+ <span class="pf-v6-c-label__actions">
3179
+ <button
3180
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3181
+ type="button"
3182
+ disabled
3183
+ id="blue-outline-link-removable-disabled-button"
3184
+ aria-label="Remove"
3185
+ aria-labelledby="blue-outline-link-removable-disabled-button blue-outline-link-removable-disabled-text"
3186
+ >
3187
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3188
+ </button>
3189
+ </span>
3190
+ </span>
3191
+
3192
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-blue pf-m-clickable">
3193
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
3194
+ <span class="pf-v6-c-label__icon">
3195
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3196
+ </span>
3197
+ <span
3198
+ class="pf-v6-c-label__text"
3199
+ id="blue-outline-button-removable-disabled-text"
3200
+ >Blue button removable (disabled)</span>
3201
+ </button>
3202
+ <span class="pf-v6-c-label__actions">
3203
+ <button
3204
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3205
+ type="button"
3206
+ disabled
3207
+ id="blue-outline-button-removable-disabled-button"
3208
+ aria-label="Remove"
3209
+ aria-labelledby="blue-outline-button-removable-disabled-button blue-outline-button-removable-disabled-text"
3210
+ >
3211
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3212
+ </button>
3213
+ </span>
3214
+ </span>
3215
+
2305
3216
  <br />
2306
3217
  <br />
2307
3218
 
@@ -2451,6 +3362,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
2451
3362
  </span>
2452
3363
  </span>
2453
3364
 
3365
+ <span
3366
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-green pf-m-clickable"
3367
+ >
3368
+ <a
3369
+ class="pf-v6-c-label__content pf-m-clickable"
3370
+ href="#"
3371
+ tabindex="-1"
3372
+ aria-disabled="true"
3373
+ >
3374
+ <span class="pf-v6-c-label__icon">
3375
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3376
+ </span>
3377
+ <span
3378
+ class="pf-v6-c-label__text"
3379
+ id="green-outline-link-removable-disabled-text"
3380
+ >Green link removable (disabled)</span>
3381
+ </a>
3382
+ <span class="pf-v6-c-label__actions">
3383
+ <button
3384
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3385
+ type="button"
3386
+ disabled
3387
+ id="green-outline-link-removable-disabled-button"
3388
+ aria-label="Remove"
3389
+ aria-labelledby="green-outline-link-removable-disabled-button green-outline-link-removable-disabled-text"
3390
+ >
3391
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3392
+ </button>
3393
+ </span>
3394
+ </span>
3395
+
3396
+ <span
3397
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-green pf-m-clickable"
3398
+ >
3399
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
3400
+ <span class="pf-v6-c-label__icon">
3401
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3402
+ </span>
3403
+ <span
3404
+ class="pf-v6-c-label__text"
3405
+ id="green-outline-button-removable-disabled-text"
3406
+ >Green button removable (disabled)</span>
3407
+ </button>
3408
+ <span class="pf-v6-c-label__actions">
3409
+ <button
3410
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3411
+ type="button"
3412
+ disabled
3413
+ id="green-outline-button-removable-disabled-button"
3414
+ aria-label="Remove"
3415
+ aria-labelledby="green-outline-button-removable-disabled-button green-outline-button-removable-disabled-text"
3416
+ >
3417
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3418
+ </button>
3419
+ </span>
3420
+ </span>
3421
+
2454
3422
  <br />
2455
3423
  <br />
2456
3424
 
@@ -2555,45 +3523,102 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
2555
3523
  <button
2556
3524
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2557
3525
  type="button"
2558
- id="orange-outline-button-removable-button"
3526
+ id="orange-outline-button-removable-button"
3527
+ aria-label="Remove"
3528
+ aria-labelledby="orange-outline-button-removable-button orange-outline-button-removable-text"
3529
+ >
3530
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3531
+ </button>
3532
+ </span>
3533
+ </span>
3534
+
3535
+ <span class="pf-v6-c-label pf-m-outline pf-m-orange">
3536
+ <span class="pf-v6-c-label__content">
3537
+ <span class="pf-v6-c-label__icon">
3538
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3539
+ </span>
3540
+ <span
3541
+ class="pf-v6-c-label__text"
3542
+ style="--pf-v5-c-label__text--MaxWidth: 28ch"
3543
+ >Orange label, max-width truncation customization</span>
3544
+ </span>
3545
+ </span>
3546
+
3547
+ <span class="pf-v6-c-label pf-m-outline pf-m-orange">
3548
+ <span class="pf-v6-c-label__content">
3549
+ <span class="pf-v6-c-label__icon">
3550
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3551
+ </span>
3552
+ <span
3553
+ class="pf-v6-c-label__text"
3554
+ id="orange-outline-truncated-with-icon-text"
3555
+ style="--pf-v5-c-label__text--MaxWidth: 38ch"
3556
+ >Orange label with icon and set max-width truncation customization</span>
3557
+ </span>
3558
+ <span class="pf-v6-c-label__actions">
3559
+ <button
3560
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3561
+ type="button"
3562
+ id="orange-outline-truncated-with-icon-button"
3563
+ aria-label="Remove"
3564
+ aria-labelledby="orange-outline-truncated-with-icon-button orange-outline-truncated-with-icon-text"
3565
+ >
3566
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3567
+ </button>
3568
+ </span>
3569
+ </span>
3570
+
3571
+ <span
3572
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-orange pf-m-clickable"
3573
+ >
3574
+ <a
3575
+ class="pf-v6-c-label__content pf-m-clickable"
3576
+ href="#"
3577
+ tabindex="-1"
3578
+ aria-disabled="true"
3579
+ >
3580
+ <span class="pf-v6-c-label__icon">
3581
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3582
+ </span>
3583
+ <span
3584
+ class="pf-v6-c-label__text"
3585
+ id="orange-outline-link-removable-disabled-text"
3586
+ >Orange link removable (disabled)</span>
3587
+ </a>
3588
+ <span class="pf-v6-c-label__actions">
3589
+ <button
3590
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3591
+ type="button"
3592
+ disabled
3593
+ id="orange-outline-link-removable-disabled-button"
2559
3594
  aria-label="Remove"
2560
- aria-labelledby="orange-outline-button-removable-button orange-outline-button-removable-text"
3595
+ aria-labelledby="orange-outline-link-removable-disabled-button orange-outline-link-removable-disabled-text"
2561
3596
  >
2562
3597
  <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2563
3598
  </button>
2564
3599
  </span>
2565
3600
  </span>
2566
3601
 
2567
- <span class="pf-v6-c-label pf-m-outline pf-m-orange">
2568
- <span class="pf-v6-c-label__content">
2569
- <span class="pf-v6-c-label__icon">
2570
- <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2571
- </span>
2572
- <span
2573
- class="pf-v6-c-label__text"
2574
- style="--pf-v5-c-label__text--MaxWidth: 28ch"
2575
- >Orange label, max-width truncation customization</span>
2576
- </span>
2577
- </span>
2578
-
2579
- <span class="pf-v6-c-label pf-m-outline pf-m-orange">
2580
- <span class="pf-v6-c-label__content">
3602
+ <span
3603
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-orange pf-m-clickable"
3604
+ >
3605
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
2581
3606
  <span class="pf-v6-c-label__icon">
2582
3607
  <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2583
3608
  </span>
2584
3609
  <span
2585
3610
  class="pf-v6-c-label__text"
2586
- id="orange-outline-truncated-with-icon-text"
2587
- style="--pf-v5-c-label__text--MaxWidth: 38ch"
2588
- >Orange label with icon and set max-width truncation customization</span>
2589
- </span>
3611
+ id="orange-outline-button-removable-disabled-text"
3612
+ >Orange button removable (disabled)</span>
3613
+ </button>
2590
3614
  <span class="pf-v6-c-label__actions">
2591
3615
  <button
2592
3616
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2593
3617
  type="button"
2594
- id="orange-outline-truncated-with-icon-button"
3618
+ disabled
3619
+ id="orange-outline-button-removable-disabled-button"
2595
3620
  aria-label="Remove"
2596
- aria-labelledby="orange-outline-truncated-with-icon-button orange-outline-truncated-with-icon-text"
3621
+ aria-labelledby="orange-outline-button-removable-disabled-button orange-outline-button-removable-disabled-text"
2597
3622
  >
2598
3623
  <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2599
3624
  </button>
@@ -2749,6 +3774,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
2749
3774
  </span>
2750
3775
  </span>
2751
3776
 
3777
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-red pf-m-clickable">
3778
+ <a
3779
+ class="pf-v6-c-label__content pf-m-clickable"
3780
+ href="#"
3781
+ tabindex="-1"
3782
+ aria-disabled="true"
3783
+ >
3784
+ <span class="pf-v6-c-label__icon">
3785
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3786
+ </span>
3787
+ <span
3788
+ class="pf-v6-c-label__text"
3789
+ id="red-outline-link-removable-disabled-text"
3790
+ >Red link removable (disabled)</span>
3791
+ </a>
3792
+ <span class="pf-v6-c-label__actions">
3793
+ <button
3794
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3795
+ type="button"
3796
+ disabled
3797
+ id="red-outline-link-removable-disabled-button"
3798
+ aria-label="Remove"
3799
+ aria-labelledby="red-outline-link-removable-disabled-button red-outline-link-removable-disabled-text"
3800
+ >
3801
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3802
+ </button>
3803
+ </span>
3804
+ </span>
3805
+
3806
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-red pf-m-clickable">
3807
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
3808
+ <span class="pf-v6-c-label__icon">
3809
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3810
+ </span>
3811
+ <span
3812
+ class="pf-v6-c-label__text"
3813
+ id="red-outline-button-removable-disabled-text"
3814
+ >Red button removable (disabled)</span>
3815
+ </button>
3816
+ <span class="pf-v6-c-label__actions">
3817
+ <button
3818
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3819
+ type="button"
3820
+ disabled
3821
+ id="red-outline-button-removable-disabled-button"
3822
+ aria-label="Remove"
3823
+ aria-labelledby="red-outline-button-removable-disabled-button red-outline-button-removable-disabled-text"
3824
+ >
3825
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3826
+ </button>
3827
+ </span>
3828
+ </span>
3829
+
2752
3830
  <br />
2753
3831
  <br />
2754
3832
 
@@ -2898,6 +3976,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
2898
3976
  </span>
2899
3977
  </span>
2900
3978
 
3979
+ <span
3980
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-orangered pf-m-clickable"
3981
+ >
3982
+ <a
3983
+ class="pf-v6-c-label__content pf-m-clickable"
3984
+ href="#"
3985
+ tabindex="-1"
3986
+ aria-disabled="true"
3987
+ >
3988
+ <span class="pf-v6-c-label__icon">
3989
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3990
+ </span>
3991
+ <span
3992
+ class="pf-v6-c-label__text"
3993
+ id="orangered-outline-link-removable-disabled-text"
3994
+ >Orange red link removable (disabled)</span>
3995
+ </a>
3996
+ <span class="pf-v6-c-label__actions">
3997
+ <button
3998
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3999
+ type="button"
4000
+ disabled
4001
+ id="orangered-outline-link-removable-disabled-button"
4002
+ aria-label="Remove"
4003
+ aria-labelledby="orangered-outline-link-removable-disabled-button orangered-outline-link-removable-disabled-text"
4004
+ >
4005
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4006
+ </button>
4007
+ </span>
4008
+ </span>
4009
+
4010
+ <span
4011
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-orangered pf-m-clickable"
4012
+ >
4013
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
4014
+ <span class="pf-v6-c-label__icon">
4015
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4016
+ </span>
4017
+ <span
4018
+ class="pf-v6-c-label__text"
4019
+ id="orangered-outline-button-removable-disabled-text"
4020
+ >Orange red button removable (disabled)</span>
4021
+ </button>
4022
+ <span class="pf-v6-c-label__actions">
4023
+ <button
4024
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4025
+ type="button"
4026
+ disabled
4027
+ id="orangered-outline-button-removable-disabled-button"
4028
+ aria-label="Remove"
4029
+ aria-labelledby="orangered-outline-button-removable-disabled-button orangered-outline-button-removable-disabled-text"
4030
+ >
4031
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4032
+ </button>
4033
+ </span>
4034
+ </span>
4035
+
2901
4036
  <br />
2902
4037
  <br />
2903
4038
 
@@ -3047,6 +4182,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3047
4182
  </span>
3048
4183
  </span>
3049
4184
 
4185
+ <span
4186
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-purple pf-m-clickable"
4187
+ >
4188
+ <a
4189
+ class="pf-v6-c-label__content pf-m-clickable"
4190
+ href="#"
4191
+ tabindex="-1"
4192
+ aria-disabled="true"
4193
+ >
4194
+ <span class="pf-v6-c-label__icon">
4195
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4196
+ </span>
4197
+ <span
4198
+ class="pf-v6-c-label__text"
4199
+ id="purple-outline-link-removable-disabled-text"
4200
+ >Purple link removable (disabled)</span>
4201
+ </a>
4202
+ <span class="pf-v6-c-label__actions">
4203
+ <button
4204
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4205
+ type="button"
4206
+ disabled
4207
+ id="purple-outline-link-removable-disabled-button"
4208
+ aria-label="Remove"
4209
+ aria-labelledby="purple-outline-link-removable-disabled-button purple-outline-link-removable-disabled-text"
4210
+ >
4211
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4212
+ </button>
4213
+ </span>
4214
+ </span>
4215
+
4216
+ <span
4217
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-purple pf-m-clickable"
4218
+ >
4219
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
4220
+ <span class="pf-v6-c-label__icon">
4221
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4222
+ </span>
4223
+ <span
4224
+ class="pf-v6-c-label__text"
4225
+ id="purple-outline-button-removable-disabled-text"
4226
+ >Purple button removable (disabled)</span>
4227
+ </button>
4228
+ <span class="pf-v6-c-label__actions">
4229
+ <button
4230
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4231
+ type="button"
4232
+ disabled
4233
+ id="purple-outline-button-removable-disabled-button"
4234
+ aria-label="Remove"
4235
+ aria-labelledby="purple-outline-button-removable-disabled-button purple-outline-button-removable-disabled-text"
4236
+ >
4237
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4238
+ </button>
4239
+ </span>
4240
+ </span>
4241
+
3050
4242
  <br />
3051
4243
  <br />
3052
4244
 
@@ -3196,6 +4388,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3196
4388
  </span>
3197
4389
  </span>
3198
4390
 
4391
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-cyan pf-m-clickable">
4392
+ <a
4393
+ class="pf-v6-c-label__content pf-m-clickable"
4394
+ href="#"
4395
+ tabindex="-1"
4396
+ aria-disabled="true"
4397
+ >
4398
+ <span class="pf-v6-c-label__icon">
4399
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4400
+ </span>
4401
+ <span
4402
+ class="pf-v6-c-label__text"
4403
+ id="cyan-outline-link-removable-disabled-text"
4404
+ >Cyan link removable (disabled)</span>
4405
+ </a>
4406
+ <span class="pf-v6-c-label__actions">
4407
+ <button
4408
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4409
+ type="button"
4410
+ disabled
4411
+ id="cyan-outline-link-removable-disabled-button"
4412
+ aria-label="Remove"
4413
+ aria-labelledby="cyan-outline-link-removable-disabled-button cyan-outline-link-removable-disabled-text"
4414
+ >
4415
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4416
+ </button>
4417
+ </span>
4418
+ </span>
4419
+
4420
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-cyan pf-m-clickable">
4421
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
4422
+ <span class="pf-v6-c-label__icon">
4423
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4424
+ </span>
4425
+ <span
4426
+ class="pf-v6-c-label__text"
4427
+ id="cyan-outline-button-removable-disabled-text"
4428
+ >Cyan button removable (disabled)</span>
4429
+ </button>
4430
+ <span class="pf-v6-c-label__actions">
4431
+ <button
4432
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4433
+ type="button"
4434
+ disabled
4435
+ id="cyan-outline-button-removable-disabled-button"
4436
+ aria-label="Remove"
4437
+ aria-labelledby="cyan-outline-button-removable-disabled-button cyan-outline-button-removable-disabled-text"
4438
+ >
4439
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4440
+ </button>
4441
+ </span>
4442
+ </span>
4443
+
3199
4444
  <br />
3200
4445
  <br />
3201
4446
 
@@ -3345,6 +4590,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3345
4590
  </span>
3346
4591
  </span>
3347
4592
 
4593
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-gold pf-m-clickable">
4594
+ <a
4595
+ class="pf-v6-c-label__content pf-m-clickable"
4596
+ href="#"
4597
+ tabindex="-1"
4598
+ aria-disabled="true"
4599
+ >
4600
+ <span class="pf-v6-c-label__icon">
4601
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4602
+ </span>
4603
+ <span
4604
+ class="pf-v6-c-label__text"
4605
+ id="gold-outline-link-removable-disabled-text"
4606
+ >Gold link removable (disabled)</span>
4607
+ </a>
4608
+ <span class="pf-v6-c-label__actions">
4609
+ <button
4610
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4611
+ type="button"
4612
+ disabled
4613
+ id="gold-outline-link-removable-disabled-button"
4614
+ aria-label="Remove"
4615
+ aria-labelledby="gold-outline-link-removable-disabled-button gold-outline-link-removable-disabled-text"
4616
+ >
4617
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4618
+ </button>
4619
+ </span>
4620
+ </span>
4621
+
4622
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-gold pf-m-clickable">
4623
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
4624
+ <span class="pf-v6-c-label__icon">
4625
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4626
+ </span>
4627
+ <span
4628
+ class="pf-v6-c-label__text"
4629
+ id="gold-outline-button-removable-disabled-text"
4630
+ >Gold button removable (disabled)</span>
4631
+ </button>
4632
+ <span class="pf-v6-c-label__actions">
4633
+ <button
4634
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4635
+ type="button"
4636
+ disabled
4637
+ id="gold-outline-button-removable-disabled-button"
4638
+ aria-label="Remove"
4639
+ aria-labelledby="gold-outline-button-removable-disabled-button gold-outline-button-removable-disabled-text"
4640
+ >
4641
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4642
+ </button>
4643
+ </span>
4644
+ </span>
4645
+
3348
4646
  <br />
3349
4647
  <br />
3350
4648
 
@@ -3361,6 +4659,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3361
4659
  <span class="pf-v6-c-label__text">Success</span>
3362
4660
  </span>
3363
4661
  </span>
4662
+
3364
4663
  <span class="pf-v6-c-label pf-m-outline pf-m-success">
3365
4664
  <span class="pf-v6-c-label__content">
3366
4665
  <span class="pf-v6-c-label__icon">
@@ -3383,6 +4682,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3383
4682
  </button>
3384
4683
  </span>
3385
4684
  </span>
4685
+
3386
4686
  <span class="pf-v6-c-label pf-m-outline pf-m-success pf-m-clickable">
3387
4687
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3388
4688
  <span class="pf-v6-c-label__icon">
@@ -3391,6 +4691,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3391
4691
  <span class="pf-v6-c-label__text">Success link</span>
3392
4692
  </a>
3393
4693
  </span>
4694
+
3394
4695
  <span class="pf-v6-c-label pf-m-outline pf-m-success pf-m-clickable">
3395
4696
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3396
4697
  <span class="pf-v6-c-label__icon">
@@ -3399,6 +4700,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3399
4700
  <span class="pf-v6-c-label__text">Success button</span>
3400
4701
  </button>
3401
4702
  </span>
4703
+
3402
4704
  <span class="pf-v6-c-label pf-m-outline pf-m-success pf-m-clickable">
3403
4705
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3404
4706
  <span class="pf-v6-c-label__icon">
@@ -3421,6 +4723,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3421
4723
  </button>
3422
4724
  </span>
3423
4725
  </span>
4726
+
3424
4727
  <span class="pf-v6-c-label pf-m-outline pf-m-success pf-m-clickable">
3425
4728
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3426
4729
  <span class="pf-v6-c-label__icon">
@@ -3443,6 +4746,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3443
4746
  </button>
3444
4747
  </span>
3445
4748
  </span>
4749
+
3446
4750
  <span class="pf-v6-c-label pf-m-outline pf-m-success">
3447
4751
  <span class="pf-v6-c-label__content">
3448
4752
  <span class="pf-v6-c-label__icon">
@@ -3454,6 +4758,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3454
4758
  >Success, max-width truncation customization</span>
3455
4759
  </span>
3456
4760
  </span>
4761
+
3457
4762
  <span class="pf-v6-c-label pf-m-outline pf-m-success">
3458
4763
  <span class="pf-v6-c-label__content">
3459
4764
  <span class="pf-v6-c-label__icon">
@@ -3469,9 +4774,66 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3469
4774
  <button
3470
4775
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
3471
4776
  type="button"
3472
- id="success-outline-status-truncated-removable-button"
4777
+ id="success-outline-status-truncated-removable-button"
4778
+ aria-label="Remove"
4779
+ aria-labelledby="success-outline-status-truncated-removable-button success-outline-status-truncated-removable-text"
4780
+ >
4781
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4782
+ </button>
4783
+ </span>
4784
+ </span>
4785
+
4786
+ <span
4787
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-success pf-m-clickable"
4788
+ >
4789
+ <a
4790
+ class="pf-v6-c-label__content pf-m-clickable"
4791
+ href="#"
4792
+ tabindex="-1"
4793
+ aria-disabled="true"
4794
+ >
4795
+ <span class="pf-v6-c-label__icon">
4796
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
4797
+ </span>
4798
+ <span
4799
+ class="pf-v6-c-label__text"
4800
+ id="success-outline-status-link-removable-disabled-text"
4801
+ >Success link removable (disabled)</span>
4802
+ </a>
4803
+ <span class="pf-v6-c-label__actions">
4804
+ <button
4805
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4806
+ type="button"
4807
+ disabled
4808
+ id="success-outline-status-link-removable-disabled-button"
4809
+ aria-label="Remove"
4810
+ aria-labelledby="success-outline-status-link-removable-disabled-button success-outline-status-link-removable-disabled-text"
4811
+ >
4812
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
4813
+ </button>
4814
+ </span>
4815
+ </span>
4816
+
4817
+ <span
4818
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-success pf-m-clickable"
4819
+ >
4820
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
4821
+ <span class="pf-v6-c-label__icon">
4822
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
4823
+ </span>
4824
+ <span
4825
+ class="pf-v6-c-label__text"
4826
+ id="success-outline-status-button-removable-disabled-text"
4827
+ >Success button removable (disabled)</span>
4828
+ </button>
4829
+ <span class="pf-v6-c-label__actions">
4830
+ <button
4831
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4832
+ type="button"
4833
+ disabled
4834
+ id="success-outline-status-button-removable-disabled-button"
3473
4835
  aria-label="Remove"
3474
- aria-labelledby="success-outline-status-truncated-removable-button success-outline-status-truncated-removable-text"
4836
+ aria-labelledby="success-outline-status-button-removable-disabled-button success-outline-status-button-removable-disabled-text"
3475
4837
  >
3476
4838
  <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3477
4839
  </button>
@@ -3489,6 +4851,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3489
4851
  <span class="pf-v6-c-label__text">Warning</span>
3490
4852
  </span>
3491
4853
  </span>
4854
+
3492
4855
  <span class="pf-v6-c-label pf-m-outline pf-m-warning">
3493
4856
  <span class="pf-v6-c-label__content">
3494
4857
  <span class="pf-v6-c-label__icon">
@@ -3511,6 +4874,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3511
4874
  </button>
3512
4875
  </span>
3513
4876
  </span>
4877
+
3514
4878
  <span class="pf-v6-c-label pf-m-outline pf-m-warning pf-m-clickable">
3515
4879
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3516
4880
  <span class="pf-v6-c-label__icon">
@@ -3519,6 +4883,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3519
4883
  <span class="pf-v6-c-label__text">Warning link</span>
3520
4884
  </a>
3521
4885
  </span>
4886
+
3522
4887
  <span class="pf-v6-c-label pf-m-outline pf-m-warning pf-m-clickable">
3523
4888
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3524
4889
  <span class="pf-v6-c-label__icon">
@@ -3527,6 +4892,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3527
4892
  <span class="pf-v6-c-label__text">Warning button</span>
3528
4893
  </button>
3529
4894
  </span>
4895
+
3530
4896
  <span class="pf-v6-c-label pf-m-outline pf-m-warning pf-m-clickable">
3531
4897
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3532
4898
  <span class="pf-v6-c-label__icon">
@@ -3549,6 +4915,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3549
4915
  </button>
3550
4916
  </span>
3551
4917
  </span>
4918
+
3552
4919
  <span class="pf-v6-c-label pf-m-outline pf-m-warning pf-m-clickable">
3553
4920
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3554
4921
  <span class="pf-v6-c-label__icon">
@@ -3571,6 +4938,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3571
4938
  </button>
3572
4939
  </span>
3573
4940
  </span>
4941
+
3574
4942
  <span class="pf-v6-c-label pf-m-outline pf-m-warning">
3575
4943
  <span class="pf-v6-c-label__content">
3576
4944
  <span class="pf-v6-c-label__icon">
@@ -3582,6 +4950,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3582
4950
  >Warning, max-width truncation customization</span>
3583
4951
  </span>
3584
4952
  </span>
4953
+
3585
4954
  <span class="pf-v6-c-label pf-m-outline pf-m-warning">
3586
4955
  <span class="pf-v6-c-label__content">
3587
4956
  <span class="pf-v6-c-label__icon">
@@ -3606,6 +4975,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3606
4975
  </span>
3607
4976
  </span>
3608
4977
 
4978
+ <span
4979
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-warning pf-m-clickable"
4980
+ >
4981
+ <a
4982
+ class="pf-v6-c-label__content pf-m-clickable"
4983
+ href="#"
4984
+ tabindex="-1"
4985
+ aria-disabled="true"
4986
+ >
4987
+ <span class="pf-v6-c-label__icon">
4988
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
4989
+ </span>
4990
+ <span
4991
+ class="pf-v6-c-label__text"
4992
+ id="warning-outline-status-link-removable-disabled-text"
4993
+ >Warning link removable (disabled)</span>
4994
+ </a>
4995
+ <span class="pf-v6-c-label__actions">
4996
+ <button
4997
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4998
+ type="button"
4999
+ disabled
5000
+ id="warning-outline-status-link-removable-disabled-button"
5001
+ aria-label="Remove"
5002
+ aria-labelledby="warning-outline-status-link-removable-disabled-button warning-outline-status-link-removable-disabled-text"
5003
+ >
5004
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5005
+ </button>
5006
+ </span>
5007
+ </span>
5008
+
5009
+ <span
5010
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-warning pf-m-clickable"
5011
+ >
5012
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
5013
+ <span class="pf-v6-c-label__icon">
5014
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
5015
+ </span>
5016
+ <span
5017
+ class="pf-v6-c-label__text"
5018
+ id="warning-outline-status-button-removable-disabled-text"
5019
+ >Warning button removable (disabled)</span>
5020
+ </button>
5021
+ <span class="pf-v6-c-label__actions">
5022
+ <button
5023
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5024
+ type="button"
5025
+ disabled
5026
+ id="warning-outline-status-button-removable-disabled-button"
5027
+ aria-label="Remove"
5028
+ aria-labelledby="warning-outline-status-button-removable-disabled-button warning-outline-status-button-removable-disabled-text"
5029
+ >
5030
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5031
+ </button>
5032
+ </span>
5033
+ </span>
5034
+
3609
5035
  <br />
3610
5036
  <br />
3611
5037
 
@@ -3617,6 +5043,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3617
5043
  <span class="pf-v6-c-label__text">Danger</span>
3618
5044
  </span>
3619
5045
  </span>
5046
+
3620
5047
  <span class="pf-v6-c-label pf-m-outline pf-m-danger">
3621
5048
  <span class="pf-v6-c-label__content">
3622
5049
  <span class="pf-v6-c-label__icon">
@@ -3639,6 +5066,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3639
5066
  </button>
3640
5067
  </span>
3641
5068
  </span>
5069
+
3642
5070
  <span class="pf-v6-c-label pf-m-outline pf-m-danger pf-m-clickable">
3643
5071
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3644
5072
  <span class="pf-v6-c-label__icon">
@@ -3647,6 +5075,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3647
5075
  <span class="pf-v6-c-label__text">Danger link</span>
3648
5076
  </a>
3649
5077
  </span>
5078
+
3650
5079
  <span class="pf-v6-c-label pf-m-outline pf-m-danger pf-m-clickable">
3651
5080
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3652
5081
  <span class="pf-v6-c-label__icon">
@@ -3655,6 +5084,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3655
5084
  <span class="pf-v6-c-label__text">Danger button</span>
3656
5085
  </button>
3657
5086
  </span>
5087
+
3658
5088
  <span class="pf-v6-c-label pf-m-outline pf-m-danger pf-m-clickable">
3659
5089
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3660
5090
  <span class="pf-v6-c-label__icon">
@@ -3677,6 +5107,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3677
5107
  </button>
3678
5108
  </span>
3679
5109
  </span>
5110
+
3680
5111
  <span class="pf-v6-c-label pf-m-outline pf-m-danger pf-m-clickable">
3681
5112
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3682
5113
  <span class="pf-v6-c-label__icon">
@@ -3699,6 +5130,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3699
5130
  </button>
3700
5131
  </span>
3701
5132
  </span>
5133
+
3702
5134
  <span class="pf-v6-c-label pf-m-outline pf-m-danger">
3703
5135
  <span class="pf-v6-c-label__content">
3704
5136
  <span class="pf-v6-c-label__icon">
@@ -3710,6 +5142,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3710
5142
  >Danger, max-width truncation customization</span>
3711
5143
  </span>
3712
5144
  </span>
5145
+
3713
5146
  <span class="pf-v6-c-label pf-m-outline pf-m-danger">
3714
5147
  <span class="pf-v6-c-label__content">
3715
5148
  <span class="pf-v6-c-label__icon">
@@ -3734,6 +5167,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3734
5167
  </span>
3735
5168
  </span>
3736
5169
 
5170
+ <span
5171
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-danger pf-m-clickable"
5172
+ >
5173
+ <a
5174
+ class="pf-v6-c-label__content pf-m-clickable"
5175
+ href="#"
5176
+ tabindex="-1"
5177
+ aria-disabled="true"
5178
+ >
5179
+ <span class="pf-v6-c-label__icon">
5180
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
5181
+ </span>
5182
+ <span
5183
+ class="pf-v6-c-label__text"
5184
+ id="danger-outline-status-link-removable-disabled-text"
5185
+ >Danger link removable (disabled)</span>
5186
+ </a>
5187
+ <span class="pf-v6-c-label__actions">
5188
+ <button
5189
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5190
+ type="button"
5191
+ disabled
5192
+ id="danger-outline-status-link-removable-disabled-button"
5193
+ aria-label="Remove"
5194
+ aria-labelledby="danger-outline-status-link-removable-disabled-button danger-outline-status-link-removable-disabled-text"
5195
+ >
5196
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5197
+ </button>
5198
+ </span>
5199
+ </span>
5200
+
5201
+ <span
5202
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-danger pf-m-clickable"
5203
+ >
5204
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
5205
+ <span class="pf-v6-c-label__icon">
5206
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
5207
+ </span>
5208
+ <span
5209
+ class="pf-v6-c-label__text"
5210
+ id="danger-outline-status-button-removable-disabled-text"
5211
+ >Danger button removable (disabled)</span>
5212
+ </button>
5213
+ <span class="pf-v6-c-label__actions">
5214
+ <button
5215
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5216
+ type="button"
5217
+ disabled
5218
+ id="danger-outline-status-button-removable-disabled-button"
5219
+ aria-label="Remove"
5220
+ aria-labelledby="danger-outline-status-button-removable-disabled-button danger-outline-status-button-removable-disabled-text"
5221
+ >
5222
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5223
+ </button>
5224
+ </span>
5225
+ </span>
5226
+
3737
5227
  <br />
3738
5228
  <br />
3739
5229
 
@@ -3745,6 +5235,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3745
5235
  <span class="pf-v6-c-label__text">Info</span>
3746
5236
  </span>
3747
5237
  </span>
5238
+
3748
5239
  <span class="pf-v6-c-label pf-m-outline pf-m-info">
3749
5240
  <span class="pf-v6-c-label__content">
3750
5241
  <span class="pf-v6-c-label__icon">
@@ -3767,6 +5258,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3767
5258
  </button>
3768
5259
  </span>
3769
5260
  </span>
5261
+
3770
5262
  <span class="pf-v6-c-label pf-m-outline pf-m-info pf-m-clickable">
3771
5263
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3772
5264
  <span class="pf-v6-c-label__icon">
@@ -3775,6 +5267,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3775
5267
  <span class="pf-v6-c-label__text">Info link</span>
3776
5268
  </a>
3777
5269
  </span>
5270
+
3778
5271
  <span class="pf-v6-c-label pf-m-outline pf-m-info pf-m-clickable">
3779
5272
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3780
5273
  <span class="pf-v6-c-label__icon">
@@ -3783,6 +5276,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3783
5276
  <span class="pf-v6-c-label__text">Info button</span>
3784
5277
  </button>
3785
5278
  </span>
5279
+
3786
5280
  <span class="pf-v6-c-label pf-m-outline pf-m-info pf-m-clickable">
3787
5281
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3788
5282
  <span class="pf-v6-c-label__icon">
@@ -3805,6 +5299,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3805
5299
  </button>
3806
5300
  </span>
3807
5301
  </span>
5302
+
3808
5303
  <span class="pf-v6-c-label pf-m-outline pf-m-info pf-m-clickable">
3809
5304
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3810
5305
  <span class="pf-v6-c-label__icon">
@@ -3827,6 +5322,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3827
5322
  </button>
3828
5323
  </span>
3829
5324
  </span>
5325
+
3830
5326
  <span class="pf-v6-c-label pf-m-outline pf-m-info">
3831
5327
  <span class="pf-v6-c-label__content">
3832
5328
  <span class="pf-v6-c-label__icon">
@@ -3838,6 +5334,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3838
5334
  >Info, max-width truncation customization</span>
3839
5335
  </span>
3840
5336
  </span>
5337
+
3841
5338
  <span class="pf-v6-c-label pf-m-outline pf-m-info">
3842
5339
  <span class="pf-v6-c-label__content">
3843
5340
  <span class="pf-v6-c-label__icon">
@@ -3862,6 +5359,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3862
5359
  </span>
3863
5360
  </span>
3864
5361
 
5362
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-info pf-m-clickable">
5363
+ <a
5364
+ class="pf-v6-c-label__content pf-m-clickable"
5365
+ href="#"
5366
+ tabindex="-1"
5367
+ aria-disabled="true"
5368
+ >
5369
+ <span class="pf-v6-c-label__icon">
5370
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
5371
+ </span>
5372
+ <span
5373
+ class="pf-v6-c-label__text"
5374
+ id="info-outline-status-link-removable-disabled-text"
5375
+ >Info link removable (disabled)</span>
5376
+ </a>
5377
+ <span class="pf-v6-c-label__actions">
5378
+ <button
5379
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5380
+ type="button"
5381
+ disabled
5382
+ id="info-outline-status-link-removable-disabled-button"
5383
+ aria-label="Remove"
5384
+ aria-labelledby="info-outline-status-link-removable-disabled-button info-outline-status-link-removable-disabled-text"
5385
+ >
5386
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5387
+ </button>
5388
+ </span>
5389
+ </span>
5390
+
5391
+ <span class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-info pf-m-clickable">
5392
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
5393
+ <span class="pf-v6-c-label__icon">
5394
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
5395
+ </span>
5396
+ <span
5397
+ class="pf-v6-c-label__text"
5398
+ id="info-outline-status-button-removable-disabled-text"
5399
+ >Info button removable (disabled)</span>
5400
+ </button>
5401
+ <span class="pf-v6-c-label__actions">
5402
+ <button
5403
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5404
+ type="button"
5405
+ disabled
5406
+ id="info-outline-status-button-removable-disabled-button"
5407
+ aria-label="Remove"
5408
+ aria-labelledby="info-outline-status-button-removable-disabled-button info-outline-status-button-removable-disabled-text"
5409
+ >
5410
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5411
+ </button>
5412
+ </span>
5413
+ </span>
5414
+
3865
5415
  <br />
3866
5416
  <br />
3867
5417
 
@@ -3873,6 +5423,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3873
5423
  <span class="pf-v6-c-label__text">Custom</span>
3874
5424
  </span>
3875
5425
  </span>
5426
+
3876
5427
  <span class="pf-v6-c-label pf-m-outline pf-m-custom">
3877
5428
  <span class="pf-v6-c-label__content">
3878
5429
  <span class="pf-v6-c-label__icon">
@@ -3895,6 +5446,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3895
5446
  </button>
3896
5447
  </span>
3897
5448
  </span>
5449
+
3898
5450
  <span class="pf-v6-c-label pf-m-outline pf-m-custom pf-m-clickable">
3899
5451
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3900
5452
  <span class="pf-v6-c-label__icon">
@@ -3903,6 +5455,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3903
5455
  <span class="pf-v6-c-label__text">Custom link</span>
3904
5456
  </a>
3905
5457
  </span>
5458
+
3906
5459
  <span class="pf-v6-c-label pf-m-outline pf-m-custom pf-m-clickable">
3907
5460
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3908
5461
  <span class="pf-v6-c-label__icon">
@@ -3911,6 +5464,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3911
5464
  <span class="pf-v6-c-label__text">Custom button</span>
3912
5465
  </button>
3913
5466
  </span>
5467
+
3914
5468
  <span class="pf-v6-c-label pf-m-outline pf-m-custom pf-m-clickable">
3915
5469
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
3916
5470
  <span class="pf-v6-c-label__icon">
@@ -3933,6 +5487,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3933
5487
  </button>
3934
5488
  </span>
3935
5489
  </span>
5490
+
3936
5491
  <span class="pf-v6-c-label pf-m-outline pf-m-custom pf-m-clickable">
3937
5492
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
3938
5493
  <span class="pf-v6-c-label__icon">
@@ -3955,6 +5510,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3955
5510
  </button>
3956
5511
  </span>
3957
5512
  </span>
5513
+
3958
5514
  <span class="pf-v6-c-label pf-m-outline pf-m-custom">
3959
5515
  <span class="pf-v6-c-label__content">
3960
5516
  <span class="pf-v6-c-label__icon">
@@ -3966,6 +5522,7 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3966
5522
  >Custom, max-width truncation customization</span>
3967
5523
  </span>
3968
5524
  </span>
5525
+
3969
5526
  <span class="pf-v6-c-label pf-m-outline pf-m-custom">
3970
5527
  <span class="pf-v6-c-label__content">
3971
5528
  <span class="pf-v6-c-label__icon">
@@ -3990,6 +5547,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
3990
5547
  </span>
3991
5548
  </span>
3992
5549
 
5550
+ <span
5551
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-custom pf-m-clickable"
5552
+ >
5553
+ <a
5554
+ class="pf-v6-c-label__content pf-m-clickable"
5555
+ href="#"
5556
+ tabindex="-1"
5557
+ aria-disabled="true"
5558
+ >
5559
+ <span class="pf-v6-c-label__icon">
5560
+ <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
5561
+ </span>
5562
+ <span
5563
+ class="pf-v6-c-label__text"
5564
+ id="custom-outline-status-link-removable-disabled-text"
5565
+ >Custom link removable (disabled)</span>
5566
+ </a>
5567
+ <span class="pf-v6-c-label__actions">
5568
+ <button
5569
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5570
+ type="button"
5571
+ disabled
5572
+ id="custom-outline-status-link-removable-disabled-button"
5573
+ aria-label="Remove"
5574
+ aria-labelledby="custom-outline-status-link-removable-disabled-button custom-outline-status-link-removable-disabled-text"
5575
+ >
5576
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5577
+ </button>
5578
+ </span>
5579
+ </span>
5580
+
5581
+ <span
5582
+ class="pf-v6-c-label pf-m-outline pf-m-disabled pf-m-custom pf-m-clickable"
5583
+ >
5584
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
5585
+ <span class="pf-v6-c-label__icon">
5586
+ <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
5587
+ </span>
5588
+ <span
5589
+ class="pf-v6-c-label__text"
5590
+ id="custom-outline-status-button-removable-disabled-text"
5591
+ >Custom button removable (disabled)</span>
5592
+ </button>
5593
+ <span class="pf-v6-c-label__actions">
5594
+ <button
5595
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5596
+ type="button"
5597
+ disabled
5598
+ id="custom-outline-status-button-removable-disabled-button"
5599
+ aria-label="Remove"
5600
+ aria-labelledby="custom-outline-status-button-removable-disabled-button custom-outline-status-button-removable-disabled-text"
5601
+ >
5602
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5603
+ </button>
5604
+ </span>
5605
+ </span>
5606
+
3993
5607
  ```
3994
5608
 
3995
5609
  ### Compact
@@ -4141,6 +5755,59 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
4141
5755
  </span>
4142
5756
  </span>
4143
5757
 
5758
+ <span class="pf-v6-c-label pf-m-compact pf-m-disabled pf-m-clickable">
5759
+ <a
5760
+ class="pf-v6-c-label__content pf-m-clickable"
5761
+ href="#"
5762
+ tabindex="-1"
5763
+ aria-disabled="true"
5764
+ >
5765
+ <span class="pf-v6-c-label__icon">
5766
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
5767
+ </span>
5768
+ <span
5769
+ class="pf-v6-c-label__text"
5770
+ id="compact-link-removable-disabled-text"
5771
+ >Compact link removable (disabled)</span>
5772
+ </a>
5773
+ <span class="pf-v6-c-label__actions">
5774
+ <button
5775
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5776
+ type="button"
5777
+ disabled
5778
+ id="compact-link-removable-disabled-button"
5779
+ aria-label="Remove"
5780
+ aria-labelledby="compact-link-removable-disabled-button compact-link-removable-disabled-text"
5781
+ >
5782
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5783
+ </button>
5784
+ </span>
5785
+ </span>
5786
+
5787
+ <span class="pf-v6-c-label pf-m-compact pf-m-disabled pf-m-clickable">
5788
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
5789
+ <span class="pf-v6-c-label__icon">
5790
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
5791
+ </span>
5792
+ <span
5793
+ class="pf-v6-c-label__text"
5794
+ id="compact-button-removable-disabled-text"
5795
+ >Compact button removable (disabled)</span>
5796
+ </button>
5797
+ <span class="pf-v6-c-label__actions">
5798
+ <button
5799
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5800
+ type="button"
5801
+ disabled
5802
+ id="compact-button-removable-disabled-button"
5803
+ aria-label="Remove"
5804
+ aria-labelledby="compact-button-removable-disabled-button compact-button-removable-disabled-text"
5805
+ >
5806
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5807
+ </button>
5808
+ </span>
5809
+ </span>
5810
+
4144
5811
  <br />
4145
5812
  <br />
4146
5813
 
@@ -4290,6 +5957,63 @@ cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
4290
5957
  </span>
4291
5958
  </span>
4292
5959
 
5960
+ <span
5961
+ class="pf-v6-c-label pf-m-outline pf-m-compact pf-m-disabled pf-m-blue pf-m-clickable"
5962
+ >
5963
+ <a
5964
+ class="pf-v6-c-label__content pf-m-clickable"
5965
+ href="#"
5966
+ tabindex="-1"
5967
+ aria-disabled="true"
5968
+ >
5969
+ <span class="pf-v6-c-label__icon">
5970
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
5971
+ </span>
5972
+ <span
5973
+ class="pf-v6-c-label__text"
5974
+ id="compact-outline-link-removable-disabled-text"
5975
+ >Compact link removable (disabled)</span>
5976
+ </a>
5977
+ <span class="pf-v6-c-label__actions">
5978
+ <button
5979
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
5980
+ type="button"
5981
+ disabled
5982
+ id="compact-outline-link-removable-disabled-button"
5983
+ aria-label="Remove"
5984
+ aria-labelledby="compact-outline-link-removable-disabled-button compact-outline-link-removable-disabled-text"
5985
+ >
5986
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5987
+ </button>
5988
+ </span>
5989
+ </span>
5990
+
5991
+ <span
5992
+ class="pf-v6-c-label pf-m-outline pf-m-compact pf-m-disabled pf-m-blue pf-m-clickable"
5993
+ >
5994
+ <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
5995
+ <span class="pf-v6-c-label__icon">
5996
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
5997
+ </span>
5998
+ <span
5999
+ class="pf-v6-c-label__text"
6000
+ id="compact-outline-button-removable-disabled-text"
6001
+ >Compact button removable (disabled)</span>
6002
+ </button>
6003
+ <span class="pf-v6-c-label__actions">
6004
+ <button
6005
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
6006
+ type="button"
6007
+ disabled
6008
+ id="compact-outline-button-removable-disabled-button"
6009
+ aria-label="Remove"
6010
+ aria-labelledby="compact-outline-button-removable-disabled-button compact-outline-button-removable-disabled-text"
6011
+ >
6012
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
6013
+ </button>
6014
+ </span>
6015
+ </span>
6016
+
4293
6017
  ```
4294
6018
 
4295
6019
  ### Overflow
@@ -5644,6 +7368,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
5644
7368
  | `.pf-m-danger` | `.pf-v6-c-label` | Modifies the label to have danger colored styling. |
5645
7369
  | `.pf-m-info` | `.pf-v6-c-label` | Modifies the label to have info colored styling. |
5646
7370
  | `.pf-m-custom` | `.pf-v6-c-label` | Modifies the label to have custom colored styling. |
7371
+ | `.pf-m-disabled` | `.pf-v6-c-label` | Modifies label for disabled styles. |
5647
7372
  | `.pf-m-editable` | `.pf-v6-c-label` | Modifies label for editable styles. |
5648
7373
  | `.pf-m-editable-active` | `.pf-v6-c-label.pf-m-editable` | Modifies editable label for active styles. |
5649
7374
  | `--pf-v6-c-label__text--MaxWidth` | `.pf-v6-c-label` | Modifiex the max width of the text before text will truncate. |