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

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>
 
@@ -26,18 +26,86 @@ cssPrefix: pf-v5-c-button
 
 <br />
 <br />
-<button class="pf-v5-c-button pf-m-link" type="button">
+
+<button class="pf-v5-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-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>
+</button>
+
+<br />
+<br />
+
+<button class="pf-v5-c-button pf-m-control" type="button">Control</button>
+
+<button
+  class="pf-v5-c-button pf-m-control"
+  type="button"
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
-  Link
+  Primary
+</button>
+
+<button class="pf-v5-c-button 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>
+  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">
+    <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">
+    <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">
+    <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">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+  Warning
+</button>
+
+<br />
+<br />
+
 <button class="pf-v5-c-button pf-m-link" type="button">
-  Link
-  <span class="pf-v5-c-button__icon pf-m-end">
+  <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-link pf-m-danger" type="button">
@@ -47,25 +115,26 @@ cssPrefix: pf-v5-c-button
   Link danger
 </button>
 
-<button class="pf-v5-c-button pf-m-inline pf-m-link" type="button">Inline link</button>
-<br />
-<br />
-<span>Default plain button:</span>
-<button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
-  <i class="fas fa-times" aria-hidden="true"></i>
+<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>
+  Inline link
 </button>
-<br />
-<span>No padding plain button:</span>
-<button
-  class="pf-v5-c-button pf-m-plain pf-m-no-padding"
-  type="button"
-  aria-label="Remove"
->
+
+<button class="pf-v5-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-v5-c-button 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>
+  Control
+</button>
 
 <button
   class="pf-v5-c-button pf-m-control"
@@ -75,206 +144,1256 @@ cssPrefix: pf-v5-c-button
   <i class="fas fa-copy" aria-hidden="true"></i>
 </button>
 
-```
+<br />
+<br />
 
-### Small buttons
+<div>
+  <strong>Icon end</strong>
+</div>
+<button class="pf-v5-c-button 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>
 
-```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-secondary" type="button">
+  Secondary
+  <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">Secondary</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>
+  </span>
+</button>
 
-<button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger pf-m-small"
-  type="button"
->Secondary danger</button>
+<button class="pf-v5-c-button 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-tertiary pf-m-small" type="button">Tertiary</button>
+<button class="pf-v5-c-button 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-danger pf-m-small" type="button">Danger</button>
+<button class="pf-v5-c-button 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>
+  </span>
+</button>
 
-<button class="pf-v5-c-button pf-m-warning pf-m-small" type="button">Warning</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-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-link pf-m-danger pf-m-small" 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-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>
+  </span>
+</button>
+
+<button class="pf-v5-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
+  <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-inline pf-m-link pf-m-small"
+  class="pf-v5-c-button pf-m-control"
   type="button"
->Inline link</button>
-
-<button class="pf-v5-c-button pf-m-control pf-m-small" type="button">Control</button>
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
 
 ```
 
-### Disabled
+### Clicked buttons
 
 ```html
+<button class="pf-v5-c-button pf-m-clicked pf-m-primary" type="button">Primary</button>
+
 <button
-  class="pf-v5-c-button pf-m-primary"
+  class="pf-v5-c-button pf-m-clicked pf-m-secondary"
   type="button"
-  disabled
->Primary disabled</button>
+>Secondary</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary"
+  class="pf-v5-c-button pf-m-clicked pf-m-danger pf-m-secondary"
   type="button"
-  disabled
->Secondary disabled</button>
+>Secondary danger</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-clicked pf-m-danger" type="button">Danger</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-clicked pf-m-link" type="button">Link</button>
 
 <button
-  class="pf-v5-c-button pf-m-secondary pf-m-danger"
+  class="pf-v5-c-button pf-m-clicked pf-m-link pf-m-danger"
   type="button"
-  disabled
->Secondary danger disabled</button>
+>Link danger</button>
 
 <button
-  class="pf-v5-c-button pf-m-tertiary"
+  class="pf-v5-c-button pf-m-clicked pf-m-inline pf-m-link"
   type="button"
-  disabled
->Tertiary disabled</button>
+>Inline link</button>
 
 <button
-  class="pf-v5-c-button pf-m-danger"
+  class="pf-v5-c-button pf-m-clicked pf-m-plain"
   type="button"
-  disabled
->Danger disabled</button>
+  aria-label="Remove"
+>
+  <i class="fas fa-times" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<button class="pf-v5-c-button pf-m-clicked pf-m-control" type="button">Control</button>
 
 <button
-  class="pf-v5-c-button pf-m-warning"
+  class="pf-v5-c-button pf-m-clicked pf-m-control"
   type="button"
-  disabled
->Warning disabled</button>
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
 
-<button class="pf-v5-c-button pf-m-link" type="button" disabled>
+<br />
+<br />
+
+<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">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
-  Link disabled
+  Primary
 </button>
 
-<button class="pf-v5-c-button pf-m-link pf-m-danger" type="button" disabled>
+<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>
+  Secondary
+</button>
+
+<button
+  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">
+    <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">
+    <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">
+    <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">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+  Warning
+</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">
+    <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">
+    <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">
+    <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"
+  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-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>
+  Control
+</button>
+
+<button
+  class="pf-v5-c-button pf-m-clicked pf-m-control"
+  type="button"
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<div>
+  <strong>Icon end</strong>
+</div>
+<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-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>
+  </span>
+</button>
+
+<button
+  class="pf-v5-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">
+    <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">
+  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-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-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>
+  </span>
+</button>
+
+<br />
+<br />
+
+<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-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-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>
+  </span>
+</button>
+
+<button
+  class="pf-v5-c-button pf-m-clicked 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-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>
+  </span>
+</button>
+
+<button
+  class="pf-v5-c-button pf-m-clicked pf-m-control"
+  type="button"
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+```
+
+### Small buttons
+
+```html
+<button class="pf-v5-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-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-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-v5-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-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-small pf-m-inline pf-m-link"
+  type="button"
+>Inline link</button>
+
+<button
+  class="pf-v5-c-button pf-m-small 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-small pf-m-control" type="button">Control</button>
+
+<button
+  class="pf-v5-c-button pf-m-small pf-m-control"
+  type="button"
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<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">
+    <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">
+    <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"
+  type="button"
+>
+  <span class="pf-v5-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">
+    <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">
+    <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">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+  Warning
+</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">
+    <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">
+    <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">
+    <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"
+  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-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>
+  Control
+</button>
+
+<button
+  class="pf-v5-c-button pf-m-small pf-m-control"
+  type="button"
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<div>
+  <strong>Icon end</strong>
+</div>
+<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-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>
+  </span>
+</button>
+
+<button
+  class="pf-v5-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">
+    <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">
+  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-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-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>
+  </span>
+</button>
+
+<br />
+<br />
+
+<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-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-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>
+  </span>
+</button>
+
+<button
+  class="pf-v5-c-button pf-m-small 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-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>
+  </span>
+</button>
+
+<button
+  class="pf-v5-c-button pf-m-small pf-m-control"
+  type="button"
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+```
+
+### Disabled
+
+```html
+<button class="pf-v5-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-v5-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-v5-c-button pf-m-danger" type="button" disabled>Danger</button>
+
+<button class="pf-v5-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-v5-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"
+  type="button"
+  disabled
+>Inline link</button>
+
+<button
+  class="pf-v5-c-button pf-m-plain"
+  type="button"
+  disabled
+  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" disabled>Control</button>
+
+<button
+  class="pf-v5-c-button pf-m-control"
+  type="button"
+  disabled
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<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">
+    <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">
+    <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"
+  disabled
+>
+  <span class="pf-v5-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">
+    <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">
+    <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">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+  Warning
+</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">
+    <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">
+    <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">
+    <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"
+  disabled
+  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" disabled>
+  <span class="pf-v5-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"
+  type="button"
+  disabled
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<div>
+  <strong>Icon end</strong>
+</div>
+<button class="pf-v5-c-button pf-m-primary" type="button" disabled>
+  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" type="button" disabled>
+  Secondary
+  <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-secondary"
+  type="button"
+  disabled
+>
+  Secondary 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-tertiary" type="button" disabled>
+  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" type="button" disabled>
+  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" type="button" disabled>
+  Warning
+  <span class="pf-v5-c-button__icon pf-m-end">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</button>
+
+<br />
+<br />
+
+<button class="pf-v5-c-button pf-m-link" type="button" disabled>
+  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-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-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>
+  </span>
+</button>
+
+<button
+  class="pf-v5-c-button pf-m-plain"
+  type="button"
+  disabled
+  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" disabled>
+  Control
+  <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-control"
+  type="button"
+  disabled
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+```
+
+### Aria-disabled
+
+```html
+<button
+  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-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"
+  type="button"
+  aria-disabled="true"
+>Secondary danger</button>
+
+<button
+  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-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"
+  type="button"
+  aria-disabled="true"
+>Warning</button>
+
+<br />
+<br />
+
+<button
+  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-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"
+  type="button"
+  aria-disabled="true"
+>Inline link</button>
+
+<button
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-plain"
+  type="button"
+  aria-disabled="true"
+  aria-label="Remove"
+>
+  <i class="fas fa-times" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<button
+  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-aria-disabled pf-m-control"
+  type="button"
+  aria-disabled="true"
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<div>
+  <strong>Icon</strong>
+</div>
+<button
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-primary"
+  type="button"
+  aria-disabled="true"
+>
+  <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-aria-disabled pf-m-secondary"
+  type="button"
+  aria-disabled="true"
+>
+  <span class="pf-v5-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"
+  type="button"
+  aria-disabled="true"
+>
+  <span class="pf-v5-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"
+  type="button"
+  aria-disabled="true"
+>
+  <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-aria-disabled pf-m-danger"
+  type="button"
+  aria-disabled="true"
+>
+  <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-aria-disabled pf-m-warning"
+  type="button"
+  aria-disabled="true"
+>
+  <span class="pf-v5-c-button__icon pf-m-start">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+  Warning
+</button>
+
+<br />
+<br />
+
+<button
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-link"
+  type="button"
+  aria-disabled="true"
+>
+  <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-aria-disabled pf-m-link pf-m-danger"
+  type="button"
+  aria-disabled="true"
+>
+  <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-aria-disabled pf-m-inline pf-m-link"
+  type="button"
+  aria-disabled="true"
+>
+  <span class="pf-v5-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"
+  type="button"
+  aria-disabled="true"
+  aria-label="Remove"
+>
+  <i class="fas fa-times" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
+
+<button
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
+  type="button"
+  aria-disabled="true"
+>
   <span class="pf-v5-c-button__icon pf-m-start">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
-  Link danger disabled
+  Control
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-inline"
-  type="button"
-  disabled
->Inline link disabled</button>
-
-<button
-  class="pf-v5-c-button pf-m-plain"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
   type="button"
-  aria-label="Remove"
-  disabled
+  aria-disabled="true"
+  aria-label="Copy input"
 >
-  <i class="fas fa-times" aria-hidden="true"></i>
+  <i class="fas fa-copy" aria-hidden="true"></i>
 </button>
 
+<br />
+<br />
+
+<div>
+  <strong>Icon end</strong>
+</div>
 <button
-  class="pf-v5-c-button pf-m-control"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-primary"
   type="button"
-  disabled
->Control disabled</button>
-
-```
-
-### Aria-disabled
+  aria-disabled="true"
+>
+  Primary
+  <span class="pf-v5-c-button__icon pf-m-end">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</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-secondary"
   type="button"
   aria-disabled="true"
->Primary disabled</button>
+>
+  Secondary
+  <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-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
   type="button"
   aria-disabled="true"
->Secondary disabled</button>
+>
+  Secondary 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-secondary pf-m-danger pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-tertiary"
   type="button"
   aria-disabled="true"
->Secondary danger disabled</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-tertiary pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-danger"
   type="button"
   aria-disabled="true"
->Tertiary disabled</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-danger pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-warning"
   type="button"
   aria-disabled="true"
->Danger disabled</button>
+>
+  Warning
+  <span class="pf-v5-c-button__icon pf-m-end">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</button>
+
+<br />
+<br />
 
 <button
-  class="pf-v5-c-button pf-m-warning pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-link"
   type="button"
   aria-disabled="true"
->Warning disabled</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-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"
 >
-  <span class="pf-v5-c-button__icon pf-m-start">
+  Link danger
+  <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
-  Link disabled
 </button>
 
 <button
-  class="pf-v5-c-button pf-m-link pf-m-danger pf-m-aria-disabled"
+  class="pf-v5-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">
+  Inline link
+  <span class="pf-v5-c-button__icon pf-m-end">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
-  Link danger disabled
 </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-plain"
   type="button"
   aria-disabled="true"
->Inline link disabled</button>
+  aria-label="Remove"
+>
+  <i class="fas fa-times" aria-hidden="true"></i>
+</button>
+
+<br />
+<br />
 
 <button
-  class="pf-v5-c-button pf-m-plain pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
   type="button"
-  aria-label="Remove"
   aria-disabled="true"
 >
-  <i class="fas fa-times" aria-hidden="true"></i>
+  Control
+  <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-control pf-m-aria-disabled"
+  class="pf-v5-c-button pf-m-aria-disabled pf-m-control"
   type="button"
   aria-disabled="true"
->Control disabled</button>
+  aria-label="Copy input"
+>
+  <i class="fas fa-copy" aria-hidden="true"></i>
+</button>
 
 ```
 
@@ -320,7 +1439,34 @@ cssPrefix: pf-v5-c-button
 ### Inline link as span
 
 ```html
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<strong>Plain</strong>
+<br />
+<span
+  class="pf-v5-c-button pf-m-plain"
+  type="button"
+  role="button"
+  tabindex="0"
+  aria-label="Remove"
+>
+  <i class="fas fa-times" aria-hidden="true"></i>
+</span>
+<br />
+<br />
+<strong>Plain no padding</strong>
+<br />
+<span
+  class="pf-v5-c-button pf-m-no-padding pf-m-plain"
+  type="button"
+  role="button"
+  tabindex="0"
+  aria-label="Remove"
+>
+  <i class="fas fa-times" aria-hidden="true"></i>
+</span>
+<br />
+<br />
+<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"
   type="button"
@@ -386,6 +1532,45 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
     <i class="fas fa-arrow-right" aria-hidden="true"></i>
   </span>
 </button>
+<br />
+<br />
+<strong>disabled</strong>
+<br />
+<button
+  class="pf-v5-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"
+  type="button"
+  disabled
+>Call to action</button>
+
+<button
+  class="pf-v5-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>
+  Call to action
+  <span class="pf-v5-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"
+  type="button"
+  disabled
+>
+  Call to action
+  <span class="pf-v5-c-button__icon pf-m-end">
+    <i class="fas fa-arrow-right" aria-hidden="true"></i>
+  </span>
+</button>
 
 ```
 
@@ -393,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">
@@ -415,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">
@@ -440,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"
@@ -456,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-progress pf-m-inline 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-progress pf-m-in-progress pf-m-inline 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">
@@ -479,12 +1664,80 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 
 ```
 
-### Link button with a count
+### Counts
 
 ```html isBeta
+<button
+  class="pf-v5-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>
+</button>
+<button
+  class="pf-v5-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>
+</button>
+
+<button
+  class="pf-v5-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>
+</button>
+<button
+  class="pf-v5-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>
+</button>
+<br />
+<strong>disabled</strong>
+<br />
+<button
+  class="pf-v5-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>
+</button>
+<button
+  class="pf-v5-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>
+</button>
+
 <button
   class="pf-v5-c-button pf-m-link"
   type="button"
+  disabled
   aria-label="View 7 issues"
 >
   View issues
@@ -495,6 +1748,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 <button
   class="pf-v5-c-button pf-m-link"
   type="button"
+  disabled
   aria-label="View 7 issues"
 >
   View issues
@@ -505,6 +1759,77 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 
 ```
 
+### Plain with no padding
+
+```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"
+  type="button"
+  aria-label="More info"
+>
+  <i class="fas fa-question-circle" aria-hidden="true"></i>
+</button>
+.
+
+```
+
+### Stateful
+
+```html
+<strong>Read</strong>
+<br />
+<button class="pf-v5-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>
+</button>
+
+<button
+  class="pf-v5-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>
+</button>
+
+<br />
+<br />
+
+<strong>Unread</strong>
+<br />
+<button class="pf-v5-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>
+</button>
+
+<button
+  class="pf-v5-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>
+</button>
+
+<br />
+<br />
+
+<strong>Attention</strong>
+<br />
+<button class="pf-v5-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>
+</button>
+
+<button
+  class="pf-v5-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>
+</button>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -533,7 +1858,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-button` | `<button>` |  Initiates a button. Always use it with a modifier class. **Required** |
+| `.pf-v5-c-button` | `<button>, <span>` |  Initiates a button. Always use it with a modifier class. **Required** |
 | `.pf-v5-c-button__icon` | `<span>` | Initiates a button icon. |
 | `.pf-v5-c-button__progress` | `<span>` | Initiates a button progress container. |
 | `.pf-v5-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
@@ -557,3 +1882,4 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-display-lg` | `.pf-v5-c-button`, `pf-v5-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
 | `.pf-m-progress` | `.pf-v5-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
 | `.pf-m-in-progress` | `.pf-v5-c-button` | Indicates that the button is in the in progress state. |
+| `.pf-m-stateful` | `.pf-v5-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |