@patternfly/patternfly 6.0.0-alpha.82 → 6.0.0-alpha.84

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

@@ -14,7 +14,7 @@ cssPrefix: pf-v5-c-button
 <button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger"
+  class="pf-v5-c-button pf-m-danger pf-m-secondary"
   type="button"
 >Secondary danger</button>
 
@@ -29,9 +29,9 @@ cssPrefix: pf-v5-c-button
 
 <button class="pf-v5-c-button pf-m-link" type="button">Link</button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-link" type="button">Link danger</button>
+<button class="pf-v5-c-button pf-m-link pf-m-danger" type="button">Link danger</button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">Inline link</button>
+<button class="pf-v5-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">
   <i class="fas fa-times" aria-hidden="true"></i>
@@ -70,7 +70,7 @@ cssPrefix: pf-v5-c-button
   Secondary
 </button>
 
-<button class="pf-v5-c-button pf-m-secondary pf-m-danger" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -108,14 +108,14 @@ cssPrefix: pf-v5-c-button
   Link
 </button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-link" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link danger
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-inline" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -164,7 +164,7 @@ cssPrefix: pf-v5-c-button
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-secondary pf-m-danger" type="button">
+<button class="pf-v5-c-button pf-m-danger pf-m-secondary" type="button">
   Secondary danger
   <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -202,14 +202,14 @@ cssPrefix: pf-v5-c-button
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-link" type="button">
+<button class="pf-v5-c-button pf-m-link pf-m-danger" type="button">
   Link danger
   <span class="pf-v5-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-inline" type="button">
+<button class="pf-v5-c-button pf-m-inline pf-m-link" type="button">
   Inline link
   <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -243,41 +243,41 @@ cssPrefix: pf-v5-c-button
 ### Clicked buttons
 
 ```html
-<button class="pf-v5-c-button pf-m-primary pf-m-clicked" type="button">Primary</button>
+<button class="pf-v5-c-button pf-m-clicked pf-m-primary" type="button">Primary</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-secondary"
   type="button"
 >Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-danger pf-m-secondary"
   type="button"
 >Secondary danger</button>
 
-<button class="pf-v5-c-button pf-m-tertiary pf-m-clicked" type="button">Tertiary</button>
+<button class="pf-v5-c-button pf-m-clicked pf-m-tertiary" type="button">Tertiary</button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-clicked" type="button">Danger</button>
+<button class="pf-v5-c-button pf-m-clicked pf-m-danger" type="button">Danger</button>
 
-<button class="pf-v5-c-button pf-m-warning pf-m-clicked" type="button">Warning</button>
+<button class="pf-v5-c-button pf-m-clicked pf-m-warning" type="button">Warning</button>
 
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link pf-m-clicked" type="button">Link</button>
+<button class="pf-v5-c-button pf-m-clicked pf-m-link" type="button">Link</button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-link pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-link pf-m-danger"
   type="button"
 >Link danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-inline pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-inline pf-m-link"
   type="button"
 >Inline link</button>
 
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-clicked"
+  class="pf-v5-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-control pf-m-clicked" type="button">Control</button>
+<button class="pf-v5-c-button pf-m-clicked pf-m-control" type="button">Control</button>
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -303,14 +303,14 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon</strong>
 </div>
-<button class="pf-v5-c-button pf-m-primary pf-m-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-primary" type="button">
   <span class="pf-v5-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 pf-m-clicked" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -318,7 +318,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-danger pf-m-secondary"
   type="button"
 >
   <span class="pf-v5-c-button__icon pf-m-start">
@@ -327,21 +327,21 @@ cssPrefix: pf-v5-c-button
   Secondary danger
 </button>
 
-<button class="pf-v5-c-button pf-m-tertiary pf-m-clicked" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Tertiary
 </button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-clicked" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Danger
 </button>
 
-<button class="pf-v5-c-button pf-m-warning pf-m-clicked" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -351,21 +351,21 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link pf-m-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-link" type="button">
   <span class="pf-v5-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-danger pf-m-link pf-m-clicked" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link danger
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-clicked" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -373,7 +373,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -383,7 +383,7 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control pf-m-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-control" type="button">
   <span class="pf-v5-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -391,7 +391,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -404,14 +404,14 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon end</strong>
 </div>
-<button class="pf-v5-c-button pf-m-primary pf-m-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-primary" type="button">
   Primary
   <span class="pf-v5-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 pf-m-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-secondary" type="button">
   Secondary
   <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -419,7 +419,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-danger pf-m-secondary"
   type="button"
 >
   Secondary danger
@@ -428,21 +428,21 @@ cssPrefix: pf-v5-c-button
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-tertiary pf-m-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-tertiary" type="button">
   Tertiary
   <span class="pf-v5-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-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-danger" type="button">
   Danger
   <span class="pf-v5-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 pf-m-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-warning" type="button">
   Warning
   <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -452,21 +452,21 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link pf-m-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-link" type="button">
   Link
   <span class="pf-v5-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-link pf-m-clicked" type="button">
+<button class="pf-v5-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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-clicked" type="button">
+<button class="pf-v5-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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -474,7 +474,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-clicked"
+  class="pf-v5-c-button pf-m-clicked pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -484,7 +484,7 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control pf-m-clicked" type="button">
+<button class="pf-v5-c-button pf-m-clicked pf-m-control" type="button">
   Control
   <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -492,7 +492,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-clicked"
+  class="pf-v5-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-primary pf-m-small" type="button">Primary</button>
+<button class="pf-v5-c-button pf-m-small pf-m-primary" type="button">Primary</button>
 
-<button class="pf-v5-c-button pf-m-secondary pf-m-small" type="button">Secondary</button>
+<button class="pf-v5-c-button pf-m-small pf-m-secondary" type="button">Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-danger pf-m-secondary"
   type="button"
 >Secondary danger</button>
 
-<button class="pf-v5-c-button pf-m-tertiary pf-m-small" type="button">Tertiary</button>
+<button class="pf-v5-c-button pf-m-small pf-m-tertiary" type="button">Tertiary</button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-small" type="button">Danger</button>
+<button class="pf-v5-c-button pf-m-small pf-m-danger" type="button">Danger</button>
 
-<button class="pf-v5-c-button pf-m-warning pf-m-small" type="button">Warning</button>
+<button class="pf-v5-c-button pf-m-small pf-m-warning" type="button">Warning</button>
 
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link pf-m-small" type="button">Link</button>
+<button class="pf-v5-c-button pf-m-small pf-m-link" type="button">Link</button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-link pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-link pf-m-danger"
   type="button"
 >Link danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-inline pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-inline pf-m-link"
   type="button"
 >Inline link</button>
 
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-small"
+  class="pf-v5-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-control pf-m-small" type="button">Control</button>
+<button class="pf-v5-c-button pf-m-small pf-m-control" type="button">Control</button>
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -561,14 +561,14 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon</strong>
 </div>
-<button class="pf-v5-c-button pf-m-primary pf-m-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-primary" type="button">
   <span class="pf-v5-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 pf-m-small" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -576,7 +576,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-danger pf-m-secondary"
   type="button"
 >
   <span class="pf-v5-c-button__icon pf-m-start">
@@ -585,21 +585,21 @@ cssPrefix: pf-v5-c-button
   Secondary danger
 </button>
 
-<button class="pf-v5-c-button pf-m-tertiary pf-m-small" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Tertiary
 </button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-small" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Danger
 </button>
 
-<button class="pf-v5-c-button pf-m-warning pf-m-small" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -609,21 +609,21 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link pf-m-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-link" type="button">
   <span class="pf-v5-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-danger pf-m-link pf-m-small" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link danger
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-small" type="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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -631,7 +631,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -641,7 +641,7 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control pf-m-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-control" type="button">
   <span class="pf-v5-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -649,7 +649,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -662,14 +662,14 @@ cssPrefix: pf-v5-c-button
 <div>
   <strong>Icon end</strong>
 </div>
-<button class="pf-v5-c-button pf-m-primary pf-m-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-primary" type="button">
   Primary
   <span class="pf-v5-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 pf-m-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-secondary" type="button">
   Secondary
   <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -677,7 +677,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-danger pf-m-secondary"
   type="button"
 >
   Secondary danger
@@ -686,21 +686,21 @@ cssPrefix: pf-v5-c-button
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-tertiary pf-m-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-tertiary" type="button">
   Tertiary
   <span class="pf-v5-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-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-danger" type="button">
   Danger
   <span class="pf-v5-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 pf-m-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-warning" type="button">
   Warning
   <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -710,21 +710,21 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-link pf-m-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-link" type="button">
   Link
   <span class="pf-v5-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-link pf-m-small" type="button">
+<button class="pf-v5-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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-small" type="button">
+<button class="pf-v5-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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -732,7 +732,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-plain"
   type="button"
   aria-label="Remove"
 >
@@ -742,7 +742,7 @@ cssPrefix: pf-v5-c-button
 <br />
 <br />
 
-<button class="pf-v5-c-button pf-m-control pf-m-small" type="button">
+<button class="pf-v5-c-button pf-m-small pf-m-control" type="button">
   Control
   <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -750,7 +750,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-small"
+  class="pf-v5-c-button pf-m-small pf-m-control"
   type="button"
   aria-label="Copy input"
 >
@@ -767,7 +767,7 @@ cssPrefix: pf-v5-c-button
 <button class="pf-v5-c-button pf-m-secondary" type="button" disabled>Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger"
+  class="pf-v5-c-button pf-m-danger pf-m-secondary"
   type="button"
   disabled
 >Secondary danger</button>
@@ -784,13 +784,13 @@ cssPrefix: pf-v5-c-button
 <button class="pf-v5-c-button pf-m-link" type="button" disabled>Link</button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-link"
+  class="pf-v5-c-button pf-m-link pf-m-danger"
   type="button"
   disabled
 >Link danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-inline"
+  class="pf-v5-c-button pf-m-inline pf-m-link"
   type="button"
   disabled
 >Inline link</button>
@@ -839,7 +839,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger"
+  class="pf-v5-c-button pf-m-danger pf-m-secondary"
   type="button"
   disabled
 >
@@ -880,14 +880,14 @@ cssPrefix: pf-v5-c-button
   Link
 </button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-link" type="button" disabled>
+<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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
   Link danger
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-inline" type="button" disabled>
+<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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
@@ -943,7 +943,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger"
+  class="pf-v5-c-button pf-m-danger pf-m-secondary"
   type="button"
   disabled
 >
@@ -984,14 +984,14 @@ cssPrefix: pf-v5-c-button
   </span>
 </button>
 
-<button class="pf-v5-c-button pf-m-danger pf-m-link" type="button" disabled>
+<button class="pf-v5-c-button pf-m-link pf-m-danger" type="button" disabled>
   Link danger
   <span class="pf-v5-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-inline" type="button" disabled>
+<button class="pf-v5-c-button pf-m-inline pf-m-link" type="button" disabled>
   Inline link
   <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
@@ -1032,37 +1032,37 @@ cssPrefix: pf-v5-c-button
 
 ```html
 <button
-  class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-primary"
   type="button"
   aria-disabled="true"
 >Primary</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-secondary"
   type="button"
   aria-disabled="true"
 >Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-aria-disabled"
+  class="pf-v5-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-tertiary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-tertiary"
   type="button"
   aria-disabled="true"
 >Tertiary</button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger"
   type="button"
   aria-disabled="true"
 >Danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-warning pf-m-aria-disabled"
+  class="pf-v5-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-link pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-link"
   type="button"
   aria-disabled="true"
 >Link</button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-link pf-m-aria-disabled"
+  class="pf-v5-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-link pf-m-inline pf-m-aria-disabled"
+  class="pf-v5-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-plain pf-m-aria-disabled"
+  class="pf-v5-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-control pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
 >Control</button>
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
   aria-label="Copy input"
@@ -1122,7 +1122,7 @@ cssPrefix: pf-v5-c-button
   <strong>Icon</strong>
 </div>
 <button
-  class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-primary"
   type="button"
   aria-disabled="true"
 >
@@ -1133,7 +1133,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-secondary"
   type="button"
   aria-disabled="true"
 >
@@ -1144,7 +1144,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
   type="button"
   aria-disabled="true"
 >
@@ -1155,7 +1155,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-tertiary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-tertiary"
   type="button"
   aria-disabled="true"
 >
@@ -1166,7 +1166,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger"
   type="button"
   aria-disabled="true"
 >
@@ -1177,7 +1177,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-warning pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-warning"
   type="button"
   aria-disabled="true"
 >
@@ -1191,7 +1191,7 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-link"
   type="button"
   aria-disabled="true"
 >
@@ -1202,7 +1202,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-link pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
   type="button"
   aria-disabled="true"
 >
@@ -1213,7 +1213,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-inline pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
   type="button"
   aria-disabled="true"
 >
@@ -1224,7 +1224,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-plain"
   type="button"
   aria-disabled="true"
   aria-label="Remove"
@@ -1236,7 +1236,7 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
 >
@@ -1247,7 +1247,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
   aria-label="Copy input"
@@ -1262,7 +1262,7 @@ cssPrefix: pf-v5-c-button
   <strong>Icon end</strong>
 </div>
 <button
-  class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-primary"
   type="button"
   aria-disabled="true"
 >
@@ -1273,7 +1273,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-secondary"
   type="button"
   aria-disabled="true"
 >
@@ -1284,7 +1284,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
   type="button"
   aria-disabled="true"
 >
@@ -1295,7 +1295,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-tertiary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-tertiary"
   type="button"
   aria-disabled="true"
 >
@@ -1306,7 +1306,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger"
   type="button"
   aria-disabled="true"
 >
@@ -1317,7 +1317,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-warning pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-warning"
   type="button"
   aria-disabled="true"
 >
@@ -1331,7 +1331,7 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-link"
   type="button"
   aria-disabled="true"
 >
@@ -1342,7 +1342,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-danger pf-m-link pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
   type="button"
   aria-disabled="true"
 >
@@ -1353,7 +1353,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-inline pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
   type="button"
   aria-disabled="true"
 >
@@ -1364,7 +1364,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-plain"
   type="button"
   aria-disabled="true"
   aria-label="Remove"
@@ -1376,7 +1376,7 @@ cssPrefix: pf-v5-c-button
 <br />
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
 >
@@ -1387,7 +1387,7 @@ cssPrefix: pf-v5-c-button
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-control pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
   aria-label="Copy input"
@@ -1455,7 +1455,7 @@ cssPrefix: pf-v5-c-button
 <strong>Plain no padding</strong>
 <br />
 <span
-  class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+  class="pf-v5-c-button pf-m-no-padding pf-m-plain"
   type="button"
   role="button"
   tabindex="0"
@@ -1578,12 +1578,12 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 
 ```html
 <button
-  class="pf-v5-c-button pf-m-progress pf-m-primary"
+  class="pf-v5-c-button pf-m-primary pf-m-progress"
   type="button"
 >Primary loader</button>
 
 <button
-  class="pf-v5-c-button pf-m-progress pf-m-in-progress pf-m-primary"
+  class="pf-v5-c-button pf-m-primary pf-m-in-progress pf-m-progress"
   type="button"
 >
   <span class="pf-v5-c-button__progress">
@@ -1600,12 +1600,12 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 </button>
 <br />
 <button
-  class="pf-v5-c-button pf-m-progress pf-m-secondary"
+  class="pf-v5-c-button pf-m-secondary pf-m-progress"
   type="button"
 >Secondary loader</button>
 
 <button
-  class="pf-v5-c-button pf-m-progress pf-m-in-progress pf-m-secondary"
+  class="pf-v5-c-button pf-m-secondary pf-m-in-progress pf-m-progress"
   type="button"
 >
   <span class="pf-v5-c-button__progress">
@@ -1625,7 +1625,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
   <i class="fas fa-upload" aria-hidden="true"></i>
 </button>
 
-<button class="pf-v5-c-button pf-m-in-progress pf-m-plain" type="button">
+<button class="pf-v5-c-button pf-m-plain pf-m-in-progress" type="button">
   <span class="pf-v5-c-button__progress">
     <svg
       class="pf-v5-c-spinner pf-m-md"
@@ -1641,12 +1641,12 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 </button>
 <br />
 <button
-  class="pf-v5-c-button pf-m-inline pf-m-progress pf-m-link"
+  class="pf-v5-c-button pf-m-link pf-m-progress pf-m-inline"
   type="button"
 >Inline loader</button>
 
 <button
-  class="pf-v5-c-button pf-m-inline pf-m-progress pf-m-in-progress pf-m-link"
+  class="pf-v5-c-button pf-m-link pf-m-in-progress pf-m-progress pf-m-inline"
   type="button"
 >
   <span class="pf-v5-c-button__progress">