docs: update button docs and stories to follow guidelines (#18674)

Author: adamalston

packages/react/src/components/Button/Button.mdx

@@ -25,7 +25,7 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
   - [Tertiary Button](#tertiary)
   - [Ghost Button](#ghost)
   - [Danger Button](#danger-button)
-  - [Icon-only Buttons](#icon-only-buttons)
+  - [Icon-only Button](#icon-only-button)
   - [Set of Buttons](#set-of-buttons)
   - [Skeleton state](#skeleton-state)
 - [Component API](#component-api)
@@ -103,8 +103,8 @@ Determining which danger button style to use will depend on the level of
 emphasis you want to give to the danger action. Destructive actions that are
 considered a required or primary step in a workflow should use the primary
 danger button style. However, if a destructive action is just one of several
-actions a user could choose from, then a lower emphasis style like the tertiary
-danger button or the ghost danger button may be more appropriate.
+actions a user could choose from, then a lower emphasis style like the danger
+tertiary button or the danger ghost button may be more appropriate.
 
 <Canvas
   of={ButtonStories.Danger}
@@ -116,7 +116,7 @@ danger button or the ghost danger button may be more appropriate.
   ]}
 />
 
-## Icon-only Buttons
+## Icon-only Button
 
 Icon buttons allow users to take actions, and make choices, with a single tap.
 Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but
@@ -256,7 +256,7 @@ variant, check out the
     <Button kind="secondary">Secondary</Button>
     <Button kind="tertiary">Tertiary </Button>
     <Button kind="danger">Danger</Button>
-    <Button kind="danger--tertiary">Danger Tertiary</Button>
+    <Button kind="danger--tertiary">Danger tertiary</Button>
     <Button kind="danger--ghost">Danger Ghost</Button>
     <Button kind="ghost">Ghost</Button>
   </div>
@@ -267,8 +267,8 @@ variant, check out the
 <Button kind="secondary">Secondary</Button>
 <Button kind="tertiary">Tertiary</Button>
 <Button kind="danger">Danger</Button>
-<Button kind="danger--tertiary">Danger Tertiary</Button>
-<Button kind="danger--ghost">Danger Ghost</Button>
+<Button kind="danger--tertiary">Danger tertiary</Button>
+<Button kind="danger--ghost">Danger ghost</Button>
 <Button kind="ghost">Ghost</Button>
 ```
 
@@ -285,7 +285,7 @@ import { Add, TrashCan } from '@carbon/react/icons';
 Once the icons are imported, you can pass them directly in to the `Button`
 component. Keep in mind, you will also need to add an `iconDescription` to help
 with screen-reader support if you use the `renderIcon` prop. If you are trying
-to render icon-only buttons, please refer to the section on the
+to render an icon-only button, please refer to the section on the
 [hasIconOnly](#button-hasicononly) prop
 
 <Unstyled>

packages/react/src/components/Button/Button.stories.js

@@ -87,11 +87,11 @@ export const Danger = (args) => {
       </Button>
       &nbsp;
       <Button kind="danger--tertiary" {...args}>
-        Tertiary Danger Button
+        Danger tertiary button
       </Button>
       &nbsp;
       <Button kind="danger--ghost" {...args}>
-        Ghost Danger Button
+        Danger ghost button
       </Button>
     </>
   );

packages/web-components/src/components/button/button.mdx

@@ -45,21 +45,21 @@ import '@carbon/web-components/es/components/button/index.js';
 <cds-button href="https://www.ibm.com"> Button </cds-button>
 ```
 
-## Danger Buttons
+## Danger Button
 
 The danger button has three different styles: primary, tertiary, and ghost.
 Determining which danger button style to use will depend on the level of
 emphasis you want to give to the danger action. Destructive actions that are
 considered a required or primary step in a workflow should use the primary
 danger button style. However, if a destructive action is just one of several
-actions a user could choose from, then a lower emphasis style like the tertiary
-danger button or the ghost danger button may be more appropriate.
+actions a user could choose from, then a lower emphasis style like the danger
+tertiary button or the danger ghost button may be more appropriate.
 
 ```html
 <cds-button type="danger" href="https://www.ibm.com"> Button </cds-button>
 ```
 
-## Icon-only Buttons
+## Icon-only Button
 
 Icon buttons allow users to take actions, and make choices, with a single tap.
 Icon buttons can take the form of any of the seven types (Primary, Secondary,

packages/web-components/src/components/button/button.stories.ts

@@ -212,7 +212,7 @@ export const Danger = {
         tooltip-alignment="${tooltipAlignment}"
         tooltip-position="${tooltipPosition}"
         type="${type}">
-        Tertiary Danger Button
+        Danger tertiary button
       </cds-button>
       <cds-button
         button-class-name="${buttonClassName}"
@@ -227,7 +227,7 @@ export const Danger = {
         tooltip-alignment="${tooltipAlignment}"
         tooltip-position="${tooltipPosition}"
         type="${type}">
-        Ghost Danger Button
+        Danger ghost button
       </cds-button>`,
 };