@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.60

package/docs/components/Label/examples/Label.md

@@ -30,7 +30,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="default-removable-button"
       aria-label="Remove"
@@ -50,7 +50,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="default-icon-removable-button"
       aria-label="Remove"
@@ -61,19 +61,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Grey link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Grey button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Grey link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="default-link-removable-button"
       aria-label="Remove"
@@ -84,6 +90,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Grey button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="default-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="default-button-removable-button default-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -108,7 +131,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="default-truncated-with-icon-button"
       aria-label="Remove"
@@ -143,7 +166,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="blue-removable-button"
       aria-label="Remove"
@@ -163,7 +186,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="blue-icon-removable-button"
       aria-label="Remove"
@@ -174,19 +197,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-blue">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-blue pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Blue link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-blue">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-blue pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Blue button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-blue pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Blue link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="blue-link-removable-button"
       aria-label="Remove"
@@ -197,6 +226,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-blue pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Blue button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="blue-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="blue-button-removable-button blue-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-blue">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -221,7 +267,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="blue-truncated-with-icon-button"
       aria-label="Remove"
@@ -256,7 +302,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="green-removable-button"
       aria-label="Remove"
@@ -276,7 +322,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="green-icon-removable-button"
       aria-label="Remove"
@@ -287,19 +333,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-green">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-green pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Green link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-green">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-green pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Green button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-green pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Green link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="green-link-removable-button"
       aria-label="Remove"
@@ -310,6 +362,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-green pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Green button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="green-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="green-button-removable-button green-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-green">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -334,7 +403,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="green-truncated-with-icon-button"
       aria-label="Remove"
@@ -369,7 +438,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="orange-removable-button"
       aria-label="Remove"
@@ -389,7 +458,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="orange-icon-removable-button"
       aria-label="Remove"
@@ -400,19 +469,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-orange">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-orange pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Orange link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-orange">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-orange pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Orange button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-orange pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Orange link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="orange-link-removable-button"
       aria-label="Remove"
@@ -423,6 +498,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-orange pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Orange button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orange-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="orange-button-removable-button orange-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-orange">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -447,7 +539,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="orange-truncated-with-icon-button"
       aria-label="Remove"
@@ -482,7 +574,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="red-removable-button"
       aria-label="Remove"
@@ -502,7 +594,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="red-icon-removable-button"
       aria-label="Remove"
@@ -513,19 +605,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-red">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-red pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Red link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-red">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-red pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Red button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-red pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Red link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="red-link-removable-button"
       aria-label="Remove"
@@ -536,6 +634,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-red pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Red button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="red-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="red-button-removable-button red-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-red">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -560,7 +675,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="red-truncated-with-icon-button"
       aria-label="Remove"
@@ -574,6 +689,142 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
 <br />
 <br />
 
+<span class="pf-v5-c-label pf-m-orangered">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__text">Orange red</span>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-orangered">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v5-c-label__text">Orange red icon</span>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-orangered">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__text">Orange red removable</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orangered-removable-button"
+      aria-label="Remove"
+      aria-labelledby="orangered-removable-button orangered-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-orangered">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v5-c-label__text">Orange red icon removable</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orangered-icon-removable-button"
+      aria-label="Remove"
+      aria-labelledby="orangered-icon-removable-button orangered-icon-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-orangered pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Orange red link</span>
+  </a>
+</span>
+
+<span class="pf-v5-c-label pf-m-orangered pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Orange red button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-orangered pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Orange red link removable</span>
+  </a>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orangered-link-removable-button"
+      aria-label="Remove"
+      aria-labelledby="orangered-link-removable-button orangered-link-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-orangered pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Orange red button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orangered-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="orangered-button-removable-button orangered-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-orangered">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span
+      class="pf-v5-c-label__text"
+      style="--pf-v5-c-label__text--MaxWidth: 28ch"
+    >Orange red label, max-width truncation customization</span>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-orangered">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span
+      class="pf-v5-c-label__text"
+      style="--pf-v5-c-label__text--MaxWidth: 38ch"
+    >Orange red label with icon and set max-width truncation customization</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orangered-truncated-with-icon-button"
+      aria-label="Remove"
+      aria-labelledby="orangered-truncated-with-icon-button orangered-truncated-with-icon-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<br />
+<br />
+
 <span class="pf-v5-c-label pf-m-purple">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__text">Purple</span>
@@ -595,7 +846,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="purple-removable-button"
       aria-label="Remove"
@@ -615,7 +866,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="purple-icon-removable-button"
       aria-label="Remove"
@@ -626,19 +877,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-purple">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-purple pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Purple link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-purple">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-purple pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Purple button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-purple pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Purple link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="purple-link-removable-button"
       aria-label="Remove"
@@ -649,6 +906,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-purple pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Purple button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="purple-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="purple-button-removable-button purple-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-purple">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -673,7 +947,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="purple-truncated-with-icon-button"
       aria-label="Remove"
@@ -708,7 +982,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="cyan-removable-button"
       aria-label="Remove"
@@ -728,7 +1002,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="cyan-icon-removable-button"
       aria-label="Remove"
@@ -739,19 +1013,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-cyan">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-cyan pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Cyan link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-cyan">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-cyan pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Cyan button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-cyan pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Cyan link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="cyan-link-removable-button"
       aria-label="Remove"
@@ -762,6 +1042,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-cyan pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Cyan button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="cyan-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="cyan-button-removable-button cyan-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-cyan">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -786,7 +1083,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="cyan-truncated-with-icon-button"
       aria-label="Remove"
@@ -820,7 +1117,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="gold-removable-button"
       aria-label="Remove"
@@ -840,7 +1137,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="gold-icon-removable-button"
       aria-label="Remove"
@@ -851,19 +1148,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-gold">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-gold pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Gold link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-gold">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-gold pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Gold button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-gold pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Gold link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="gold-link-removable-button"
       aria-label="Remove"
@@ -874,6 +1177,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-gold pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Gold button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="gold-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="gold-button-removable-button gold-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-gold">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -898,7 +1218,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="gold-truncated-with-icon-button"
       aria-label="Remove"
@@ -935,7 +1255,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="grey-outline-removable-button"
       aria-label="Remove"
@@ -955,7 +1275,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="grey-outline-icon-removable-button"
       aria-label="Remove"
@@ -966,19 +1286,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Grey link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Grey button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Grey link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="grey-outline-link-removable-button"
       aria-label="Remove"
@@ -989,6 +1315,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-outline pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Grey button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="grey-outline-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="grey-outline-button-removable-button grey-outline-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-outline">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -1013,7 +1356,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="grey-outline-truncated-with-icon-button"
       aria-label="Remove"
@@ -1048,7 +1391,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="blue-outline-removable-button"
       aria-label="Remove"
@@ -1068,7 +1411,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="blue-outline-icon-removable-button"
       aria-label="Remove"
@@ -1079,19 +1422,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-blue">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-blue pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Blue link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-blue">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-blue pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Blue button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-blue pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Blue link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="blue-outline-link-removable-button"
       aria-label="Remove"
@@ -1102,6 +1451,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-outline pf-m-blue pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Blue button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="blue-outline-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="blue-outline-button-removable-button blue-outline-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-outline pf-m-blue">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -1126,7 +1492,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="blue-outline-truncated-with-icon-button"
       aria-label="Remove"
@@ -1161,7 +1527,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="green-outline-removable-button"
       aria-label="Remove"
@@ -1181,7 +1547,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="green-outline-icon-removable-button"
       aria-label="Remove"
@@ -1192,19 +1558,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-green">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-green pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Green link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-green">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-green pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Green button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-green pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Green link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="green-outline-link-removable-button"
       aria-label="Remove"
@@ -1215,6 +1587,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-outline pf-m-green pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Green button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="green-outline-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="green-outline-button-removable-button green-outline-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-outline pf-m-green">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -1239,7 +1628,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="green-outline-truncated-with-icon-button"
       aria-label="Remove"
@@ -1274,7 +1663,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="orange-outline-removable-button"
       aria-label="Remove"
@@ -1285,50 +1674,209 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-orange">
-  <span class="pf-v5-c-label__content">
-    <span class="pf-v5-c-label__icon">
-      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
-    </span>
-    <span class="pf-v5-c-label__text">Orange icon removable</span>
-  </span>
+<span class="pf-v5-c-label pf-m-outline pf-m-orange">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v5-c-label__text">Orange icon removable</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orange-outline-icon-removable-button"
+      aria-label="Remove"
+      aria-labelledby="orange-outline-icon-removable-button orange-outline-icon-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-orange pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Orange link</span>
+  </a>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-orange pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Orange button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-orange pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Orange link removable</span>
+  </a>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orange-outline-link-removable-button"
+      aria-label="Remove"
+      aria-labelledby="orange-outline-link-removable-button orange-outline-link-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-orange pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Orange button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orange-outline-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="orange-outline-button-removable-button orange-outline-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-orange">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span
+      class="pf-v5-c-label__text"
+      style="--pf-v5-c-label__text--MaxWidth: 28ch"
+    >Orange label, max-width truncation customization</span>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-orange">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span
+      class="pf-v5-c-label__text"
+      style="--pf-v5-c-label__text--MaxWidth: 38ch"
+    >Orange label with icon and set max-width truncation customization</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orange-outline-truncated-with-icon-button"
+      aria-label="Remove"
+      aria-labelledby="orange-outline-truncated-with-icon-button orange-outline-truncated-with-icon-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<br />
+<br />
+
+<span class="pf-v5-c-label pf-m-outline pf-m-red">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__text">Red</span>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-red">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v5-c-label__text">Red icon</span>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-red">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__text">Red removable</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="red-outline-removable-button"
+      aria-label="Remove"
+      aria-labelledby="red-outline-removable-button red-outline-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-red">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v5-c-label__text">Red icon removable</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="red-outline-icon-removable-button"
+      aria-label="Remove"
+      aria-labelledby="red-outline-icon-removable-button red-outline-icon-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-red pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Red link</span>
+  </a>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-red pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Red button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-red pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Red link removable</span>
+  </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
-      id="orange-outline-icon-removable-button"
+      id="red-outline-link-removable-button"
       aria-label="Remove"
-      aria-labelledby="orange-outline-icon-removable-button orange-outline-icon-removable-text"
+      aria-labelledby="red-outline-link-removable-button red-outline-link-removable-text"
     >
       <i class="fas fa-times fa-fw" aria-hidden="true"></i>
     </button>
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-orange">
-  <a class="pf-v5-c-label__content" href="#">
-    <span class="pf-v5-c-label__text">Orange link</span>
-  </a>
-</span>
-
-<span class="pf-v5-c-label pf-m-outline pf-m-orange">
-  <a class="pf-v5-c-label__content" href="#">
-    <span class="pf-v5-c-label__text">Orange link removable</span>
-  </a>
+<span class="pf-v5-c-label pf-m-outline pf-m-red pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Red button removable</span>
+  </button>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
-      id="orange-outline-link-removable-button"
+      id="red-outline-button-removable-button"
       aria-label="Remove"
-      aria-labelledby="orange-outline-link-removable-button orange-outline-link-removable-text"
+      aria-labelledby="red-outline-button-removable-button red-outline-button-removable-text"
     >
       <i class="fas fa-times fa-fw" aria-hidden="true"></i>
     </button>
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-orange">
+<span class="pf-v5-c-label pf-m-outline pf-m-red">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
       <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
@@ -1336,11 +1884,11 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
     <span
       class="pf-v5-c-label__text"
       style="--pf-v5-c-label__text--MaxWidth: 28ch"
-    >Orange label, max-width truncation customization</span>
+    >Red label, max-width truncation customization</span>
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-orange">
+<span class="pf-v5-c-label pf-m-outline pf-m-red">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
       <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
@@ -1348,15 +1896,15 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
     <span
       class="pf-v5-c-label__text"
       style="--pf-v5-c-label__text--MaxWidth: 38ch"
-    >Orange label with icon and set max-width truncation customization</span>
+    >Red label with icon and set max-width truncation customization</span>
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
-      id="orange-outline-truncated-with-icon-button"
+      id="red-outline-truncated-with-icon-button"
       aria-label="Remove"
-      aria-labelledby="orange-outline-truncated-with-icon-button orange-outline-truncated-with-icon-text"
+      aria-labelledby="red-outline-truncated-with-icon-button red-outline-truncated-with-icon-text"
     >
       <i class="fas fa-times fa-fw" aria-hidden="true"></i>
     </button>
@@ -1366,82 +1914,105 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
 <br />
 <br />
 
-<span class="pf-v5-c-label pf-m-outline pf-m-red">
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered">
   <span class="pf-v5-c-label__content">
-    <span class="pf-v5-c-label__text">Red</span>
+    <span class="pf-v5-c-label__text">Orange red</span>
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-red">
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
       <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v5-c-label__text">Red icon</span>
+    <span class="pf-v5-c-label__text">Orange red icon</span>
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-red">
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered">
   <span class="pf-v5-c-label__content">
-    <span class="pf-v5-c-label__text">Red removable</span>
+    <span class="pf-v5-c-label__text">Orange red removable</span>
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
-      id="red-outline-removable-button"
+      id="orangered-outline-removable-button"
       aria-label="Remove"
-      aria-labelledby="red-outline-removable-button red-outline-removable-text"
+      aria-labelledby="orangered-outline-removable-button orangered-outline-removable-text"
     >
       <i class="fas fa-times fa-fw" aria-hidden="true"></i>
     </button>
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-red">
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
       <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
     </span>
-    <span class="pf-v5-c-label__text">Red icon removable</span>
+    <span class="pf-v5-c-label__text">Orange red icon removable</span>
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
-      id="red-outline-icon-removable-button"
+      id="orangered-outline-icon-removable-button"
       aria-label="Remove"
-      aria-labelledby="red-outline-icon-removable-button red-outline-icon-removable-text"
+      aria-labelledby="orangered-outline-icon-removable-button orangered-outline-icon-removable-text"
     >
       <i class="fas fa-times fa-fw" aria-hidden="true"></i>
     </button>
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-red">
-  <a class="pf-v5-c-label__content" href="#">
-    <span class="pf-v5-c-label__text">Red link</span>
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Orange red link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-red">
-  <a class="pf-v5-c-label__content" href="#">
-    <span class="pf-v5-c-label__text">Red link removable</span>
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Orange red button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Orange red link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
-      id="red-outline-link-removable-button"
+      id="orangered-outline-link-removable-button"
       aria-label="Remove"
-      aria-labelledby="red-outline-link-removable-button red-outline-link-removable-text"
+      aria-labelledby="orangered-outline-link-removable-button orangered-outline-link-removable-text"
     >
       <i class="fas fa-times fa-fw" aria-hidden="true"></i>
     </button>
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-red">
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Orange red button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="orangered-outline-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="orangered-outline-button-removable-button orangered-outline-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
       <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
@@ -1449,11 +2020,11 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
     <span
       class="pf-v5-c-label__text"
       style="--pf-v5-c-label__text--MaxWidth: 28ch"
-    >Red label, max-width truncation customization</span>
+    >Orange red label, max-width truncation customization</span>
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-red">
+<span class="pf-v5-c-label pf-m-outline pf-m-orangered">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
       <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
@@ -1461,15 +2032,15 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
     <span
       class="pf-v5-c-label__text"
       style="--pf-v5-c-label__text--MaxWidth: 38ch"
-    >Red label with icon and set max-width truncation customization</span>
+    >Orange red label with icon and set max-width truncation customization</span>
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
-      id="red-outline-truncated-with-icon-button"
+      id="orangered-outline-truncated-with-icon-button"
       aria-label="Remove"
-      aria-labelledby="red-outline-truncated-with-icon-button red-outline-truncated-with-icon-text"
+      aria-labelledby="orangered-outline-truncated-with-icon-button orangered-outline-truncated-with-icon-text"
     >
       <i class="fas fa-times fa-fw" aria-hidden="true"></i>
     </button>
@@ -1500,7 +2071,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="purple-outline-removable-button"
       aria-label="Remove"
@@ -1520,7 +2091,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="purple-outline-icon-removable-button"
       aria-label="Remove"
@@ -1531,19 +2102,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-purple">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-purple pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Purple link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-purple">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-purple pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Purple button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-purple pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Purple link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="purple-outline-link-removable-button"
       aria-label="Remove"
@@ -1554,6 +2131,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-outline pf-m-purple pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Purple button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="purple-outline-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="purple-outline-button-removable-button purple-outline-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-outline pf-m-purple">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -1578,7 +2172,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="purple-outline-truncated-with-icon-button"
       aria-label="Remove"
@@ -1613,7 +2207,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="cyan-outline-removable-button"
       aria-label="Remove"
@@ -1633,7 +2227,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="cyan-outline-icon-removable-button"
       aria-label="Remove"
@@ -1644,19 +2238,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-cyan">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-cyan pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Cyan link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-cyan">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-cyan pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Cyan button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-cyan pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Cyan link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="cyan-outline-link-removable-button"
       aria-label="Remove"
@@ -1667,6 +2267,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-outline pf-m-cyan pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Cyan button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="cyan-outline-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="cyan-outline-button-removable-button cyan-outline-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-outline pf-m-cyan">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -1691,7 +2308,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="cyan-outline-truncated-with-icon-button"
       aria-label="Remove"
@@ -1726,7 +2343,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="gold-outline-removable-button"
       aria-label="Remove"
@@ -1746,7 +2363,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="gold-outline-icon-removable-button"
       aria-label="Remove"
@@ -1757,19 +2374,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-gold">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-gold pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Gold link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-outline pf-m-gold">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-outline pf-m-gold pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Gold button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-gold pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Gold link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="gold-outline-link-removable-button"
       aria-label="Remove"
@@ -1780,6 +2403,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-outline pf-m-gold pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Gold button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="gold-outline-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="gold-outline-button-removable-button gold-outline-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-outline pf-m-gold">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -1804,7 +2444,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="gold-outline-truncated-with-icon-button"
       aria-label="Remove"
@@ -1841,7 +2481,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="compact-removable-button"
       aria-label="Remove"
@@ -1861,7 +2501,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="compact-icon-removable-button"
       aria-label="Remove"
@@ -1872,19 +2512,25 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
-<span class="pf-v5-c-label pf-m-compact">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-compact pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Compact link</span>
   </a>
 </span>
 
-<span class="pf-v5-c-label pf-m-compact">
-  <a class="pf-v5-c-label__content" href="#">
+<span class="pf-v5-c-label pf-m-compact pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Compact button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-compact pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
     <span class="pf-v5-c-label__text">Compact link removable</span>
   </a>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="compact-link-removable-button"
       aria-label="Remove"
@@ -1895,6 +2541,23 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<span class="pf-v5-c-label pf-m-compact pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Compact button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="compact-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="compact-button-removable-button compact-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 <span class="pf-v5-c-label pf-m-compact">
   <span class="pf-v5-c-label__content">
     <span class="pf-v5-c-label__icon">
@@ -1919,7 +2582,7 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="compact-truncated-with-icon-button"
       aria-label="Remove"
@@ -1930,6 +2593,142 @@ cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
   </span>
 </span>
 
+<br />
+<br />
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__text">Compact</span>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v5-c-label__text">Compact icon</span>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__text">Compact removable</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="compact-outline-removable-button"
+      aria-label="Remove"
+      aria-labelledby="compact-outline-removable-button compact-outline-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v5-c-label__text">Compact icon removable</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="compact-outline-icon-removable-button"
+      aria-label="Remove"
+      aria-labelledby="compact-outline-icon-removable-button compact-outline-icon-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Compact link</span>
+  </a>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Compact button</span>
+  </button>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue pf-m-clickable">
+  <a class="pf-v5-c-label__content pf-m-clickable" href="#">
+    <span class="pf-v5-c-label__text">Compact link removable</span>
+  </a>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="compact-outline-link-removable-button"
+      aria-label="Remove"
+      aria-labelledby="compact-outline-link-removable-button compact-outline-link-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue pf-m-clickable">
+  <button class="pf-v5-c-label__content pf-m-clickable" type="button">
+    <span class="pf-v5-c-label__text">Compact button removable</span>
+  </button>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="compact-outline-button-removable-button"
+      aria-label="Remove"
+      aria-labelledby="compact-outline-button-removable-button compact-outline-button-removable-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span
+      class="pf-v5-c-label__text"
+      style="--pf-v5-c-label__text--MaxWidth: 28ch"
+    >Compact label, max-width truncation customization</span>
+  </span>
+</span>
+
+<span class="pf-v5-c-label pf-m-outline pf-m-compact pf-m-blue">
+  <span class="pf-v5-c-label__content">
+    <span class="pf-v5-c-label__icon">
+      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+    </span>
+    <span
+      class="pf-v5-c-label__text"
+      style="--pf-v5-c-label__text--MaxWidth: 38ch"
+    >Compact label with icon and set max-width truncation customization</span>
+  </span>
+  <span class="pf-v5-c-label__actions">
+    <button
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+      type="button"
+      id="compact-outline-truncated-with-icon-button"
+      aria-label="Remove"
+      aria-labelledby="compact-outline-truncated-with-icon-button compact-outline-truncated-with-icon-text"
+    >
+      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+    </button>
+  </span>
+</span>
+
 ```
 
 ### Overflow
@@ -1949,17 +2748,6 @@ This style of label is used to indicate overflow within a label group.
 
 **Note: Editable label behavior must be handled with JavaScript.**
 
-*   `.pf-v5-c-label__editable-text` onClick event should:
-    *   Set `.pf-m-editable-active` on `.pf-v5-c-label`
-    *   Change `.pf-v5-c-label__editable-text`from a button to an input
-*   Return keypress, when content is editable, should:
-    *   Be captured to prevent line wrapping and save updates to label text
-    *   Remove `.pf-m-editable-active` from `.pf-v5-c-label`
-*   Esc keypress, when content is editable, should:
-    *   Undo any update to label text
-    *   Remove `.pf-m-editable-active` from `.pf-v5-c-label`
-    *   Change `.pf-v5-c-label__editable-text` back to a button
-
 ```html isBeta
 <span class="pf-v5-c-label pf-m-editable pf-m-blue">
   <button
@@ -1972,7 +2760,7 @@ This style of label is used to indicate overflow within a label group.
 
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="editable-label-button"
       aria-label="Remove"
@@ -2004,7 +2792,7 @@ This style of label is used to indicate overflow within a label group.
 
   <span class="pf-v5-c-label__actions">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       id="compact-editable-label-button"
       aria-label="Remove"
@@ -2401,13 +3189,13 @@ The contents of a label group can be modified by removing labels or adding new o
   </div>
   <div class="pf-v5-c-label-group__close">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       aria-labelledby="label-group-category-removable-button label-group-category-removable-label"
       aria-label="Close label group"
       id="label-group-category-removable-button"
     >
-      <i class="fas fa-times-circle" aria-hidden="true"></i>
+      <i class="fas fa-times" aria-hidden="true"></i>
     </button>
   </div>
 </div>
@@ -2677,13 +3465,13 @@ The contents of a label group can be modified by removing labels or adding new o
   </div>
   <div class="pf-v5-c-label-group__close">
     <button
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
       type="button"
       aria-labelledby="label-group-vertical-category-removable-button label-group-vertical-category-removable-label"
       aria-label="Close label group"
       id="label-group-vertical-category-removable-button"
     >
-      <i class="fas fa-times-circle" aria-hidden="true"></i>
+      <i class="fas fa-times" aria-hidden="true"></i>
     </button>
   </div>
 </div>
@@ -2692,7 +3480,7 @@ The contents of a label group can be modified by removing labels or adding new o
 
 In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
 
-*   `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
+* `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
 
 ### Editable labels, dynamic label group
 
@@ -2716,7 +3504,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="editable-labels-editable-group-example-editable-label-editable-1-button"
               aria-label="Remove"
@@ -2739,7 +3527,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="editable-labels-editable-group-example-editable-label-editable-2-button"
               aria-label="Remove"
@@ -2762,7 +3550,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="editable-labels-editable-group-example-editable-label-editable-3-button"
               aria-label="Remove"
@@ -2809,7 +3597,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="editable-labels-label-active-editable-group-example-editable-label-editable-1-button"
               aria-label="Remove"
@@ -2832,7 +3620,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="editable-labels-label-active-editable-group-example-editable-label-editable-2-button"
               aria-label="Remove"
@@ -2854,18 +3642,6 @@ In addition to the JavaScript management of [editable labels](/components/label#
             value="Editable label 3, active"
             aria-label="Editable text"
           />
-
-          <span class="pf-v5-c-label__actions">
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              id="editable-labels-label-active-editable-group-example-editable-label-editable-3-button"
-              aria-label="Remove"
-              aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-3-button editable-labels-label-active-editable-group-example-editable-label-editable-3-text"
-            >
-              <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-            </button>
-          </span>
         </span>
       </li>
       <li class="pf-v5-c-label-group__list-item pf-m-textarea">
@@ -2899,7 +3675,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
           </span>
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="static-labels-dynamic-label-group-example-editable-label-static-1-button"
               aria-label="Remove"
@@ -2917,7 +3693,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
           </span>
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="static-labels-dynamic-label-group-example-editable-label-static-2-button"
               aria-label="Remove"
@@ -2935,7 +3711,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
           </span>
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="static-labels-dynamic-label-group-example-editable-label-static-3-button"
               aria-label="Remove"
@@ -2977,7 +3753,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
           </span>
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="mixed-labels-dynamic-label-group-example-editable-label-static-1-button"
               aria-label="Remove"
@@ -2995,7 +3771,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
           </span>
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="mixed-labels-dynamic-label-group-example-editable-label-static-2-button"
               aria-label="Remove"
@@ -3018,7 +3794,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button"
               aria-label="Remove"
@@ -3041,7 +3817,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button"
               aria-label="Remove"
@@ -3064,7 +3840,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
           <span class="pf-v5-c-label__actions">
             <button
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v5-c-button pf-m-plain pf-m-no-padding"
               type="button"
               id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button"
               aria-label="Remove"
@@ -3265,7 +4041,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-label-group__close > button] [id value of .pf-v5-c-label-group__label]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
 | `aria-label="[label text]"` | `.pf-v5-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |