@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.91

package/docs/components/Button/examples/Button.md

@@ -9,41 +9,41 @@ cssPrefix: pf-v5-c-button
 ### Variations
 
 ```html
-<button class="pf-v5-c-button pf-m-primary" type="button">Primary</button>
+<button class="pf-v6-c-button pf-m-primary" type="button">Primary</button>
 
-<button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
+<button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-danger pf-m-secondary"
   type="button"
 >Secondary danger</button>
 
-<button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
+<button class="pf-v6-c-button pf-m-tertiary" type="button">Tertiary</button>
 
-<button class="pf-v5-c-button pf-m-danger" type="button">Danger</button>
+<button class="pf-v6-c-button pf-m-danger" type="button">Danger</button>
 
-<button class="pf-v5-c-button pf-m-warning" type="button">Warning</button>
+<button class="pf-v6-c-button pf-m-warning" type="button">Warning</button>
 
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link" type="button">Link</button>
+<button class="pf-v6-c-button pf-m-link" type="button">Link</button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-danger" type="button">Link danger</button>
+<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">Link danger</button>
 
-<button class="pf-v5-c-button pf-m-inline pf-m-link" type="button">Inline link</button>
+<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">Inline link</button>
 
-<button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
+<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
   <i class="fas fa-times" aria-hidden="true"></i>
 </button>
 
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control" type="button">Control</button>
+<button class="pf-v6-c-button pf-m-control" type="button">Control</button>
 
 <button
-  class="pf-v5-c-button pf-m-control"
+  class="pf-v6-c-button pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -56,43 +56,43 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon</strong>
 </div>
-<button class="pf-v5-c-button pf-m-primary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-primary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Primary
 </button>
 
-<button class="pf-v5-c-button pf-m-secondary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-secondary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary
 </button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-secondary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary danger
 </button>
 
-<button class="pf-v5-c-button pf-m-tertiary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-tertiary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Tertiary
 </button>
 
-<button class="pf-v5-c-button pf-m-danger" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-danger" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Danger
 </button>
 
-<button class="pf-v5-c-button pf-m-warning" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-warning" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Warning
@@ -101,43 +101,43 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-link" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-danger" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link danger
 </button>
 
-<button class="pf-v5-c-button pf-m-inline pf-m-link" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Inline link
 </button>
 
-<button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
+<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
   <i class="fas fa-times" aria-hidden="true"></i>
 </button>
 
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-control" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Control
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control"
+  class="pf-v6-c-button pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -150,44 +150,44 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon end</strong>
 </div>
-<button class="pf-v5-c-button pf-m-primary" type="button">
+<button class="pf-v6-c-button pf-m-primary" type="button">
   Primary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-secondary" type="button">
+<button class="pf-v6-c-button pf-m-secondary" type="button">
   Secondary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-secondary" type="button">
+<button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
   Secondary danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-tertiary" type="button">
+<button class="pf-v6-c-button pf-m-tertiary" type="button">
   Tertiary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-danger" type="button">
+<button class="pf-v6-c-button pf-m-danger" type="button">
   Danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-warning" type="button">
+<button class="pf-v6-c-button pf-m-warning" type="button">
   Warning
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
@@ -195,43 +195,43 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link" type="button">
+<button class="pf-v6-c-button pf-m-link" type="button">
   Link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-danger" type="button">
+<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
   Link danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-inline pf-m-link" type="button">
+<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
   Inline link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
+<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
   <i class="fas fa-times" aria-hidden="true"></i>
 </button>
 
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control" type="button">
+<button class="pf-v6-c-button pf-m-control" type="button">
   Control
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control"
+  class="pf-v6-c-button pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -243,41 +243,41 @@ cssPrefix: pf-v5-c-button
 ### Clicked buttons
 
 ```html
-<button class="pf-v5-c-button pf-m-clicked pf-m-primary" type="button">Primary</button>
+<button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">Primary</button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-secondary"
+  class="pf-v6-c-button pf-m-clicked pf-m-secondary"
   type="button"
 >Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary"
   type="button"
 >Secondary danger</button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-tertiary" type="button">Tertiary</button>
+<button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">Tertiary</button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-danger" type="button">Danger</button>
+<button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">Danger</button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-warning" type="button">Warning</button>
+<button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">Warning</button>
 
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-link" type="button">Link</button>
+<button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">Link</button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-link pf-m-danger"
+  class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger"
   type="button"
 >Link danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-inline pf-m-link"
+  class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link"
   type="button"
 >Inline link</button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-plain"
+  class="pf-v6-c-button pf-m-clicked pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -287,10 +287,10 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-control" type="button">Control</button>
+<button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">Control</button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-control"
+  class="pf-v6-c-button pf-m-clicked pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -303,46 +303,46 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon</strong>
 </div>
-<button class="pf-v5-c-button pf-m-clicked pf-m-primary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Primary
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-secondary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary"
   type="button"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary danger
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-tertiary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Tertiary
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-danger" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Danger
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-warning" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Warning
@@ -351,29 +351,29 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-link" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link danger
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Inline link
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-plain"
+  class="pf-v6-c-button pf-m-clicked pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -383,15 +383,15 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-control" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Control
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-control"
+  class="pf-v6-c-button pf-m-clicked pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -404,47 +404,47 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon end</strong>
 </div>
-<button class="pf-v5-c-button pf-m-clicked pf-m-primary" type="button">
+<button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
   Primary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-secondary" type="button">
+<button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
   Secondary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary"
   type="button"
 >
   Secondary danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-tertiary" type="button">
+<button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
   Tertiary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-danger" type="button">
+<button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
   Danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-warning" type="button">
+<button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
   Warning
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
@@ -452,29 +452,29 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-link" type="button">
+<button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
   Link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
+<button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
   Link danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
+<button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
   Inline link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-plain"
+  class="pf-v6-c-button pf-m-clicked pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -484,15 +484,15 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-clicked pf-m-control" type="button">
+<button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
   Control
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-clicked pf-m-control"
+  class="pf-v6-c-button pf-m-clicked pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -504,38 +504,38 @@ cssPrefix: pf-v5-c-button
 ### Small buttons
 
 ```html
-<button class="pf-v5-c-button pf-m-small pf-m-primary" type="button">Primary</button>
+<button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">Primary</button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-secondary" type="button">Secondary</button>
+<button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary"
   type="button"
 >Secondary danger</button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-tertiary" type="button">Tertiary</button>
+<button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">Tertiary</button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-danger" type="button">Danger</button>
+<button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">Danger</button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-warning" type="button">Warning</button>
+<button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">Warning</button>
 
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-small pf-m-link" type="button">Link</button>
+<button class="pf-v6-c-button pf-m-small pf-m-link" type="button">Link</button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-link pf-m-danger"
+  class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger"
   type="button"
 >Link danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-inline pf-m-link"
+  class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link"
   type="button"
 >Inline link</button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-plain"
+  class="pf-v6-c-button pf-m-small pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -545,10 +545,10 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-small pf-m-control" type="button">Control</button>
+<button class="pf-v6-c-button pf-m-small pf-m-control" type="button">Control</button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-control"
+  class="pf-v6-c-button pf-m-small pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -561,46 +561,46 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon</strong>
 </div>
-<button class="pf-v5-c-button pf-m-small pf-m-primary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Primary
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-secondary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary"
   type="button"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary danger
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-tertiary" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Tertiary
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-danger" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Danger
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-warning" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Warning
@@ -609,29 +609,29 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-small pf-m-link" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-link pf-m-danger" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link danger
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-inline pf-m-link" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Inline link
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-plain"
+  class="pf-v6-c-button pf-m-small pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -641,15 +641,15 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-small pf-m-control" type="button">
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Control
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-control"
+  class="pf-v6-c-button pf-m-small pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -662,47 +662,47 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon end</strong>
 </div>
-<button class="pf-v5-c-button pf-m-small pf-m-primary" type="button">
+<button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
   Primary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-secondary" type="button">
+<button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
   Secondary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary"
   type="button"
 >
   Secondary danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-tertiary" type="button">
+<button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
   Tertiary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-danger" type="button">
+<button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
   Danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-warning" type="button">
+<button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
   Warning
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
@@ -710,29 +710,29 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-small pf-m-link" type="button">
+<button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
   Link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-link pf-m-danger" type="button">
+<button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
   Link danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-small pf-m-inline pf-m-link" type="button">
+<button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
   Inline link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-plain"
+  class="pf-v6-c-button pf-m-small pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -742,15 +742,15 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-small pf-m-control" type="button">
+<button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
   Control
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-small pf-m-control"
+  class="pf-v6-c-button pf-m-small pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -762,41 +762,41 @@ cssPrefix: pf-v5-c-button
 ### Disabled
 
 ```html
-<button class="pf-v5-c-button pf-m-primary" type="button" disabled>Primary</button>
+<button class="pf-v6-c-button pf-m-primary" type="button" disabled>Primary</button>
 
-<button class="pf-v5-c-button pf-m-secondary" type="button" disabled>Secondary</button>
+<button class="pf-v6-c-button pf-m-secondary" type="button" disabled>Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-danger pf-m-secondary"
   type="button"
   disabled
 >Secondary danger</button>
 
-<button class="pf-v5-c-button pf-m-tertiary" type="button" disabled>Tertiary</button>
+<button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>Tertiary</button>
 
-<button class="pf-v5-c-button pf-m-danger" type="button" disabled>Danger</button>
+<button class="pf-v6-c-button pf-m-danger" type="button" disabled>Danger</button>
 
-<button class="pf-v5-c-button pf-m-warning" type="button" disabled>Warning</button>
+<button class="pf-v6-c-button pf-m-warning" type="button" disabled>Warning</button>
 
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link" type="button" disabled>Link</button>
+<button class="pf-v6-c-button pf-m-link" type="button" disabled>Link</button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-danger"
+  class="pf-v6-c-button pf-m-link pf-m-danger"
   type="button"
   disabled
 >Link danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-inline pf-m-link"
+  class="pf-v6-c-button pf-m-inline pf-m-link"
   type="button"
   disabled
 >Inline link</button>
 
 <button
-  class="pf-v5-c-button pf-m-plain"
+  class="pf-v6-c-button pf-m-plain"
   type="button"
   disabled
   aria-label="Remove"
@@ -807,10 +807,10 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control" type="button" disabled>Control</button>
+<button class="pf-v6-c-button pf-m-control" type="button" disabled>Control</button>
 
 <button
-  class="pf-v5-c-button pf-m-control"
+  class="pf-v6-c-button pf-m-control"
   type="button"
   disabled
   aria-label="Copy input"
@@ -824,47 +824,47 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon</strong>
 </div>
-<button class="pf-v5-c-button pf-m-primary" type="button" disabled>
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-primary" type="button" disabled>
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Primary
 </button>
 
-<button class="pf-v5-c-button pf-m-secondary" type="button" disabled>
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-danger pf-m-secondary"
   type="button"
   disabled
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary danger
 </button>
 
-<button class="pf-v5-c-button pf-m-tertiary" type="button" disabled>
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Tertiary
 </button>
 
-<button class="pf-v5-c-button pf-m-danger" type="button" disabled>
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-danger" type="button" disabled>
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Danger
 </button>
 
-<button class="pf-v5-c-button pf-m-warning" type="button" disabled>
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-warning" type="button" disabled>
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Warning
@@ -873,29 +873,29 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link" type="button" disabled>
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-link" type="button" disabled>
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-danger" type="button" disabled>
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link danger
 </button>
 
-<button class="pf-v5-c-button pf-m-inline pf-m-link" type="button" disabled>
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Inline link
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-plain"
+  class="pf-v6-c-button pf-m-plain"
   type="button"
   disabled
   aria-label="Remove"
@@ -906,15 +906,15 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control" type="button" disabled>
-  <span class="pf-v5-c-button__icon pf-m-start">
+<button class="pf-v6-c-button pf-m-control" type="button" disabled>
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Control
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control"
+  class="pf-v6-c-button pf-m-control"
   type="button"
   disabled
   aria-label="Copy input"
@@ -928,48 +928,48 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon end</strong>
 </div>
-<button class="pf-v5-c-button pf-m-primary" type="button" disabled>
+<button class="pf-v6-c-button pf-m-primary" type="button" disabled>
   Primary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-secondary" type="button" disabled>
+<button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
   Secondary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-danger pf-m-secondary"
   type="button"
   disabled
 >
   Secondary danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-tertiary" type="button" disabled>
+<button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
   Tertiary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-danger" type="button" disabled>
+<button class="pf-v6-c-button pf-m-danger" type="button" disabled>
   Danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-warning" type="button" disabled>
+<button class="pf-v6-c-button pf-m-warning" type="button" disabled>
   Warning
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
@@ -977,29 +977,29 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link" type="button" disabled>
+<button class="pf-v6-c-button pf-m-link" type="button" disabled>
   Link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-danger" type="button" disabled>
+<button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
   Link danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-inline pf-m-link" type="button" disabled>
+<button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
   Inline link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-plain"
+  class="pf-v6-c-button pf-m-plain"
   type="button"
   disabled
   aria-label="Remove"
@@ -1010,15 +1010,15 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control" type="button" disabled>
+<button class="pf-v6-c-button pf-m-control" type="button" disabled>
   Control
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control"
+  class="pf-v6-c-button pf-m-control"
   type="button"
   disabled
   aria-label="Copy input"
@@ -1032,37 +1032,37 @@ cssPrefix: pf-v5-c-button
 
 ```html
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-primary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-primary"
   type="button"
   aria-disabled="true"
 >Primary</button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-secondary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-secondary"
   type="button"
   aria-disabled="true"
 >Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
   type="button"
   aria-disabled="true"
 >Secondary danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-tertiary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-tertiary"
   type="button"
   aria-disabled="true"
 >Tertiary</button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger"
   type="button"
   aria-disabled="true"
 >Danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-warning"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-warning"
   type="button"
   aria-disabled="true"
 >Warning</button>
@@ -1071,25 +1071,25 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-link"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-link"
   type="button"
   aria-disabled="true"
 >Link</button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
   type="button"
   aria-disabled="true"
 >Link danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
   type="button"
   aria-disabled="true"
 >Inline link</button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-plain"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
   type="button"
   aria-disabled="true"
   aria-label="Remove"
@@ -1101,13 +1101,13 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
 >Control</button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
   aria-label="Copy input"
@@ -1122,66 +1122,66 @@ cssPrefix: pf-v5-c-button
   <strong>Icon</strong>
 </div>
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-primary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-primary"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Primary
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-secondary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-secondary"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Secondary danger
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-tertiary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-tertiary"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Tertiary
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Danger
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-warning"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-warning"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Warning
@@ -1191,40 +1191,40 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-link"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-link"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link danger
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Inline link
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-plain"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
   type="button"
   aria-disabled="true"
   aria-label="Remove"
@@ -1236,18 +1236,18 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  <span class="pf-v6-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Control
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
   aria-label="Copy input"
@@ -1262,67 +1262,67 @@ cssPrefix: pf-v5-c-button
   <strong>Icon end</strong>
 </div>
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-primary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-primary"
   type="button"
   aria-disabled="true"
 >
   Primary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-secondary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-secondary"
   type="button"
   aria-disabled="true"
 >
   Secondary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
   type="button"
   aria-disabled="true"
 >
   Secondary danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-tertiary"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-tertiary"
   type="button"
   aria-disabled="true"
 >
   Tertiary
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger"
   type="button"
   aria-disabled="true"
 >
   Danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-warning"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-warning"
   type="button"
   aria-disabled="true"
 >
   Warning
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
@@ -1331,40 +1331,40 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-link"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-link"
   type="button"
   aria-disabled="true"
 >
   Link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
   type="button"
   aria-disabled="true"
 >
   Link danger
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
   type="button"
   aria-disabled="true"
 >
   Inline link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-plain"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
   type="button"
   aria-disabled="true"
   aria-label="Remove"
@@ -1376,18 +1376,18 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
 >
   Control
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
+  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
   aria-label="Copy input"
@@ -1401,36 +1401,36 @@ cssPrefix: pf-v5-c-button
 
 ```html
 <a
-  class="pf-v5-c-button pf-m-primary"
+  class="pf-v6-c-button pf-m-primary"
   href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
 >Primary link to W3.org</a>
 
 <a
-  class="pf-v5-c-button pf-m-secondary"
+  class="pf-v6-c-button pf-m-secondary"
   href="#overview"
   aria-label="Read more about button documentation"
 >Secondary link to anchor</a>
 
 <a
-  class="pf-v5-c-button pf-m-secondary pf-m-danger"
+  class="pf-v6-c-button pf-m-secondary pf-m-danger"
   href="#overview"
   aria-label="Read more about button documentation"
 >Secondary danger link to anchor</a>
 
 <a
-  class="pf-v5-c-button pf-m-tertiary pf-m-disabled"
+  class="pf-v6-c-button pf-m-tertiary pf-m-disabled"
   href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
   aria-disabled="true"
   tabindex="-1"
 >Tertiary link to W3.org</a>
 
 <a
-  class="pf-v5-c-button pf-m-link"
+  class="pf-v6-c-button pf-m-link"
   href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
 >Link to W3.org</a>
 
 <a
-  class="pf-v5-c-button pf-m-link pf-m-danger"
+  class="pf-v6-c-button pf-m-link pf-m-danger"
   href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
 >Link danger to W3.org</a>
 
@@ -1442,7 +1442,7 @@ cssPrefix: pf-v5-c-button
 <strong>Plain</strong>
 <br />
 <span
-  class="pf-v5-c-button pf-m-plain"
+  class="pf-v6-c-button pf-m-plain"
   type="button"
   role="button"
   tabindex="0"
@@ -1455,7 +1455,7 @@ cssPrefix: pf-v5-c-button
 <strong>Plain no padding</strong>
 <br />
 <span
-  class="pf-v5-c-button pf-m-no-padding pf-m-plain"
+  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
   type="button"
   role="button"
   tabindex="0"
@@ -1468,7 +1468,7 @@ cssPrefix: pf-v5-c-button
 <strong>Inline link</strong>
 <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 <span
-  class="pf-v5-c-button pf-m-link pf-m-inline"
+  class="pf-v6-c-button pf-m-link pf-m-inline"
   type="button"
   role="button"
   tabindex="0"
@@ -1481,7 +1481,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 
 ```html
 <button
-  class="pf-v5-c-button pf-m-primary pf-m-block"
+  class="pf-v6-c-button pf-m-primary pf-m-block"
   type="button"
 >Block level button</button>
 
@@ -1490,11 +1490,11 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 ### Types
 
 ```html
-<button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
+<button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
 
-<button class="pf-v5-c-button pf-m-primary" type="reset">Reset</button>
+<button class="pf-v6-c-button pf-m-primary" type="reset">Reset</button>
 
-<button class="pf-v5-c-button pf-m-primary" type="button">Default</button>
+<button class="pf-v6-c-button pf-m-primary" type="button">Default</button>
 
 ```
 
@@ -1502,33 +1502,33 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 
 ```html
 <button
-  class="pf-v5-c-button pf-m-primary pf-m-display-lg"
+  class="pf-v6-c-button pf-m-primary pf-m-display-lg"
   type="button"
 >Call to action</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-display-lg"
+  class="pf-v6-c-button pf-m-secondary pf-m-display-lg"
   type="button"
 >Call to action</button>
 
 <button
-  class="pf-v5-c-button pf-m-tertiary pf-m-display-lg"
+  class="pf-v6-c-button pf-m-tertiary pf-m-display-lg"
   type="button"
 >Call to action</button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-display-lg" type="button">
+<button class="pf-v6-c-button pf-m-link pf-m-display-lg" type="button">
   Call to action
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-arrow-right" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-inline pf-m-display-lg"
+  class="pf-v6-c-button pf-m-link pf-m-inline pf-m-display-lg"
   type="button"
 >
   Call to action
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-arrow-right" aria-hidden="true"></i>
   </span>
 </button>
@@ -1537,37 +1537,37 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 <strong>disabled</strong>
 <br />
 <button
-  class="pf-v5-c-button pf-m-primary pf-m-display-lg"
+  class="pf-v6-c-button pf-m-primary pf-m-display-lg"
   type="button"
   disabled
 >Call to action</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-display-lg"
+  class="pf-v6-c-button pf-m-secondary pf-m-display-lg"
   type="button"
   disabled
 >Call to action</button>
 
 <button
-  class="pf-v5-c-button pf-m-tertiary pf-m-display-lg"
+  class="pf-v6-c-button pf-m-tertiary pf-m-display-lg"
   type="button"
   disabled
 >Call to action</button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-display-lg" type="button" disabled>
+<button class="pf-v6-c-button pf-m-link pf-m-display-lg" type="button" disabled>
   Call to action
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-arrow-right" aria-hidden="true"></i>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-inline pf-m-display-lg"
+  class="pf-v6-c-button pf-m-link pf-m-inline pf-m-display-lg"
   type="button"
   disabled
 >
   Call to action
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <span class="pf-v6-c-button__icon pf-m-end">
     <i class="fas fa-arrow-right" aria-hidden="true"></i>
   </span>
 </button>
@@ -1578,62 +1578,62 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 
 ```html
 <button
-  class="pf-v5-c-button pf-m-primary pf-m-progress"
+  class="pf-v6-c-button pf-m-primary pf-m-progress"
   type="button"
 >Primary loader</button>
 
 <button
-  class="pf-v5-c-button pf-m-primary pf-m-in-progress pf-m-progress"
+  class="pf-v6-c-button pf-m-primary pf-m-in-progress pf-m-progress"
   type="button"
 >
-  <span class="pf-v5-c-button__progress">
+  <span class="pf-v6-c-button__progress">
     <svg
-      class="pf-v5-c-spinner pf-m-md"
+      class="pf-v6-c-spinner pf-m-md"
       role="progressbar"
       viewBox="0 0 100 100"
       aria-label="Loading..."
     >
-      <circle class="pf-v5-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
+      <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
     </svg>
   </span>
   Primary loading
 </button>
 <br />
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-progress"
+  class="pf-v6-c-button pf-m-secondary pf-m-progress"
   type="button"
 >Secondary loader</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-in-progress pf-m-progress"
+  class="pf-v6-c-button pf-m-secondary pf-m-in-progress pf-m-progress"
   type="button"
 >
-  <span class="pf-v5-c-button__progress">
+  <span class="pf-v6-c-button__progress">
     <svg
-      class="pf-v5-c-spinner pf-m-md"
+      class="pf-v6-c-spinner pf-m-md"
       role="progressbar"
       viewBox="0 0 100 100"
       aria-label="Loading..."
     >
-      <circle class="pf-v5-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
+      <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
     </svg>
   </span>
   Secondary loading
 </button>
 <br />
-<button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Upload">
+<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Upload">
   <i class="fas fa-upload" aria-hidden="true"></i>
 </button>
 
-<button class="pf-v5-c-button pf-m-plain pf-m-in-progress" type="button">
-  <span class="pf-v5-c-button__progress">
+<button class="pf-v6-c-button pf-m-plain pf-m-in-progress" type="button">
+  <span class="pf-v6-c-button__progress">
     <svg
-      class="pf-v5-c-spinner pf-m-md"
+      class="pf-v6-c-spinner pf-m-md"
       role="progressbar"
       viewBox="0 0 100 100"
       aria-label="Uploading..."
     >
-      <circle class="pf-v5-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
+      <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
     </svg>
   </span>
 
@@ -1641,22 +1641,22 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 </button>
 <br />
 <button
-  class="pf-v5-c-button pf-m-link pf-m-progress pf-m-inline"
+  class="pf-v6-c-button pf-m-link pf-m-progress pf-m-inline"
   type="button"
 >Inline loader</button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-in-progress pf-m-progress pf-m-inline"
+  class="pf-v6-c-button pf-m-link pf-m-in-progress pf-m-progress pf-m-inline"
   type="button"
 >
-  <span class="pf-v5-c-button__progress">
+  <span class="pf-v6-c-button__progress">
     <svg
-      class="pf-v5-c-spinner pf-m-inline"
+      class="pf-v6-c-spinner pf-m-inline"
       role="progressbar"
       viewBox="0 0 100 100"
       aria-label="Loading..."
     >
-      <circle class="pf-v5-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
+      <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
     </svg>
   </span>
   Inline loading
@@ -1668,92 +1668,92 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 
 ```html isBeta
 <button
-  class="pf-v5-c-button pf-m-primary"
+  class="pf-v6-c-button pf-m-primary"
   type="button"
   aria-label="View 7 issues"
 >
   View issues
-  <span class="pf-v5-c-button__count">
-    <span class="pf-v5-c-badge pf-m-unread">7</span>
+  <span class="pf-v6-c-button__count">
+    <span class="pf-v6-c-badge pf-m-unread">7</span>
   </span>
 </button>
 <button
-  class="pf-v5-c-button pf-m-primary"
+  class="pf-v6-c-button pf-m-primary"
   type="button"
   aria-label="View 7 issues"
 >
   View issues
-  <span class="pf-v5-c-button__count">
-    <span class="pf-v5-c-badge pf-m-read">7</span>
+  <span class="pf-v6-c-button__count">
+    <span class="pf-v6-c-badge pf-m-read">7</span>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-link"
+  class="pf-v6-c-button pf-m-link"
   type="button"
   aria-label="View 7 issues"
 >
   View issues
-  <span class="pf-v5-c-button__count">
-    <span class="pf-v5-c-badge pf-m-unread">7</span>
+  <span class="pf-v6-c-button__count">
+    <span class="pf-v6-c-badge pf-m-unread">7</span>
   </span>
 </button>
 <button
-  class="pf-v5-c-button pf-m-link"
+  class="pf-v6-c-button pf-m-link"
   type="button"
   aria-label="View 7 issues"
 >
   View issues
-  <span class="pf-v5-c-button__count">
-    <span class="pf-v5-c-badge pf-m-read">7</span>
+  <span class="pf-v6-c-button__count">
+    <span class="pf-v6-c-badge pf-m-read">7</span>
   </span>
 </button>
 <br />
 <strong>disabled</strong>
 <br />
 <button
-  class="pf-v5-c-button pf-m-primary"
+  class="pf-v6-c-button pf-m-primary"
   type="button"
   disabled
   aria-label="View 7 issues"
 >
   View issues
-  <span class="pf-v5-c-button__count">
-    <span class="pf-v5-c-badge pf-m-unread">7</span>
+  <span class="pf-v6-c-button__count">
+    <span class="pf-v6-c-badge pf-m-unread">7</span>
   </span>
 </button>
 <button
-  class="pf-v5-c-button pf-m-primary"
+  class="pf-v6-c-button pf-m-primary"
   type="button"
   disabled
   aria-label="View 7 issues"
 >
   View issues
-  <span class="pf-v5-c-button__count">
-    <span class="pf-v5-c-badge pf-m-read">7</span>
+  <span class="pf-v6-c-button__count">
+    <span class="pf-v6-c-badge pf-m-read">7</span>
   </span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-link"
+  class="pf-v6-c-button pf-m-link"
   type="button"
   disabled
   aria-label="View 7 issues"
 >
   View issues
-  <span class="pf-v5-c-button__count">
-    <span class="pf-v5-c-badge pf-m-unread">7</span>
+  <span class="pf-v6-c-button__count">
+    <span class="pf-v6-c-badge pf-m-unread">7</span>
   </span>
 </button>
 <button
-  class="pf-v5-c-button pf-m-link"
+  class="pf-v6-c-button pf-m-link"
   type="button"
   disabled
   aria-label="View 7 issues"
 >
   View issues
-  <span class="pf-v5-c-button__count">
-    <span class="pf-v5-c-badge pf-m-read">7</span>
+  <span class="pf-v6-c-button__count">
+    <span class="pf-v6-c-badge pf-m-read">7</span>
   </span>
 </button>
 
@@ -1764,7 +1764,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 ```html
 For when a plain/icon button is placed inline with text
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+  class="pf-v6-c-button pf-m-plain pf-m-no-padding"
   type="button"
   aria-label="More info"
 >
@@ -1779,17 +1779,17 @@ For when a plain/icon button is placed inline with text
 ```html
 <strong>Read</strong>
 <br />
-<button class="pf-v5-c-button pf-m-stateful pf-m-read" type="button">
+<button class="pf-v6-c-button pf-m-stateful pf-m-read" type="button">
   <i class="fas fa-bell" aria-hidden="true"></i> 10
-  <span class="pf-v5-screen-reader">items</span>
+  <span class="pf-v6-screen-reader">items</span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-stateful pf-m-read pf-m-clicked"
+  class="pf-v6-c-button pf-m-stateful pf-m-read pf-m-clicked"
   type="button"
 >
   <i class="fas fa-bell" aria-hidden="true"></i> 10
-  <span class="pf-v5-screen-reader">items</span>
+  <span class="pf-v6-screen-reader">items</span>
 </button>
 
 <br />
@@ -1797,17 +1797,17 @@ For when a plain/icon button is placed inline with text
 
 <strong>Unread</strong>
 <br />
-<button class="pf-v5-c-button pf-m-stateful pf-m-unread" type="button">
+<button class="pf-v6-c-button pf-m-stateful pf-m-unread" type="button">
   <i class="fas fa-bell" aria-hidden="true"></i> 10
-  <span class="pf-v5-screen-reader">unread items</span>
+  <span class="pf-v6-screen-reader">unread items</span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-stateful pf-m-unread pf-m-clicked"
+  class="pf-v6-c-button pf-m-stateful pf-m-unread pf-m-clicked"
   type="button"
 >
   <i class="fas fa-bell" aria-hidden="true"></i> 10
-  <span class="pf-v5-screen-reader">unread items</span>
+  <span class="pf-v6-screen-reader">unread items</span>
 </button>
 
 <br />
@@ -1815,17 +1815,17 @@ For when a plain/icon button is placed inline with text
 
 <strong>Attention</strong>
 <br />
-<button class="pf-v5-c-button pf-m-stateful pf-m-attention" type="button">
+<button class="pf-v6-c-button pf-m-stateful pf-m-attention" type="button">
   <i class="fas fa-bell" aria-hidden="true"></i> 10
-  <span class="pf-v5-screen-reader">unread items, needs attention</span>
+  <span class="pf-v6-screen-reader">unread items, needs attention</span>
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-stateful pf-m-attention pf-m-clicked"
+  class="pf-v6-c-button pf-m-stateful pf-m-attention pf-m-clicked"
   type="button"
 >
   <i class="fas fa-bell" aria-hidden="true"></i> 10
-  <span class="pf-v5-screen-reader">unread items, needs attention</span>
+  <span class="pf-v6-screen-reader">unread items, needs attention</span>
 </button>
 
 ```