Adds content to button react examples

packages/react-core/src/components/Button/examples/Button.md

@@ -16,68 +16,99 @@ import { Link } from '@reach/router';
 
 ## Examples
 
-### Variations
+### Variant examples
+
+PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the `variant` property.
 
 ```ts file="./ButtonVariations.tsx"
 ```
 
-### Disabled
+| Variant | Description|
+| --- | ---|
+| Primary | Primary buttons are the most visually prominent variant. Use for the most important call to action.|
+| Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons. |
+| Tertiary | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons.  |
+| Danger | Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the `isDanger` property to apply similar styling. |
+| Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
+| Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
+| Plain | Plain buttons have no styling and are intended to be labeled with icons. |
+| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](https://www.patternfly.org/v4/components/input-group). | 
+
+### Disabled buttons
+
+To indicate that an action is currently unavailable, all button variations can be disabled using the `isDisabled` property.
 
 ```ts file="./ButtonDisabled.tsx"
 ```
 
-### Aria disabled
+### Small buttons
 
-```ts file="./ButtonAriaDisabled.tsx"
+To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `isSmall` property.
+
+```ts file="./ButtonSmall.tsx"
 ```
 
-### Aria disabled button with tooltip
+### Call to action (CTA) buttons
 
-```ts file="./ButtonAriaDisabledTooltip.tsx"
+CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `isLarge` property. 
+
+```ts file="./ButtonCallToAction.tsx"
 ```
 
-### Aria disabled link as button with tooltip
+### Block level buttons
 
-```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
+Block level buttons span the full width of the parent element and can be enabled using the `isBlock` property.
+
+```ts file="./ButtonBlock.tsx"
+```
+
+### Progress indicators
+
+Progress indicators can be added to buttons to identify that an action is in progress after a click. 
+
+```ts file="./ButtonProgress.tsx"
 ```
 
 ### Links as buttons
 
+Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use `component="a"` and an `href` property to designate the button's target link.
+
 ```ts file="./ButtonLinks.tsx"
 ```
 
 ### Inline link as span
 
+Inline links should use `component="span"` and the `isInline` property to wrap inline with surrounding text.
+
 ```ts file="./ButtonInlineSpanLink.tsx"
 ```
 
-### Block level
-
-```ts file="./ButtonBlock.tsx"
-```
+### Router link
 
-### Types
+Router links can be used for in-app linking in React environments to prevent page reloading.
 
-```ts file="./ButtonTypes.tsx"
+```ts file="./ButtonRouterLink.tsx"
 ```
 
-### Small
+### Aria-disabled examples
 
-```ts file="./ButtonSmall.tsx"
-```
+[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.
 
-### Call to action
+Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the `isAriaDisabled` property.
 
-```ts file="./ButtonCallToAction.tsx"
+```ts file="./ButtonAriaDisabled.tsx"
 ```
 
-### Progress
+### Aria-disabled with tooltip
 
-```ts file="./ButtonProgress.tsx"
+Unlike normal disabled buttons, aria-disabled buttons can support tooltips.
+
+```ts file="./ButtonAriaDisabledTooltip.tsx"
 ```
 
-### Router link
+### Aria-disabled link as button with tooltip
 
-```ts file="./ButtonRouterLink.tsx"
-```
+Aria-disabled buttons can operate as links, which also support tooltips.
 
+```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
+```

packages/react-core/src/demos/Button.md

@@ -5,10 +5,14 @@ section: components
 
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
-## Demos
+## Demos 
 
 ### Progress button
 
+The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. 
+
+Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
+
 ```ts
 import React from 'react';
 import { Form, FormGroup, ActionGroup, InputGroup, TextInput, Button } from '@patternfly/react-core';