From 9ebd6cd01f3ddb190c4cc20d49fc7ed96fe3436b Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 13 Jan 2022 09:13:51 -0800
Subject: [PATCH 01/16] begin button api refactor

---
 src/button-refactor/ButtonsLinksAPI.md | 68 ++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/button-refactor/ButtonsLinksAPI.md

diff --git a/src/button-refactor/ButtonsLinksAPI.md b/src/button-refactor/ButtonsLinksAPI.md
new file mode 100644
index 0000000000..7150d13046
--- /dev/null
+++ b/src/button-refactor/ButtonsLinksAPI.md
@@ -0,0 +1,68 @@
+# Button and Link component APIs
+Button and Link has been discussed in a number of issues and discussions over past few years. I went through the list below, took note of their purpose and started compiling a new API spec. This doc is is meant to be collaborative and accompany Storybook docs while we work through a final API recommendation. Once we have a solid plan, this can move into an issue and be delegated across frameworks.
+
+Existing issues
+[x] https://github.com/github/primer/issues/141
+- Accessory button component, should reconcile with reaction button (sister component to Button)
+[x] https://github.com/github/primer/issues/220
+- Tracking issue, mentions Button in the context of API consistency
+[x] https://github.com/github/primer/issues/253
+- Button audit, anatomy spec, design considerations, some button link discussion, icon buttons (this issue is very informative!)
+[x] https://github.com/github/primer/issues/263
+- More design discussion, particularly focused on outline button
+[x] https://github.com/github/primer/issues/272
+- Make icon only buttons square
+[x] https://github.com/github/primer/issues/321
+- Super specific button use case?
+[x] https://github.com/github/primer/issues/350
+- a11y audit with task list for PVC
+[x] https://github.com/github/primer/issues/382
+- React button refactor
+[x] https://github.com/github/primer/issues/468
+- Visual bugs (colors, state)
+[x] https://github.com/github/primer/discussions/87
+- Discussion about accessory buttons
+[x] https://github.com/github/primer/discussions/211
+- Open ended discussion about primary button as dropdown
+[x] https://github.com/github/primer/discussions/459
+- Allie's thoughts on limiting icon only buttons and working towards encouraging visual labels
+[x] https://github.com/github/primer/discussions/477
+- Buttons styled as links, links styled as buttons
+
+## Specific notes from previous bugs to keep in mind
+[] Check all button variants have shadow present
+[] Ensure icon colors are consistent in hover states
+[] Ensure icon colors are consistent with variants in all states
+[] Ensure disabled colors are consistent across frameworks
+
+## Component list
+A few discussions were about naming and prop drilling (source here). We found that for Button to handle all of its use cases, we would need a large number of props– some conditional and dependent on one another. When that happens, it's typically a sign that the logic should be separated into another component.
+
+| Component | Description |
+| -- | -- |
+| Button | standard `button` with variants, size, visual slots |
+| IconButton | `button` with icon only (square) and required `aria-label` |
+| ButtonStyledAsLink | `button` that visually looks like a link |
+| ReactionButton | `button` snowflake with specific styles/interaction design |
+| ButtonGroup | wrapper to handle grouping buttons |
+| Link | `a` with variants, optional trailing visuals |
+| LinkStyledAsButton | `a` with button variants, required trailing visuals |
+
+## Component API breakdown
+
+### Button
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default | |
+| `label` | string | button description | null | |
+| `aria-label` | string | button description for screen readers | null | |
+| `aria-pressed` | boolean | `true/false` | `false` | |
+| `leadingVisual` | children (slot) | octicon | null | |
+| `trailingVisual` | children (slot) | octicon | null | |
+| `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
+| `fullWidth` | boolean | `true/false` | `false` | |
+| `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | lock icon to the text label or to the button container |
+
+## Component design specs

From f15a0ac382cbf9bfdda0ea36ec20d2d13aa652c1 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 13 Jan 2022 17:33:09 -0800
Subject: [PATCH 02/16] setup button playground

---
 .../stories/explorations/Button.stories.jsx   | 172 +++++++++++++++++
 src/button-refactor/button.scss               | 181 ++++++++++++++++++
 src/button-refactor/link.scss                 |   0
 src/core/index.scss                           |   2 +-
 4 files changed, 354 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/stories/explorations/Button.stories.jsx
 create mode 100644 src/button-refactor/button.scss
 create mode 100644 src/button-refactor/link.scss

diff --git a/docs/src/stories/explorations/Button.stories.jsx b/docs/src/stories/explorations/Button.stories.jsx
new file mode 100644
index 0000000000..d9ecc7e234
--- /dev/null
+++ b/docs/src/stories/explorations/Button.stories.jsx
@@ -0,0 +1,172 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Explorations/Button',
+  parameters: {
+    // design: {
+    //   type: 'figma',
+    //   url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
+    // },
+    layout: 'padded'
+  },
+
+  excludeStories: ['ButtonTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2, 3], // iterator
+      mapping: [null, 'Button-primary', 'Button-outline', 'Button-danger'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'primary', 'outline', 'danger']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    size: {
+      options: [0, 1, 2], // iterator
+      mapping: [null, 'Button-small', 'Button-large'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'small', 'large']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    label: {
+      defaultValue: 'Button',
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    disabled: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    fullWidth: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    leadingVisual: {
+      name: 'leadingVisual',
+      control: {type: 'boolean'},
+      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      table: {
+        category: 'HTML'
+      }
+    },
+    trailingVisual: {
+      name: 'trailingVisual',
+      control: {type: 'boolean'},
+      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      table: {
+        category: 'HTML'
+      }
+    },
+    trailingAction: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    pressed: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on one element',
+      table: {
+        category: 'Interactive'
+      }
+    },
+    focusAllElements: {
+      control: {type: 'boolean'},
+      description: 'set focus on all elements for viewing in all themes',
+      table: {
+        category: 'Interactive'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var button = document.getElementsByTagName('button')[0]
+  // set focus on element
+  button.focus()
+}
+
+const mona = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path
+      fill-rule="evenodd"
+      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+    ></path>
+  </svg>
+)
+
+const caret = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"></path>
+  </svg>
+)
+
+export const ButtonTemplate = ({
+  label,
+  variant,
+  disabled,
+  size,
+  fullWidth,
+  leadingVisual,
+  trailingVisual,
+  trailingAction,
+  pressed,
+  focusElement,
+  focusAllElements
+}) => (
+  <>
+    <button
+      disabled={disabled}
+      className={clsx(
+        'Button',
+        variant && `${variant}`,
+        size && `${size}`,
+        fullWidth && 'btn-block',
+        focusAllElements && 'focus'
+      )}
+      aria-pressed={pressed}
+    >
+      {/* {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />} */}
+      {leadingVisual && <span className="Button--visual Button--leadingVisual">{mona}</span>}
+      <span className="Button--label">{label}</span>
+      {trailingVisual && <span className="Button--visual Button--trailingVisual">{mona}</span>}
+      {trailingAction && <span className="Button--visual Button--trailingAction">{caret}</span>}
+    </button>
+    {focusElement && focusMethod()}
+  </>
+)
+
+export const Playground = ButtonTemplate.bind({})
+Playground.args = {
+  focusElement: false,
+  focusAllElements: false,
+  leadingVisual: false,
+  trailingAction: false,
+  trailingVisual: false
+}
diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
new file mode 100644
index 0000000000..4251fdbd97
--- /dev/null
+++ b/src/button-refactor/button.scss
@@ -0,0 +1,181 @@
+.Button {
+  position: relative;
+  font-size: $body-font-size;
+  font-weight: $font-weight-semibold;
+  cursor: pointer;
+  user-select: none;
+  border: $border-width $border-style;
+  border-radius: $border-radius;
+  color: var(--color-btn-text);
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
+  height: 32px;
+  padding: 0 16px;
+  display: grid;
+  grid-template-areas: 'leadingIcon text trailingIcon trailingAction';
+  grid-template-columns: min-content minmax(0, auto) min-content min-content;
+  align-items: center;
+
+  // column-gap persists with empty grid-areas, margin applies only when children exist
+  > :not(:last-child) {
+    margin-right: $spacer-2;
+  }
+
+  &:hover,
+  &.hover,
+  [open] > & {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
+    transition-duration: 0.1s;
+  }
+
+  &:active {
+    background-color: var(--color-btn-active-bg);
+    border-color: var(--color-btn-active-border);
+    transition: none;
+  }
+
+  &.Button--pressed,
+  &[aria-pressed='true'] {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-primer-fg-disabled);
+  }
+
+  &.Button-small {
+    height: 28px;
+    font-size: $font-size-small;
+  }
+
+  &.Button-large {
+  }
+
+  &.Button-primary {
+    color: var(--color-btn-primary-text);
+    background-color: var(--color-btn-primary-bg);
+    border-color: var(--color-btn-primary-border);
+    box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+
+    &:hover,
+    &.hover,
+    [open] > & {
+      background-color: var(--color-btn-primary-hover-bg);
+      border-color: var(--color-btn-primary-hover-border);
+    }
+
+    &:active,
+    &.Button--pressed,
+    &[aria-pressed='true'] {
+      background-color: var(--color-btn-primary-selected-bg);
+      box-shadow: var(--color-btn-primary-selected-shadow);
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-btn-primary-disabled-text);
+      background-color: var(--color-btn-primary-disabled-bg);
+      border-color: var(--color-btn-primary-disabled-border);
+      fill: var(--color-btn-primary-disabled-text);
+    }
+  }
+
+  &.Button-secondary {
+  }
+
+  &.Button-outline {
+    color: var(--color-btn-outline-text);
+
+    &:hover,
+    [open] > & {
+      color: var(--color-btn-outline-hover-text);
+      background-color: var(--color-btn-outline-hover-bg);
+      border-color: var(--color-btn-outline-hover-border);
+      box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
+    }
+
+    &:active,
+    &.Button--pressed,
+    &[aria-pressed='true'] {
+      color: var(--color-btn-outline-selected-text);
+      background-color: var(--color-btn-outline-selected-bg);
+      border-color: var(--color-btn-outline-selected-border);
+      box-shadow: var(--color-btn-outline-selected-shadow);
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-btn-outline-disabled-text);
+      background-color: var(--color-btn-outline-disabled-bg);
+      border-color: var(--color-btn-border);
+      box-shadow: none;
+    }
+  }
+
+  &.Button-danger {
+    color: var(--color-btn-danger-text);
+
+    .octicon {
+      color: var(--color-btn-danger-icon);
+    }
+
+    &:hover,
+    [open] > & {
+      color: var(--color-btn-danger-hover-text);
+      background-color: var(--color-btn-danger-hover-bg);
+      border-color: var(--color-btn-danger-hover-border);
+      box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+    }
+
+    &:active,
+    &.Button--pressed,
+    &[aria-pressed='true'] {
+      color: var(--color-btn-danger-selected-text);
+      background-color: var(--color-btn-danger-selected-bg);
+      border-color: var(--color-btn-danger-selected-border);
+      box-shadow: var(--color-btn-danger-selected-shadow);
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-btn-danger-disabled-text);
+      background-color: var(--color-btn-danger-disabled-bg);
+      border-color: var(--color-btn-border);
+      box-shadow: none;
+    }
+  }
+}
+
+.Button--label {
+  grid-area: 'text';
+  white-space: nowrap;
+}
+
+.Button--visual {
+  display: flex;
+}
+
+.Button--leadingVisual {
+  grid-area: 'leadingVisual';
+}
+
+.Button--trailingVisual {
+  grid-area: 'trailingVisual';
+}
+
+.Button--trailingAction {
+  grid-area: 'leadingAction';
+}
diff --git a/src/button-refactor/link.scss b/src/button-refactor/link.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/core/index.scss b/src/core/index.scss
index 166da98b06..513f570ee4 100644
--- a/src/core/index.scss
+++ b/src/core/index.scss
@@ -24,6 +24,6 @@
 @import '../pagination/index.scss';
 @import '../tooltips/index.scss';
 @import '../truncate/index.scss';
-
+@import '../button-refactor/button.scss';
 // Utilities always go last so that they can override components
 @import '../utilities/index.scss';

From 14e9185b67642170363b5d2efc4a238f36a9f707 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Mon, 17 Jan 2022 20:17:48 -0800
Subject: [PATCH 03/16] more config

---
 .../stories/explorations/Button.stories.jsx   | 104 +++++++----
 .../explorations/IconButton.stories.jsx       | 174 ++++++++++++++++++
 .../src/stories/explorations/Link.stories.jsx | 131 +++++++++++++
 src/button-refactor/ButtonsLinksAPI.md        |  61 +++++-
 .../button-styled-as-link.scss                |   0
 src/button-refactor/button.scss               |  67 ++++---
 src/button-refactor/icon-button.scss          |  10 +
 .../link-styled-as-button.scss                |   0
 src/button-refactor/link.scss                 |  61 ++++++
 src/core/index.scss                           |   4 +
 10 files changed, 556 insertions(+), 56 deletions(-)
 create mode 100644 docs/src/stories/explorations/IconButton.stories.jsx
 create mode 100644 docs/src/stories/explorations/Link.stories.jsx
 create mode 100644 src/button-refactor/button-styled-as-link.scss
 create mode 100644 src/button-refactor/icon-button.scss
 create mode 100644 src/button-refactor/link-styled-as-button.scss

diff --git a/docs/src/stories/explorations/Button.stories.jsx b/docs/src/stories/explorations/Button.stories.jsx
index d9ecc7e234..33979e080f 100644
--- a/docs/src/stories/explorations/Button.stories.jsx
+++ b/docs/src/stories/explorations/Button.stories.jsx
@@ -15,45 +15,73 @@ export default {
   argTypes: {
     variant: {
       options: [0, 1, 2, 3], // iterator
-      mapping: [null, 'Button-primary', 'Button-outline', 'Button-danger'], // values
+      mapping: ['Button--default', 'Button--primary', 'Button--outline', 'Button--danger'], // values
       control: {
-        type: 'select',
+        type: 'inline-radio',
         labels: ['default', 'primary', 'outline', 'danger']
       },
       table: {
         category: 'CSS'
-      }
+      },
+      description: 'Controls button color',
+      defaultValue: 0
     },
     size: {
       options: [0, 1, 2], // iterator
-      mapping: [null, 'Button-small', 'Button-large'], // values
+      mapping: [null, 'Button--small', 'Button--large'], // values
       control: {
-        type: 'select',
-        labels: ['default', 'small', 'large']
+        type: 'inline-radio',
+        labels: ['default [32px]', 'small [28px]', 'large']
       },
       table: {
         category: 'CSS'
-      }
+      },
+      description: 'Controls button height',
+      defaultValue: 0
+    },
+    visualPosition: {
+      options: [0, 1], // iterator
+      mapping: [null, 'Button-visual--fixed'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'fixed']
+      },
+      table: {
+        category: 'CSS'
+      },
+      description:
+        '[Name TBD!] Controls where the leading or trailing visuals position themselves in a fullWidth button (lock to text label or button bounds)',
+      defaultValue: 'Button-visual--fixed'
     },
     label: {
       defaultValue: 'Button',
       type: 'string',
       name: 'label',
-      description: 'string',
+      description: 'Visible button label',
       table: {
-        category: 'HTML'
+        category: 'Slot'
+      }
+    },
+    ariaLabel: {
+      defaultValue: '',
+      type: 'string',
+      name: 'ariaLabel',
+      description: 'Hidden button label (in addition to visible label). Not required in all cases.',
+      table: {
+        category: 'Slot'
       }
     },
     disabled: {
       defaultValue: false,
       control: {type: 'boolean'},
       table: {
-        category: 'Interactive'
+        category: 'State'
       }
     },
     fullWidth: {
-      defaultValue: false,
+      defaultValue: true,
       control: {type: 'boolean'},
+      description: 'Allow button to stretch and fill container',
       table: {
         category: 'CSS'
       }
@@ -61,45 +89,49 @@ export default {
     leadingVisual: {
       name: 'leadingVisual',
       control: {type: 'boolean'},
-      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      description: 'Slot for SVG icon or emoji (boolean only for testing purposes)',
+      defaultValue: false,
       table: {
-        category: 'HTML'
+        category: 'Slot'
       }
     },
     trailingVisual: {
       name: 'trailingVisual',
       control: {type: 'boolean'},
-      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      description: 'Slot for SVG icon or emoji (boolean only for testing purposes)',
       table: {
-        category: 'HTML'
-      }
+        category: 'Slot'
+      },
+      defaultValue: false
     },
     trailingAction: {
       defaultValue: false,
       control: {type: 'boolean'},
+      description:
+        'Slot for SVG icon that indicates an action. Primarily used by other Primer components, like a DropdownMenu or overlay trigger (boolean only for testing purposes)',
       table: {
-        category: 'CSS'
+        category: 'Slot'
       }
     },
     pressed: {
       defaultValue: false,
       control: {type: 'boolean'},
       table: {
-        category: 'CSS'
+        category: 'State'
       }
     },
     focusElement: {
       control: {type: 'boolean'},
       description: 'set focus on one element',
       table: {
-        category: 'Interactive'
+        category: 'State'
       }
     },
     focusAllElements: {
       control: {type: 'boolean'},
       description: 'set focus on all elements for viewing in all themes',
       table: {
-        category: 'Interactive'
+        category: 'State'
       }
     }
   }
@@ -112,11 +144,11 @@ const focusMethod = function getFocus() {
   button.focus()
 }
 
-const mona = (
+const star = (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
     <path
       fill-rule="evenodd"
-      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+      d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"
     ></path>
   </svg>
 )
@@ -138,25 +170,30 @@ export const ButtonTemplate = ({
   trailingAction,
   pressed,
   focusElement,
-  focusAllElements
+  focusAllElements,
+  visualPosition,
+  className
 }) => (
   <>
     <button
       disabled={disabled}
       className={clsx(
         'Button',
+        className && `${className}`,
         variant && `${variant}`,
         size && `${size}`,
-        fullWidth && 'btn-block',
-        focusAllElements && 'focus'
+        fullWidth && 'Button--fullWidth',
+        focusAllElements && 'focus',
+        visualPosition && `${visualPosition}`
       )}
-      aria-pressed={pressed}
+      aria-pressed={pressed ? pressed : undefined}
+      aria-label={ariaLabel ? ariaLabel : undefined}
     >
       {/* {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />} */}
-      {leadingVisual && <span className="Button--visual Button--leadingVisual">{mona}</span>}
-      <span className="Button--label">{label}</span>
-      {trailingVisual && <span className="Button--visual Button--trailingVisual">{mona}</span>}
-      {trailingAction && <span className="Button--visual Button--trailingAction">{caret}</span>}
+      {leadingVisual && <span className="Button-visual Button-leadingVisual">{star}</span>}
+      <span className="Button-label">{label}</span>
+      {trailingVisual && <span className="Button-visual Button-trailingVisual">{star}</span>}
+      {trailingAction && <span className="Button-visual Button-trailingAction">{caret}</span>}
     </button>
     {focusElement && focusMethod()}
   </>
@@ -166,7 +203,8 @@ export const Playground = ButtonTemplate.bind({})
 Playground.args = {
   focusElement: false,
   focusAllElements: false,
-  leadingVisual: false,
-  trailingAction: false,
-  trailingVisual: false
+  variant: 'Button--default'
+  //   leadingVisual: false,
+  //   trailingAction: false,
+  //   trailingVisual: false
 }
diff --git a/docs/src/stories/explorations/IconButton.stories.jsx b/docs/src/stories/explorations/IconButton.stories.jsx
new file mode 100644
index 0000000000..3327d1f12b
--- /dev/null
+++ b/docs/src/stories/explorations/IconButton.stories.jsx
@@ -0,0 +1,174 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Explorations/IconButton',
+  parameters: {
+    // design: {
+    //   type: 'figma',
+    //   url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
+    // },
+    layout: 'padded'
+  },
+
+  excludeStories: ['IconButtonTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2, 3], // iterator
+      mapping: ['Button--default', 'Button--primary', 'Button--outline', 'Button--danger'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'primary', 'outline', 'danger']
+      },
+      table: {
+        category: 'CSS'
+      },
+      description: 'Controls button color',
+      defaultValue: 0
+    },
+    size: {
+      options: [0, 1, 2], // iterator
+      mapping: [null, 'Button--small', 'Button--large'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default [32px]', 'small [28px]', 'large']
+      },
+      table: {
+        category: 'CSS'
+      },
+      description: 'Controls button height',
+      defaultValue: 0
+    },
+    visualPosition: {
+      options: [0, 1], // iterator
+      mapping: [null, 'Button-visual--fixed'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'fixed']
+      },
+      table: {
+        category: 'CSS'
+      },
+      description:
+        '[Name TBD!] Controls where the leading or trailing visuals position themselves in a fullWidth button (lock to text label or button bounds)',
+      defaultValue: 'Button-visual--fixed'
+    },
+    ariaLabel: {
+      defaultValue: '',
+      type: 'string',
+      name: 'ariaLabel',
+      description: 'Hidden button label (required)',
+      table: {
+        category: 'Slot'
+      }
+    },
+    disabled: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'State'
+      }
+    },
+    fullWidth: {
+      defaultValue: true,
+      control: {type: 'boolean'},
+      description: 'Allow button to stretch and fill container',
+      table: {
+        category: 'CSS'
+      }
+    },
+    visual: {
+      name: 'visual',
+      control: {type: 'boolean'},
+      description: 'Slot for SVG icon (boolean only for testing purposes)',
+      defaultValue: true,
+      table: {
+        category: 'Slot'
+      }
+    },
+    pressed: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'State'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on one element',
+      table: {
+        category: 'State'
+      }
+    },
+    focusAllElements: {
+      control: {type: 'boolean'},
+      description: 'set focus on all elements for viewing in all themes',
+      table: {
+        category: 'State'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var button = document.getElementsByTagName('button')[0]
+  // set focus on element
+  button.focus()
+}
+
+const star = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path
+      fill-rule="evenodd"
+      d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"
+    ></path>
+  </svg>
+)
+
+const caret = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"></path>
+  </svg>
+)
+
+export const IconButtonTemplate = ({
+  variant,
+  disabled,
+  size,
+  visual,
+  pressed,
+  focusElement,
+  focusAllElements,
+  className,
+  ariaLabel
+}) => (
+  <>
+    <button
+      disabled={disabled}
+      className={clsx(
+        'Button',
+        'Button--iconOnly',
+        className && `${className}`,
+        variant && `${variant}`,
+        size && `${size}`,
+        focusAllElements && 'focus'
+      )}
+      aria-pressed={pressed ? pressed : undefined}
+      aria-label={ariaLabel}
+    >
+      {visual && <span className="Button-visual">{star}</span>}
+    </button>
+    {focusElement && focusMethod()}
+  </>
+)
+
+export const Playground = IconButtonTemplate.bind({})
+Playground.args = {
+  focusElement: false,
+  focusAllElements: false,
+  ariaLabel: 'Button description'
+  //   leadingVisual: false,
+  //   trailingAction: false,
+  //   trailingVisual: false
+}
diff --git a/docs/src/stories/explorations/Link.stories.jsx b/docs/src/stories/explorations/Link.stories.jsx
new file mode 100644
index 0000000000..42fdc5236f
--- /dev/null
+++ b/docs/src/stories/explorations/Link.stories.jsx
@@ -0,0 +1,131 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Explorations/Link',
+  parameters: {
+    // design: {
+    //   type: 'figma',
+    //   url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
+    // },
+    layout: 'padded'
+  },
+
+  excludeStories: ['LinkTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2, 3], // iterator
+      mapping: ['Button--default', 'Button--primary', 'Button--outline', 'Button--danger'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'primary', 'outline', 'danger']
+      },
+      table: {
+        category: 'CSS'
+      },
+      description: 'Controls link color',
+      defaultValue: 0
+    },
+    label: {
+      defaultValue: 'Link',
+      type: 'string',
+      name: 'label',
+      description: 'Link label',
+      table: {
+        category: 'Slot'
+      }
+    },
+    target: {
+      defaultValue: '',
+      type: 'string',
+      name: 'target',
+      description: '_blank for new tab',
+      table: {
+        category: 'Slot'
+      }
+    },
+    href: {
+      defaultValue: '',
+      type: 'string',
+      name: 'href',
+      description: '',
+      table: {
+        category: 'Slot'
+      }
+    },
+    showTrailingVisual: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      description: '',
+      table: {
+        category: 'CSS'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on one element',
+      table: {
+        category: 'State'
+      }
+    },
+    focusAllElements: {
+      control: {type: 'boolean'},
+      description: 'set focus on all elements for viewing in all themes',
+      table: {
+        category: 'State'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var button = document.getElementsByTagName('button')[0]
+  // set focus on element
+  button.focus()
+}
+
+const arrow = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path
+      fill-rule="evenodd"
+      d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"
+    ></path>
+  </svg>
+)
+
+export const LinkTemplate = ({
+  label,
+  variant,
+  focusElement,
+  focusAllElements,
+  className,
+  href,
+  showTrailingVisual,
+  target
+}) => (
+  <>
+    <a
+      className={clsx('Link', className && `${className}`, variant && `${variant}`, focusAllElements && 'focus')}
+      href={href}
+      target={target}
+    >
+      {showTrailingVisual ? (
+        <span className="Link--trailingVisual">
+          {label}
+          {arrow}
+        </span>
+      ) : (
+        label
+      )}
+    </a>
+    {focusElement && focusMethod()}
+  </>
+)
+
+export const Playground = LinkTemplate.bind({})
+Playground.args = {
+  focusElement: false,
+  focusAllElements: false
+  //   variant: 'Button--default'
+}
diff --git a/src/button-refactor/ButtonsLinksAPI.md b/src/button-refactor/ButtonsLinksAPI.md
index 7150d13046..e8e9a85a35 100644
--- a/src/button-refactor/ButtonsLinksAPI.md
+++ b/src/button-refactor/ButtonsLinksAPI.md
@@ -65,4 +65,63 @@ A few discussions were about naming and prop drilling (source here). We found th
 | `fullWidth` | boolean | `true/false` | `false` | |
 | `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | lock icon to the text label or to the button container |
 
-## Component design specs
+
+### LinkStyledAsButton
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default | |
+| `label` | string | button description | null | |
+| `leadingVisual` | children (slot) | octicon | null | |
+| `trailingVisual` | children (slot) | octicon | null | |
+| `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
+| `fullWidth` | boolean | `true/false` | `false` | |
+| `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | lock icon to the text label or to the button container |
+
+### IconButton
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default | |
+| `aria-label` | string | button description for screen readers (required) | null | |
+| `visual` | children (slot) | octicon | null | |
+| `aria-pressed` | boolean | `true/false` | `false` | |
+
+### Link
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | ?? we need to work on this (subtle and or muted) | |
+| `label` | string | button description | null | |
+| `showTrailingVisual` | boolean | specific octicon for new tab or new page (or anchor?) | null | |
+
+### ButtonStyledAsLink
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | see above confusion | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default | |
+| `label` | string | button description | null | |
+| `aria-label` | string | button description for screen readers | null | |
+| `aria-pressed` | boolean | `true/false` | `false` | |
+| `leadingVisual` | children (slot) | octicon | null | |
+| `trailingVisual` | children (slot) | octicon | null | |
+| `fullWidth` | boolean | `true/false` | `false` | |
+| `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | I think this should be fixed for link styles (so maybe we dont need this prop) |
+
+### ButtonGroup
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| | | | |
+
+## Notes
+[] Should Button have a `secondary` variant, or should it be the default with no additional class?
+[] How granular should icon positioning be?
+- If both trailingVisual and trailingAction exist, and visualPosition is `fixed`, the trailingVisual will "lock" to the trailingAction (unless we are more granular and specify different lock scenarios as props)
+- One idea would be to always lock trailingAction (always affix it to the right of a button which will only be visible on full width) and maintain visualPosition prop _only_ for visuals
+[] Thoughts on buttons with trailingAction having less margin-right?
+[] Should we think about underlining links with this work, or is that scope creep?
+[] Button styled as link is trickiest, and we need to decide how much logic that component can have compared to Button
diff --git a/src/button-refactor/button-styled-as-link.scss b/src/button-refactor/button-styled-as-link.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index 4251fdbd97..34ece55a91 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -4,20 +4,22 @@
   font-weight: $font-weight-semibold;
   cursor: pointer;
   user-select: none;
+  background-color: transparent;
   border: $border-width $border-style;
+  border-color: transparent;
   border-radius: $border-radius;
   color: var(--color-btn-text);
-  background-color: var(--color-btn-bg);
-  border-color: var(--color-btn-border);
-  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
   transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
   transition-property: color, background-color, border-color;
   height: 32px;
   padding: 0 16px;
-  display: grid;
-  grid-template-areas: 'leadingIcon text trailingIcon trailingAction';
-  grid-template-columns: min-content minmax(0, auto) min-content min-content;
-  align-items: center;
+
+  &:not(.Button--iconOnly) {
+    display: grid;
+    grid-template-areas: 'leadingVisual text trailingVisual trailingAction';
+    grid-template-columns: min-content minmax(0, auto) min-content min-content;
+    align-items: center;
+  }
 
   // column-gap persists with empty grid-areas, margin applies only when children exist
   > :not(:last-child) {
@@ -53,15 +55,31 @@
     fill: var(--color-primer-fg-disabled);
   }
 
-  &.Button-small {
+  &.Button--small {
     height: 28px;
     font-size: $font-size-small;
   }
 
-  &.Button-large {
+  &.Button--large {
+  }
+
+  &.Button--fullWidth {
+    width: 100%;
+
+    .Button-trailingVisual {
+      margin-left: auto;
+    }
+  }
+
+  &.Button--default {
+    color: var(--color-btn-text);
+    background-color: var(--color-btn-bg);
+    border: $border-width $border-style;
+    border-color: var(--color-btn-border);
+    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
   }
 
-  &.Button-primary {
+  &.Button--primary {
     color: var(--color-btn-primary-text);
     background-color: var(--color-btn-primary-bg);
     border-color: var(--color-btn-primary-border);
@@ -91,10 +109,10 @@
     }
   }
 
-  &.Button-secondary {
+  &.Button--secondary {
   }
 
-  &.Button-outline {
+  &.Button--outline {
     color: var(--color-btn-outline-text);
 
     &:hover,
@@ -124,7 +142,7 @@
     }
   }
 
-  &.Button-danger {
+  &.Button--danger {
     color: var(--color-btn-danger-text);
 
     .octicon {
@@ -159,23 +177,28 @@
   }
 }
 
-.Button--label {
-  grid-area: 'text';
+.Button-label {
+  grid-area: text;
   white-space: nowrap;
 }
 
-.Button--visual {
+.Button-visual {
   display: flex;
 }
 
-.Button--leadingVisual {
-  grid-area: 'leadingVisual';
+.Button-visual--fixed {
+  grid-template-columns: min-content min-content min-content min-content;
+  place-content: center;
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
 }
 
-.Button--trailingVisual {
-  grid-area: 'trailingVisual';
+.Button-trailingVisual {
+  grid-area: trailingVisual;
 }
 
-.Button--trailingAction {
-  grid-area: 'leadingAction';
+.Button-trailingAction {
+  grid-area: trailingAction;
 }
diff --git a/src/button-refactor/icon-button.scss b/src/button-refactor/icon-button.scss
new file mode 100644
index 0000000000..d2e849689c
--- /dev/null
+++ b/src/button-refactor/icon-button.scss
@@ -0,0 +1,10 @@
+.Button--iconOnly {
+  display: grid;
+  place-content: center;
+  padding: unset;
+  width: 32px;
+
+  &.Button--small {
+    width: 28px;
+  }
+}
diff --git a/src/button-refactor/link-styled-as-button.scss b/src/button-refactor/link-styled-as-button.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/button-refactor/link.scss b/src/button-refactor/link.scss
index e69de29bb2..1cd33bf5c5 100644
--- a/src/button-refactor/link.scss
+++ b/src/button-refactor/link.scss
@@ -0,0 +1,61 @@
+// Links
+
+.Link {
+  color: var(--color-accent-fg);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+.Link--trailingVisual {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+// .Link--primary {
+//   color: var(--color-fg-default) !important;
+
+//   &:hover {
+//     color: var(--color-accent-fg) !important;
+//   }
+// }
+
+// .Link--secondary {
+//   color: var(--color-fg-muted) !important;
+
+//   &:hover {
+//     color: var(--color-accent-fg) !important;
+//   }
+// }
+
+// .Link--muted {
+//   color: var(--color-fg-muted) !important;
+
+//   &:hover {
+//     color: var(--color-accent-fg) !important;
+//     text-decoration: none;
+//   }
+// }
+
+// // Set the link color only on hover
+// // Useful when you want only part of a link to turn blue on hover
+// .Link--onHover {
+//   &:hover {
+//     color: var(--color-accent-fg) !important;
+//     text-decoration: underline;
+//     cursor: pointer;
+//   }
+// }
+
+// // When using a color utility class inside of a link class,
+// // color should change with link on hover.
+// .Link--secondary,
+// .Link--primary,
+// .Link--muted {
+//   &:hover [class*='color-text'] {
+//     color: inherit !important;
+//   }
+// }
diff --git a/src/core/index.scss b/src/core/index.scss
index 513f570ee4..611d9ddb55 100644
--- a/src/core/index.scss
+++ b/src/core/index.scss
@@ -25,5 +25,9 @@
 @import '../tooltips/index.scss';
 @import '../truncate/index.scss';
 @import '../button-refactor/button.scss';
+@import '../button-refactor/link.scss';
+@import '../button-refactor/icon-button.scss';
+@import '../button-refactor/button-styled-as-link.scss';
+@import '../button-refactor/link-styled-as-button.scss';
 // Utilities always go last so that they can override components
 @import '../utilities/index.scss';

From 1c67f020742f0be026ffbd071ffb8719d9bfacac Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 18 Jan 2022 13:10:53 -0800
Subject: [PATCH 04/16] stash meeting notes

---
 .../src/stories/explorations/Button.stories.jsx |  3 ++-
 src/button-refactor/ButtonsLinksAPI.md          | 17 +++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/docs/src/stories/explorations/Button.stories.jsx b/docs/src/stories/explorations/Button.stories.jsx
index 33979e080f..e92d9ccf31 100644
--- a/docs/src/stories/explorations/Button.stories.jsx
+++ b/docs/src/stories/explorations/Button.stories.jsx
@@ -172,7 +172,8 @@ export const ButtonTemplate = ({
   focusElement,
   focusAllElements,
   visualPosition,
-  className
+  className,
+  ariaLabel
 }) => (
   <>
     <button
diff --git a/src/button-refactor/ButtonsLinksAPI.md b/src/button-refactor/ButtonsLinksAPI.md
index e8e9a85a35..d28b727418 100644
--- a/src/button-refactor/ButtonsLinksAPI.md
+++ b/src/button-refactor/ButtonsLinksAPI.md
@@ -43,7 +43,7 @@ A few discussions were about naming and prop drilling (source here). We found th
 | Button | standard `button` with variants, size, visual slots |
 | IconButton | `button` with icon only (square) and required `aria-label` |
 | ButtonStyledAsLink | `button` that visually looks like a link |
-| ReactionButton | `button` snowflake with specific styles/interaction design |
+| ReactionButton | `button` snowflake with specific styles/interaction design (round) potentially a variant |
 | ButtonGroup | wrapper to handle grouping buttons |
 | Link | `a` with variants, optional trailing visuals |
 | LinkStyledAsButton | `a` with button variants, required trailing visuals |
@@ -118,10 +118,23 @@ A few discussions were about naming and prop drilling (source here). We found th
 | | | | |
 
 ## Notes
-[] Should Button have a `secondary` variant, or should it be the default with no additional class?
+[] Should Button have a `secondary` but also default variant, or should it be the default with no additional class?
 [] How granular should icon positioning be?
 - If both trailingVisual and trailingAction exist, and visualPosition is `fixed`, the trailingVisual will "lock" to the trailingAction (unless we are more granular and specify different lock scenarios as props)
 - One idea would be to always lock trailingAction (always affix it to the right of a button which will only be visible on full width) and maintain visualPosition prop _only_ for visuals
 [] Thoughts on buttons with trailingAction having less margin-right?
 [] Should we think about underlining links with this work, or is that scope creep?
 [] Button styled as link is trickiest, and we need to decide how much logic that component can have compared to Button
+
+- Naming of trailingAction?
+- SplitButton
+  - Could be a composition or pattern?
+  - Accessibility
+- visualPosition trailingAction always locked to the right
+- trailingAction could be closer on the right (8px on the right)
+- compact button variant?
+- Giant words?
+- Large button 44px (when it could be used) 
+- requirement for invisible button with icon next to label
+- Maybe not need buttonstyledaslink
+- outline? ghost, muted, subtle

From d148ec09a460e0778e2be809a4db1ee780937f90 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 19 Jan 2022 16:29:08 -0800
Subject: [PATCH 05/16] WIP

---
 .../stories/explorations/Button.stories.jsx   |  30 +--
 .../explorations/IconButton.stories.jsx       |  56 +----
 .../src/stories/explorations/Link.stories.jsx |  17 +-
 .../LinkStyledAsButton.stories.jsx            | 228 +++++++++++++++++
 src/button-refactor/ButtonsLinksAPI.md        | 112 +++------
 ...-styled-as-link.scss => button-group.scss} |   0
 src/button-refactor/button.scss               | 161 +++++++-----
 .../link-styled-as-button.scss                | 235 ++++++++++++++++++
 src/button-refactor/link.scss                 |  58 +----
 src/core/index.scss                           |   2 +-
 src/support/mixins/misc.scss                  |   7 +
 11 files changed, 651 insertions(+), 255 deletions(-)
 create mode 100644 docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
 rename src/button-refactor/{button-styled-as-link.scss => button-group.scss} (100%)

diff --git a/docs/src/stories/explorations/Button.stories.jsx b/docs/src/stories/explorations/Button.stories.jsx
index e92d9ccf31..38dfe162df 100644
--- a/docs/src/stories/explorations/Button.stories.jsx
+++ b/docs/src/stories/explorations/Button.stories.jsx
@@ -15,23 +15,23 @@ export default {
   argTypes: {
     variant: {
       options: [0, 1, 2, 3], // iterator
-      mapping: ['Button--default', 'Button--primary', 'Button--outline', 'Button--danger'], // values
+      mapping: ['Button--secondary', 'Button--primary', 'Button--invisible', 'Button--danger'], // values
       control: {
         type: 'inline-radio',
-        labels: ['default', 'primary', 'outline', 'danger']
+        labels: ['secondary', 'primary', 'invisible', 'danger']
       },
       table: {
         category: 'CSS'
       },
       description: 'Controls button color',
-      defaultValue: 0
+      defaultValue: 'Button--secondary'
     },
     size: {
       options: [0, 1, 2], // iterator
       mapping: [null, 'Button--small', 'Button--large'], // values
       control: {
         type: 'inline-radio',
-        labels: ['default [32px]', 'small [28px]', 'large']
+        labels: ['default [32px]', 'small [28px]', 'large [44px]']
       },
       table: {
         category: 'CSS'
@@ -79,7 +79,7 @@ export default {
       }
     },
     fullWidth: {
-      defaultValue: true,
+      defaultValue: false,
       control: {type: 'boolean'},
       description: 'Allow button to stretch and fill container',
       table: {
@@ -127,9 +127,9 @@ export default {
         category: 'State'
       }
     },
-    focusAllElements: {
+    active: {
       control: {type: 'boolean'},
-      description: 'set focus on all elements for viewing in all themes',
+      description: 'set button to active state',
       table: {
         category: 'State'
       }
@@ -170,7 +170,7 @@ export const ButtonTemplate = ({
   trailingAction,
   pressed,
   focusElement,
-  focusAllElements,
+  active,
   visualPosition,
   className,
   ariaLabel
@@ -184,8 +184,8 @@ export const ButtonTemplate = ({
         variant && `${variant}`,
         size && `${size}`,
         fullWidth && 'Button--fullWidth',
-        focusAllElements && 'focus',
-        visualPosition && `${visualPosition}`
+        visualPosition && `${visualPosition}`,
+        active && 'Button--active'
       )}
       aria-pressed={pressed ? pressed : undefined}
       aria-label={ariaLabel ? ariaLabel : undefined}
@@ -203,9 +203,9 @@ export const ButtonTemplate = ({
 export const Playground = ButtonTemplate.bind({})
 Playground.args = {
   focusElement: false,
-  focusAllElements: false,
-  variant: 'Button--default'
-  //   leadingVisual: false,
-  //   trailingAction: false,
-  //   trailingVisual: false
+  active: false,
+  variant: 'Button--secondary',
+  leadingVisual: false,
+  trailingAction: false,
+  trailingVisual: false
 }
diff --git a/docs/src/stories/explorations/IconButton.stories.jsx b/docs/src/stories/explorations/IconButton.stories.jsx
index 3327d1f12b..f03d53481c 100644
--- a/docs/src/stories/explorations/IconButton.stories.jsx
+++ b/docs/src/stories/explorations/IconButton.stories.jsx
@@ -15,7 +15,7 @@ export default {
   argTypes: {
     variant: {
       options: [0, 1, 2, 3], // iterator
-      mapping: ['Button--default', 'Button--primary', 'Button--outline', 'Button--danger'], // values
+      mapping: ['Button--secondary', 'Button--primary', 'Button--invisible', 'Button--danger'], // values
       control: {
         type: 'inline-radio',
         labels: ['default', 'primary', 'outline', 'danger']
@@ -24,35 +24,21 @@ export default {
         category: 'CSS'
       },
       description: 'Controls button color',
-      defaultValue: 0
+      defaultValue: 'Button--secondary'
     },
     size: {
       options: [0, 1, 2], // iterator
       mapping: [null, 'Button--small', 'Button--large'], // values
       control: {
         type: 'inline-radio',
-        labels: ['default [32px]', 'small [28px]', 'large']
+        labels: ['default [32px]', 'small [28px]', 'large [44px]']
       },
       table: {
         category: 'CSS'
       },
-      description: 'Controls button height',
+      description: 'Controls button height and width',
       defaultValue: 0
     },
-    visualPosition: {
-      options: [0, 1], // iterator
-      mapping: [null, 'Button-visual--fixed'], // values
-      control: {
-        type: 'inline-radio',
-        labels: ['default', 'fixed']
-      },
-      table: {
-        category: 'CSS'
-      },
-      description:
-        '[Name TBD!] Controls where the leading or trailing visuals position themselves in a fullWidth button (lock to text label or button bounds)',
-      defaultValue: 'Button-visual--fixed'
-    },
     ariaLabel: {
       defaultValue: '',
       type: 'string',
@@ -69,14 +55,6 @@ export default {
         category: 'State'
       }
     },
-    fullWidth: {
-      defaultValue: true,
-      control: {type: 'boolean'},
-      description: 'Allow button to stretch and fill container',
-      table: {
-        category: 'CSS'
-      }
-    },
     visual: {
       name: 'visual',
       control: {type: 'boolean'},
@@ -99,13 +77,6 @@ export default {
       table: {
         category: 'State'
       }
-    },
-    focusAllElements: {
-      control: {type: 'boolean'},
-      description: 'set focus on all elements for viewing in all themes',
-      table: {
-        category: 'State'
-      }
     }
   }
 }
@@ -132,17 +103,7 @@ const caret = (
   </svg>
 )
 
-export const IconButtonTemplate = ({
-  variant,
-  disabled,
-  size,
-  visual,
-  pressed,
-  focusElement,
-  focusAllElements,
-  className,
-  ariaLabel
-}) => (
+export const IconButtonTemplate = ({variant, disabled, size, visual, pressed, focusElement, className, ariaLabel}) => (
   <>
     <button
       disabled={disabled}
@@ -151,8 +112,7 @@ export const IconButtonTemplate = ({
         'Button--iconOnly',
         className && `${className}`,
         variant && `${variant}`,
-        size && `${size}`,
-        focusAllElements && 'focus'
+        size && `${size}`
       )}
       aria-pressed={pressed ? pressed : undefined}
       aria-label={ariaLabel}
@@ -166,9 +126,5 @@ export const IconButtonTemplate = ({
 export const Playground = IconButtonTemplate.bind({})
 Playground.args = {
   focusElement: false,
-  focusAllElements: false,
   ariaLabel: 'Button description'
-  //   leadingVisual: false,
-  //   trailingAction: false,
-  //   trailingVisual: false
 }
diff --git a/docs/src/stories/explorations/Link.stories.jsx b/docs/src/stories/explorations/Link.stories.jsx
index 42fdc5236f..81a0194d67 100644
--- a/docs/src/stories/explorations/Link.stories.jsx
+++ b/docs/src/stories/explorations/Link.stories.jsx
@@ -14,11 +14,11 @@ export default {
   excludeStories: ['LinkTemplate'],
   argTypes: {
     variant: {
-      options: [0, 1, 2, 3], // iterator
-      mapping: ['Button--default', 'Button--primary', 'Button--outline', 'Button--danger'], // values
+      options: [0, 1], // iterator
+      mapping: [null, 'Link--muted'], // values
       control: {
         type: 'inline-radio',
-        labels: ['default', 'primary', 'outline', 'danger']
+        labels: ['default', 'muted']
       },
       table: {
         category: 'CSS'
@@ -53,7 +53,7 @@ export default {
         category: 'Slot'
       }
     },
-    showTrailingVisual: {
+    showTrailingAction: {
       defaultValue: false,
       control: {type: 'boolean'},
       description: '',
@@ -101,17 +101,17 @@ export const LinkTemplate = ({
   focusAllElements,
   className,
   href,
-  showTrailingVisual,
+  showTrailingAction,
   target
 }) => (
   <>
     <a
       className={clsx('Link', className && `${className}`, variant && `${variant}`, focusAllElements && 'focus')}
       href={href}
-      target={target}
+      target={target ? target : undefined}
     >
-      {showTrailingVisual ? (
-        <span className="Link--trailingVisual">
+      {showTrailingAction ? (
+        <span className="Link-trailingVisual">
           {label}
           {arrow}
         </span>
@@ -127,5 +127,4 @@ export const Playground = LinkTemplate.bind({})
 Playground.args = {
   focusElement: false,
   focusAllElements: false
-  //   variant: 'Button--default'
 }
diff --git a/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
new file mode 100644
index 0000000000..9413b1c112
--- /dev/null
+++ b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
@@ -0,0 +1,228 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Explorations/LinkStyledAsButton',
+  parameters: {
+    // design: {
+    //   type: 'figma',
+    //   url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
+    // },
+    layout: 'padded'
+  },
+
+  excludeStories: ['LinkStyledAsButtonTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2, 3], // iterator
+      mapping: [
+        'LinkStyledAsButton--secondary',
+        'LinkStyledAsButton--primary',
+        'LinkStyledAsButton--invisible',
+        'LinkStyledAsButton--danger'
+      ], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['secondary', 'primary', 'invisible', 'danger']
+      },
+      table: {
+        category: 'CSS'
+      },
+      description: 'Controls button color',
+      defaultValue: 'LinkStyledAsButton--secondary'
+    },
+    size: {
+      options: [0, 1, 2], // iterator
+      mapping: [null, 'LinkStyledAsButton--small', 'LinkStyledAsButton--large'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default [32px]', 'small [28px]', 'large [44px]']
+      },
+      table: {
+        category: 'CSS'
+      },
+      description: 'Controls button height',
+      defaultValue: 0
+    },
+    visualPosition: {
+      options: [0, 1], // iterator
+      mapping: [null, 'Button-visual--fixed'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'fixed']
+      },
+      table: {
+        category: 'CSS'
+      },
+      description:
+        '[Name TBD!] Controls where the leading or trailing visuals position themselves in a fullWidth button (lock to text label or button bounds)',
+      defaultValue: 'Button-visual--fixed'
+    },
+    label: {
+      defaultValue: 'Link',
+      type: 'string',
+      name: 'label',
+      description: 'Visible button label',
+      table: {
+        category: 'Slot'
+      }
+    },
+    target: {
+      defaultValue: '',
+      type: 'string',
+      name: 'target',
+      description: '_blank for new tab',
+      table: {
+        category: 'Slot'
+      }
+    },
+    href: {
+      defaultValue: '',
+      type: 'string',
+      name: 'href',
+      description: '',
+      table: {
+        category: 'Slot'
+      }
+    },
+    disabled: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'State'
+      }
+    },
+    fullWidth: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      description: 'Allow button to stretch and fill container',
+      table: {
+        category: 'CSS'
+      }
+    },
+    leadingVisual: {
+      name: 'leadingVisual',
+      control: {type: 'boolean'},
+      description: 'Slot for SVG icon or emoji (boolean only for testing purposes)',
+      defaultValue: false,
+      table: {
+        category: 'Slot'
+      }
+    },
+    trailingVisual: {
+      name: 'trailingVisual',
+      control: {type: 'boolean'},
+      description: 'Slot for SVG icon or emoji (boolean only for testing purposes)',
+      table: {
+        category: 'Slot'
+      },
+      defaultValue: false
+    },
+    showTrailingAction: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      description:
+        'Slot for SVG icon that indicates an action. Primarily used by other Primer components, like a DropdownMenu or overlay trigger (boolean only for testing purposes)',
+      table: {
+        category: 'Slot'
+      }
+    },
+    pressed: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'State'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on one element',
+      table: {
+        category: 'State'
+      }
+    },
+    active: {
+      control: {type: 'boolean'},
+      description: 'set button to active state',
+      table: {
+        category: 'State'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var button = document.getElementsByTagName('button')[0]
+  // set focus on element
+  button.focus()
+}
+
+const star = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path
+      fill-rule="evenodd"
+      d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"
+    ></path>
+  </svg>
+)
+
+const arrow = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path
+      fill-rule="evenodd"
+      d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"
+    ></path>
+  </svg>
+)
+
+export const LinkStyledAsButtonTemplate = ({
+  label,
+  variant,
+  size,
+  fullWidth,
+  leadingVisual,
+  trailingVisual,
+  showTrailingAction,
+  focusElement,
+  active,
+  visualPosition,
+  className,
+  href,
+  target
+}) => (
+  <>
+    <a
+      href={href}
+      target={target ? target : undefined}
+      className={clsx(
+        'LinkStyledAsButton',
+        className && `${className}`,
+        variant && `${variant}`,
+        size && `${size}`,
+        fullWidth && 'LinkStyledAsButton--fullWidth',
+        visualPosition && `${visualPosition}`,
+        active && 'LinkStyledAsButton--active'
+      )}
+    >
+      {/* {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />} */}
+      {leadingVisual && <span className="LinkStyledAsButton-visual LinkStyledAsButton-leadingVisual">{star}</span>}
+      <span className="LinkStyledAsButton-label">{label}</span>
+      {trailingVisual && <span className="LinkStyledAsButton-visual LinkStyledAsButton-trailingVisual">{star}</span>}
+      {showTrailingAction && (
+        <span className="LinkStyledAsButton-visual LinkStyledAsButton-trailingAction">{arrow}</span>
+      )}
+    </a>
+    {focusElement && focusMethod()}
+  </>
+)
+
+export const Playground = LinkStyledAsButtonTemplate.bind({})
+Playground.args = {
+  focusElement: false,
+  active: false,
+  variant: 'LinkStyledAsButton--secondary',
+  leadingVisual: false,
+  showTrailingAction: false,
+  trailingVisual: false
+}
diff --git a/src/button-refactor/ButtonsLinksAPI.md b/src/button-refactor/ButtonsLinksAPI.md
index d28b727418..0cabed584f 100644
--- a/src/button-refactor/ButtonsLinksAPI.md
+++ b/src/button-refactor/ButtonsLinksAPI.md
@@ -2,38 +2,38 @@
 Button and Link has been discussed in a number of issues and discussions over past few years. I went through the list below, took note of their purpose and started compiling a new API spec. This doc is is meant to be collaborative and accompany Storybook docs while we work through a final API recommendation. Once we have a solid plan, this can move into an issue and be delegated across frameworks.
 
 Existing issues
-[x] https://github.com/github/primer/issues/141
-- Accessory button component, should reconcile with reaction button (sister component to Button)
-[x] https://github.com/github/primer/issues/220
-- Tracking issue, mentions Button in the context of API consistency
-[x] https://github.com/github/primer/issues/253
-- Button audit, anatomy spec, design considerations, some button link discussion, icon buttons (this issue is very informative!)
-[x] https://github.com/github/primer/issues/263
-- More design discussion, particularly focused on outline button
-[x] https://github.com/github/primer/issues/272
-- Make icon only buttons square
-[x] https://github.com/github/primer/issues/321
-- Super specific button use case?
-[x] https://github.com/github/primer/issues/350
-- a11y audit with task list for PVC
-[x] https://github.com/github/primer/issues/382
-- React button refactor
-[x] https://github.com/github/primer/issues/468
-- Visual bugs (colors, state)
-[x] https://github.com/github/primer/discussions/87
-- Discussion about accessory buttons
-[x] https://github.com/github/primer/discussions/211
-- Open ended discussion about primary button as dropdown
-[x] https://github.com/github/primer/discussions/459
-- Allie's thoughts on limiting icon only buttons and working towards encouraging visual labels
-[x] https://github.com/github/primer/discussions/477
-- Buttons styled as links, links styled as buttons
+- https://github.com/github/primer/issues/141
+  -- Accessory button component, should reconcile with reaction button (sister component to Button)
+- https://github.com/github/primer/issues/220
+  -- Tracking issue, mentions Button in the context of API consistency
+- https://github.com/github/primer/issues/253
+  -- Button audit, anatomy spec, design considerations, some button link discussion, icon buttons (this issue is very informative!)
+- https://github.com/github/primer/issues/263
+  -- More design discussion, particularly focused on outline button
+- https://github.com/github/primer/issues/272
+  -- Make icon only buttons square
+- https://github.com/github/primer/issues/321
+  -- Super specific button use case?
+- https://github.com/github/primer/issues/350
+  -- a11y audit with task list for PVC
+- https://github.com/github/primer/issues/382
+  -- React button refactor
+- https://github.com/github/primer/issues/468
+  -- Visual bugs (colors, state)
+- https://github.com/github/primer/discussions/87
+  -- Discussion about accessory buttons
+- https://github.com/github/primer/discussions/211
+  -- Open ended discussion about primary button as dropdown
+- https://github.com/github/primer/discussions/459
+  -- Allie's thoughts on limiting icon only buttons and working towards encouraging visual labels
+- https://github.com/github/primer/discussions/477
+  -- Buttons styled as links, links styled as buttons
 
 ## Specific notes from previous bugs to keep in mind
-[] Check all button variants have shadow present
-[] Ensure icon colors are consistent in hover states
-[] Ensure icon colors are consistent with variants in all states
-[] Ensure disabled colors are consistent across frameworks
+- [ ]  Check all button variants have shadow present
+- [ ]  Ensure icon colors are consistent in hover states
+- [ ]  Ensure icon colors are consistent with variants in all states
+- [ ]  Ensure disabled colors are consistent across frameworks
 
 ## Component list
 A few discussions were about naming and prop drilling (source here). We found that for Button to handle all of its use cases, we would need a large number of props– some conditional and dependent on one another. When that happens, it's typically a sign that the logic should be separated into another component.
@@ -42,11 +42,10 @@ A few discussions were about naming and prop drilling (source here). We found th
 | -- | -- |
 | Button | standard `button` with variants, size, visual slots |
 | IconButton | `button` with icon only (square) and required `aria-label` |
-| ButtonStyledAsLink | `button` that visually looks like a link |
 | ReactionButton | `button` snowflake with specific styles/interaction design (round) potentially a variant |
 | ButtonGroup | wrapper to handle grouping buttons |
 | Link | `a` with variants, optional trailing visuals |
-| LinkStyledAsButton | `a` with button variants, required trailing visuals |
+| LinkStyledAsButton | `a` with button variants, required trailing visual |
 
 ## Component API breakdown
 
@@ -54,7 +53,7 @@ A few discussions were about naming and prop drilling (source here). We found th
 
 | prop | type | options | default | notes |
 | -- | -- | -- | -- | -- |
-| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
+| `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
 | `size` | one-of string | `small` `default` `large` | `default | |
 | `label` | string | button description | null | |
 | `aria-label` | string | button description for screen readers | null | |
@@ -70,12 +69,12 @@ A few discussions were about naming and prop drilling (source here). We found th
 
 | prop | type | options | default | notes |
 | -- | -- | -- | -- | -- |
-| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
+| `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
 | `size` | one-of string | `small` `default` `large` | `default | |
 | `label` | string | button description | null | |
 | `leadingVisual` | children (slot) | octicon | null | |
 | `trailingVisual` | children (slot) | octicon | null | |
-| `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
+| `showTrailingAction` | arrow octicon | `true/false` | true? | show trailingVisual icon to indicate linkyness |
 | `fullWidth` | boolean | `true/false` | `false` | |
 | `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | lock icon to the text label or to the button container |
 
@@ -95,21 +94,7 @@ A few discussions were about naming and prop drilling (source here). We found th
 | -- | -- | -- | -- | -- |
 | `variant` | one-of string | ?? we need to work on this (subtle and or muted) | |
 | `label` | string | button description | null | |
-| `showTrailingVisual` | boolean | specific octicon for new tab or new page (or anchor?) | null | |
-
-### ButtonStyledAsLink
-
-| prop | type | options | default | notes |
-| -- | -- | -- | -- | -- |
-| `variant` | one-of string | see above confusion | `secondary` | |
-| `size` | one-of string | `small` `default` `large` | `default | |
-| `label` | string | button description | null | |
-| `aria-label` | string | button description for screen readers | null | |
-| `aria-pressed` | boolean | `true/false` | `false` | |
-| `leadingVisual` | children (slot) | octicon | null | |
-| `trailingVisual` | children (slot) | octicon | null | |
-| `fullWidth` | boolean | `true/false` | `false` | |
-| `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | I think this should be fixed for link styles (so maybe we dont need this prop) |
+| `showTrailingAction` | boolean | specific octicon for new tab or new page (or anchor?) | null | |
 
 ### ButtonGroup
 
@@ -117,24 +102,9 @@ A few discussions were about naming and prop drilling (source here). We found th
 | -- | -- | -- | -- | -- |
 | | | | |
 
-## Notes
-[] Should Button have a `secondary` but also default variant, or should it be the default with no additional class?
-[] How granular should icon positioning be?
-- If both trailingVisual and trailingAction exist, and visualPosition is `fixed`, the trailingVisual will "lock" to the trailingAction (unless we are more granular and specify different lock scenarios as props)
-- One idea would be to always lock trailingAction (always affix it to the right of a button which will only be visible on full width) and maintain visualPosition prop _only_ for visuals
-[] Thoughts on buttons with trailingAction having less margin-right?
-[] Should we think about underlining links with this work, or is that scope creep?
-[] Button styled as link is trickiest, and we need to decide how much logic that component can have compared to Button
-
-- Naming of trailingAction?
-- SplitButton
-  - Could be a composition or pattern?
-  - Accessibility
-- visualPosition trailingAction always locked to the right
-- trailingAction could be closer on the right (8px on the right)
-- compact button variant?
-- Giant words?
-- Large button 44px (when it could be used) 
-- requirement for invisible button with icon next to label
-- Maybe not need buttonstyledaslink
-- outline? ghost, muted, subtle
+## Next review session
+- [ ]  Help refine transition animations + tokenize
+- [ ]  Icon colors- same as button text, or specific?
+- [ ]  for `LinkStyledAsButton` should `trailingAction` slot be reserved for the > chevron indicating this is a link and not a button?
+- [ ]  What color should `invisible` button variant be? Blue or grey?
+- [ ]  No aria-label for `LinkStyledAsButton`
diff --git a/src/button-refactor/button-styled-as-link.scss b/src/button-refactor/button-group.scss
similarity index 100%
rename from src/button-refactor/button-styled-as-link.scss
rename to src/button-refactor/button-group.scss
diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index 34ece55a91..c59cf7e0d0 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -1,3 +1,4 @@
+// base button
 .Button {
   position: relative;
   font-size: $body-font-size;
@@ -11,56 +12,55 @@
   color: var(--color-btn-text);
   transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
   transition-property: color, background-color, border-color;
+  text-align: center;
   height: 32px;
   padding: 0 16px;
 
+  // define grid slots for standard buttons
   &:not(.Button--iconOnly) {
     display: grid;
     grid-template-areas: 'leadingVisual text trailingVisual trailingAction';
     grid-template-columns: min-content minmax(0, auto) min-content min-content;
     align-items: center;
-  }
 
-  // column-gap persists with empty grid-areas, margin applies only when children exist
-  > :not(:last-child) {
-    margin-right: $spacer-2;
+    // column-gap persists with empty grid-areas, margin applies only when children exist
+    > :not(:last-child) {
+      margin-right: $spacer-2;
+    }
   }
 
+  // base states
+
   &:hover,
-  &.hover,
   [open] > & {
-    background-color: var(--color-btn-hover-bg);
-    border-color: var(--color-btn-hover-border);
     transition-duration: 0.1s;
   }
 
-  &:active {
-    background-color: var(--color-btn-active-bg);
-    border-color: var(--color-btn-active-border);
+  &:active,
+  &.Button--active {
     transition: none;
   }
 
-  &.Button--pressed,
-  &[aria-pressed='true'] {
-    background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-primer-shadow-inset);
-  }
-
   &:disabled,
-  &.disabled,
+  &.Button--disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-btn-border);
-    fill: var(--color-primer-fg-disabled);
+    cursor: not-allowed;
+    box-shadow: none;
   }
 
+  &:focus {
+    @include focusOutline;
+  }
+
+  // sizes
+
   &.Button--small {
     height: 28px;
     font-size: $font-size-small;
   }
 
   &.Button--large {
+    height: 44px;
   }
 
   &.Button--fullWidth {
@@ -71,36 +71,36 @@
     }
   }
 
-  &.Button--default {
-    color: var(--color-btn-text);
-    background-color: var(--color-btn-bg);
-    border: $border-width $border-style;
-    border-color: var(--color-btn-border);
-    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+  &.Button-visual--fixed {
+    grid-template-columns: min-content min-content min-content min-content;
+    place-content: center;
   }
 
+  // variants
+
+  // primary
   &.Button--primary {
     color: var(--color-btn-primary-text);
+    fill: var(--color-btn-primary-icon);
     background-color: var(--color-btn-primary-bg);
     border-color: var(--color-btn-primary-border);
     box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
 
     &:hover,
-    &.hover,
     [open] > & {
       background-color: var(--color-btn-primary-hover-bg);
       border-color: var(--color-btn-primary-hover-border);
     }
 
     &:active,
-    &.Button--pressed,
-    &[aria-pressed='true'] {
+    &[aria-pressed='true'],
+    &.Button--pressed {
       background-color: var(--color-btn-primary-selected-bg);
       box-shadow: var(--color-btn-primary-selected-shadow);
     }
 
     &:disabled,
-    &.disabled,
+    &.Button--disabled,
     &[aria-disabled='true'] {
       color: var(--color-btn-primary-disabled-text);
       background-color: var(--color-btn-primary-disabled-bg);
@@ -109,58 +109,97 @@
     }
   }
 
+  // default (secondary)
   &.Button--secondary {
+    color: var(--color-btn-text);
+    fill: var(--color-fg-muted); // help this
+    background-color: var(--color-btn-bg);
+    border: $border-width $border-style;
+    border-color: var(--color-btn-border);
+    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+
+    &:hover,
+    [open] > & {
+      background-color: var(--color-btn-hover-bg);
+      border-color: var(--color-btn-hover-border);
+    }
+
+    &:active,
+    &.Button--active {
+      background-color: var(--color-btn-active-bg);
+      border-color: var(--color-btn-active-border);
+    }
+
+    &[aria-pressed='true'],
+    &.Button--pressed {
+      background-color: var(--color-btn-selected-bg);
+      box-shadow: var(--color-primer-shadow-inset);
+    }
+
+    &:disabled,
+    &.Button--disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-primer-fg-disabled);
+      background-color: var(--color-btn-bg);
+      border-color: var(--color-btn-border);
+      fill: var(--color-primer-fg-disabled);
+    }
   }
 
-  &.Button--outline {
+  &.Button--invisible {
     color: var(--color-btn-outline-text);
+    fill: var(--color-btn-outline-text);
+    background-color: var(--color-canvas-default);
+    border: $border-width $border-style;
+    border-color: var(--color-canvas-default);
 
     &:hover,
     [open] > & {
-      color: var(--color-btn-outline-hover-text);
-      background-color: var(--color-btn-outline-hover-bg);
-      border-color: var(--color-btn-outline-hover-border);
-      box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
+      background-color: var(--color-btn-hover-bg);
+      border-color: var(--color-btn-hover-bg);
     }
 
+    &[aria-pressed='true'],
     &:active,
-    &.Button--pressed,
-    &[aria-pressed='true'] {
-      color: var(--color-btn-outline-selected-text);
-      background-color: var(--color-btn-outline-selected-bg);
-      border-color: var(--color-btn-outline-selected-border);
-      box-shadow: var(--color-btn-outline-selected-shadow);
+    &.Button--active,
+    &.Button--pressed {
+      background-color: var(--color-btn-selected-bg);
+      box-shadow: var(--color-primer-shadow-inset);
     }
 
     &:disabled,
-    &.disabled,
+    &.Button--disabled,
     &[aria-disabled='true'] {
-      color: var(--color-btn-outline-disabled-text);
-      background-color: var(--color-btn-outline-disabled-bg);
+      color: var(--color-primer-fg-disabled);
+      background-color: var(--color-btn-bg);
       border-color: var(--color-btn-border);
-      box-shadow: none;
+      fill: var(--color-primer-fg-disabled);
     }
   }
 
+  // danger
   &.Button--danger {
     color: var(--color-btn-danger-text);
-
-    .octicon {
-      color: var(--color-btn-danger-icon);
-    }
+    fill: var(--color-btn-danger-icon);
+    background-color: var(--color-btn-bg);
+    border: $border-width $border-style;
+    border-color: var(--color-btn-border);
+    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
 
     &:hover,
     [open] > & {
       color: var(--color-btn-danger-hover-text);
+      fill: var(--color-btn-danger-hover-text);
       background-color: var(--color-btn-danger-hover-bg);
       border-color: var(--color-btn-danger-hover-border);
       box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
     }
 
     &:active,
-    &.Button--pressed,
-    &[aria-pressed='true'] {
+    &[aria-pressed='true'],
+    &.Button--pressed {
       color: var(--color-btn-danger-selected-text);
+      fill: var(--color-btn-danger-selected-text);
       background-color: var(--color-btn-danger-selected-bg);
       border-color: var(--color-btn-danger-selected-border);
       box-shadow: var(--color-btn-danger-selected-shadow);
@@ -170,27 +209,20 @@
     &.disabled,
     &[aria-disabled='true'] {
       color: var(--color-btn-danger-disabled-text);
+      fill: var(--color-btn-danger-disabled-text);
       background-color: var(--color-btn-danger-disabled-bg);
       border-color: var(--color-btn-border);
-      box-shadow: none;
     }
   }
 }
 
+// button child elements
+
 .Button-label {
   grid-area: text;
   white-space: nowrap;
 }
 
-.Button-visual {
-  display: flex;
-}
-
-.Button-visual--fixed {
-  grid-template-columns: min-content min-content min-content min-content;
-  place-content: center;
-}
-
 .Button-leadingVisual {
   grid-area: leadingVisual;
 }
@@ -201,4 +233,9 @@
 
 .Button-trailingAction {
   grid-area: trailingAction;
+  margin-right: -8px;
+}
+
+.Button-visual {
+  display: flex;
 }
diff --git a/src/button-refactor/link-styled-as-button.scss b/src/button-refactor/link-styled-as-button.scss
index e69de29bb2..85ee4d44bf 100644
--- a/src/button-refactor/link-styled-as-button.scss
+++ b/src/button-refactor/link-styled-as-button.scss
@@ -0,0 +1,235 @@
+// base button
+.LinkStyledAsButton {
+  position: relative;
+  font-size: $body-font-size;
+  font-weight: $font-weight-semibold;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: $border-width $border-style;
+  border-color: transparent;
+  border-radius: $border-radius;
+  color: var(--color-btn-text);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
+  text-align: center;
+  height: 32px;
+  padding: 0 16px;
+
+  // define grid slots for standard buttons
+  &:not(.LinkStyledAsButton--iconOnly) {
+    display: inline-grid;
+    grid-template-areas: 'leadingVisual text trailingVisual trailingAction';
+    grid-template-columns: min-content minmax(0, auto) min-content min-content;
+    align-items: center;
+
+    // column-gap persists with empty grid-areas, margin applies only when children exist
+    > :not(:last-child) {
+      margin-right: $spacer-2;
+    }
+  }
+
+  // base states
+
+  &:hover,
+  [open] > & {
+    transition-duration: 0.1s;
+    text-decoration: none;
+  }
+
+  &:active,
+  &.LinkStyledAsButton--active {
+    transition: none;
+  }
+
+  &:focus {
+    @include focusOutline;
+  }
+
+  // sizes
+
+  &.LinkStyledAsButton--small {
+    height: 28px;
+    font-size: $font-size-small;
+  }
+
+  &.LinkStyledAsButton--large {
+    height: 44px;
+  }
+
+  &.LinkStyledAsButton--fullWidth {
+    width: 100%;
+
+    .LinkStyledAsButton-trailingVisual {
+      margin-left: auto;
+    }
+  }
+
+  // variants
+
+  // primary
+  &.LinkStyledAsButton--primary {
+    color: var(--color-btn-primary-text);
+    fill: var(--color-btn-primary-icon);
+    background-color: var(--color-btn-primary-bg);
+    border-color: var(--color-btn-primary-border);
+    box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+
+    &:hover,
+    [open] > & {
+      background-color: var(--color-btn-primary-hover-bg);
+      border-color: var(--color-btn-primary-hover-border);
+    }
+
+    &:active,
+    &[aria-pressed='true'],
+    &.Button--pressed {
+      background-color: var(--color-btn-primary-selected-bg);
+      box-shadow: var(--color-btn-primary-selected-shadow);
+    }
+
+    &:disabled,
+    &.Button--disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-btn-primary-disabled-text);
+      background-color: var(--color-btn-primary-disabled-bg);
+      border-color: var(--color-btn-primary-disabled-border);
+      fill: var(--color-btn-primary-disabled-text);
+    }
+  }
+
+  // default (secondary)
+  &.LinkStyledAsButton--secondary {
+    color: var(--color-btn-text);
+    fill: var(--color-fg-muted); // help this
+    background-color: var(--color-btn-bg);
+    border: $border-width $border-style;
+    border-color: var(--color-btn-border);
+    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+
+    &:hover,
+    [open] > & {
+      background-color: var(--color-btn-hover-bg);
+      border-color: var(--color-btn-hover-border);
+    }
+
+    &:active,
+    &.Button--active {
+      background-color: var(--color-btn-active-bg);
+      border-color: var(--color-btn-active-border);
+    }
+
+    &[aria-pressed='true'],
+    &.Button--pressed {
+      background-color: var(--color-btn-selected-bg);
+      box-shadow: var(--color-primer-shadow-inset);
+    }
+
+    &:disabled,
+    &.Button--disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-primer-fg-disabled);
+      background-color: var(--color-btn-bg);
+      border-color: var(--color-btn-border);
+      fill: var(--color-primer-fg-disabled);
+    }
+  }
+
+  &.LinkStyledAsButton--invisible {
+    color: var(--color-btn-outline-text);
+    fill: var(--color-btn-outline-text);
+    background-color: var(--color-canvas-default);
+    border: $border-width $border-style;
+    border-color: var(--color-canvas-default);
+
+    &:hover,
+    [open] > & {
+      background-color: var(--color-btn-hover-bg);
+      border-color: var(--color-btn-hover-bg);
+    }
+
+    &[aria-pressed='true'],
+    &:active,
+    &.Button--active,
+    &.Button--pressed {
+      background-color: var(--color-btn-selected-bg);
+      box-shadow: var(--color-primer-shadow-inset);
+    }
+
+    &:disabled,
+    &.Button--disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-primer-fg-disabled);
+      background-color: var(--color-btn-bg);
+      border-color: var(--color-btn-border);
+      fill: var(--color-primer-fg-disabled);
+    }
+  }
+
+  // danger
+  &.LinkStyledAsButton--danger {
+    color: var(--color-btn-danger-text);
+    fill: var(--color-btn-danger-icon);
+    background-color: var(--color-btn-bg);
+    border: $border-width $border-style;
+    border-color: var(--color-btn-border);
+    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+
+    &:hover,
+    [open] > & {
+      color: var(--color-btn-danger-hover-text);
+      fill: var(--color-btn-danger-hover-text);
+      background-color: var(--color-btn-danger-hover-bg);
+      border-color: var(--color-btn-danger-hover-border);
+      box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+    }
+
+    &:active,
+    &[aria-pressed='true'],
+    &.Button--pressed {
+      color: var(--color-btn-danger-selected-text);
+      fill: var(--color-btn-danger-selected-text);
+      background-color: var(--color-btn-danger-selected-bg);
+      border-color: var(--color-btn-danger-selected-border);
+      box-shadow: var(--color-btn-danger-selected-shadow);
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-btn-danger-disabled-text);
+      fill: var(--color-btn-danger-disabled-text);
+      background-color: var(--color-btn-danger-disabled-bg);
+      border-color: var(--color-btn-border);
+    }
+  }
+}
+
+// button child elements
+
+.LinkStyledAsButton-label {
+  grid-area: text;
+  white-space: nowrap;
+}
+
+.LinkStyledAsButton-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.LinkStyledAsButton-trailingVisual {
+  grid-area: trailingVisual;
+}
+
+.LinkStyledAsButton-trailingAction {
+  grid-area: trailingAction;
+  margin-right: -8px;
+}
+
+.LinkStyledAsButton-visual {
+  display: flex;
+}
+
+.LinkStyledAsButton-visual--fixed {
+  grid-template-columns: min-content min-content min-content min-content;
+  place-content: center;
+}
diff --git a/src/button-refactor/link.scss b/src/button-refactor/link.scss
index 1cd33bf5c5..d08246fcf3 100644
--- a/src/button-refactor/link.scss
+++ b/src/button-refactor/link.scss
@@ -1,5 +1,3 @@
-// Links
-
 .Link {
   color: var(--color-accent-fg);
 
@@ -7,55 +5,21 @@
     text-decoration: underline;
     cursor: pointer;
   }
+
+  // variants
+
+  &.Link--muted {
+    color: var(--color-fg-muted);
+
+    &:hover {
+      color: var(--color-accent-fg);
+    }
+  }
 }
 
-.Link--trailingVisual {
+.Link-trailingVisual {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 4px;
 }
-// .Link--primary {
-//   color: var(--color-fg-default) !important;
-
-//   &:hover {
-//     color: var(--color-accent-fg) !important;
-//   }
-// }
-
-// .Link--secondary {
-//   color: var(--color-fg-muted) !important;
-
-//   &:hover {
-//     color: var(--color-accent-fg) !important;
-//   }
-// }
-
-// .Link--muted {
-//   color: var(--color-fg-muted) !important;
-
-//   &:hover {
-//     color: var(--color-accent-fg) !important;
-//     text-decoration: none;
-//   }
-// }
-
-// // Set the link color only on hover
-// // Useful when you want only part of a link to turn blue on hover
-// .Link--onHover {
-//   &:hover {
-//     color: var(--color-accent-fg) !important;
-//     text-decoration: underline;
-//     cursor: pointer;
-//   }
-// }
-
-// // When using a color utility class inside of a link class,
-// // color should change with link on hover.
-// .Link--secondary,
-// .Link--primary,
-// .Link--muted {
-//   &:hover [class*='color-text'] {
-//     color: inherit !important;
-//   }
-// }
diff --git a/src/core/index.scss b/src/core/index.scss
index 611d9ddb55..438d756c73 100644
--- a/src/core/index.scss
+++ b/src/core/index.scss
@@ -27,7 +27,7 @@
 @import '../button-refactor/button.scss';
 @import '../button-refactor/link.scss';
 @import '../button-refactor/icon-button.scss';
-@import '../button-refactor/button-styled-as-link.scss';
 @import '../button-refactor/link-styled-as-button.scss';
+@import '../button-refactor/button-group.scss';
 // Utilities always go last so that they can override components
 @import '../utilities/index.scss';
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index c27ac96a75..05d908a1d9 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -24,3 +24,10 @@
     background-color: $border;
   }
 }
+
+// global focus styles (copy from open PR)
+
+@mixin focusOutline {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: 2px;
+}

From 6cc2f68ae5b63ce07220eb9f1f3f373423cea0f1 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 20 Jan 2022 10:41:15 -0800
Subject: [PATCH 06/16] slight refactor to handle trailingAction locked

---
 .../stories/explorations/Button.stories.jsx   |  13 +-
 .../LinkStyledAsButton.stories.jsx            |  11 +-
 src/button-refactor/ButtonsLinksAPI.md        |   1 +
 src/button-refactor/button.scss               | 348 +++++++++---------
 src/button-refactor/icon-button.scss          |   4 +
 .../link-styled-as-button.scss                | 256 +++----------
 6 files changed, 242 insertions(+), 391 deletions(-)

diff --git a/docs/src/stories/explorations/Button.stories.jsx b/docs/src/stories/explorations/Button.stories.jsx
index 38dfe162df..6e99b67dbb 100644
--- a/docs/src/stories/explorations/Button.stories.jsx
+++ b/docs/src/stories/explorations/Button.stories.jsx
@@ -41,7 +41,7 @@ export default {
     },
     visualPosition: {
       options: [0, 1], // iterator
-      mapping: [null, 'Button-visual--fixed'], // values
+      mapping: [null, 'Button-content--visualFixed'], // values
       control: {
         type: 'inline-radio',
         labels: ['default', 'fixed']
@@ -51,7 +51,7 @@ export default {
       },
       description:
         '[Name TBD!] Controls where the leading or trailing visuals position themselves in a fullWidth button (lock to text label or button bounds)',
-      defaultValue: 'Button-visual--fixed'
+      defaultValue: 'Button-content--visualFixed'
     },
     label: {
       defaultValue: 'Button',
@@ -184,16 +184,17 @@ export const ButtonTemplate = ({
         variant && `${variant}`,
         size && `${size}`,
         fullWidth && 'Button--fullWidth',
-        visualPosition && `${visualPosition}`,
         active && 'Button--active'
       )}
       aria-pressed={pressed ? pressed : undefined}
       aria-label={ariaLabel ? ariaLabel : undefined}
     >
       {/* {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />} */}
-      {leadingVisual && <span className="Button-visual Button-leadingVisual">{star}</span>}
-      <span className="Button-label">{label}</span>
-      {trailingVisual && <span className="Button-visual Button-trailingVisual">{star}</span>}
+      <span className={clsx(visualPosition && `${visualPosition}`, 'Button-content')}>
+        {leadingVisual && <span className="Button-visual Button-leadingVisual">{star}</span>}
+        <span className="Button-label">{label}</span>
+        {trailingVisual && <span className="Button-visual Button-trailingVisual">{star}</span>}
+      </span>
       {trailingAction && <span className="Button-visual Button-trailingAction">{caret}</span>}
     </button>
     {focusElement && focusMethod()}
diff --git a/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
index 9413b1c112..3387d1244a 100644
--- a/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
+++ b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
@@ -46,7 +46,7 @@ export default {
     },
     visualPosition: {
       options: [0, 1], // iterator
-      mapping: [null, 'Button-visual--fixed'], // values
+      mapping: [null, 'LinkStyledAsButton-content--visualFixed'], // values
       control: {
         type: 'inline-radio',
         labels: ['default', 'fixed']
@@ -201,14 +201,15 @@ export const LinkStyledAsButtonTemplate = ({
         variant && `${variant}`,
         size && `${size}`,
         fullWidth && 'LinkStyledAsButton--fullWidth',
-        visualPosition && `${visualPosition}`,
         active && 'LinkStyledAsButton--active'
       )}
     >
       {/* {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />} */}
-      {leadingVisual && <span className="LinkStyledAsButton-visual LinkStyledAsButton-leadingVisual">{star}</span>}
-      <span className="LinkStyledAsButton-label">{label}</span>
-      {trailingVisual && <span className="LinkStyledAsButton-visual LinkStyledAsButton-trailingVisual">{star}</span>}
+      <span className={clsx(visualPosition && `${visualPosition}`, 'LinkStyledAsButton-content')}>
+        {leadingVisual && <span className="LinkStyledAsButton-visual LinkStyledAsButton-leadingVisual">{star}</span>}
+        <span className="LinkStyledAsButton-label">{label}</span>
+        {trailingVisual && <span className="LinkStyledAsButton-visual LinkStyledAsButton-trailingVisual">{star}</span>}
+      </span>
       {showTrailingAction && (
         <span className="LinkStyledAsButton-visual LinkStyledAsButton-trailingAction">{arrow}</span>
       )}
diff --git a/src/button-refactor/ButtonsLinksAPI.md b/src/button-refactor/ButtonsLinksAPI.md
index 0cabed584f..edd6ba45e5 100644
--- a/src/button-refactor/ButtonsLinksAPI.md
+++ b/src/button-refactor/ButtonsLinksAPI.md
@@ -108,3 +108,4 @@ A few discussions were about naming and prop drilling (source here). We found th
 - [ ]  for `LinkStyledAsButton` should `trailingAction` slot be reserved for the > chevron indicating this is a link and not a button?
 - [ ]  What color should `invisible` button variant be? Blue or grey?
 - [ ]  No aria-label for `LinkStyledAsButton`
+- [ ]  Do we like `fullWidth` or `block` as a prop for width behavior?
diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index c59cf7e0d0..02a865f96e 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -16,18 +16,13 @@
   height: 32px;
   padding: 0 16px;
 
-  // define grid slots for standard buttons
-  &:not(.Button--iconOnly) {
-    display: grid;
-    grid-template-areas: 'leadingVisual text trailingVisual trailingAction';
-    grid-template-columns: min-content minmax(0, auto) min-content min-content;
-    align-items: center;
-
-    // column-gap persists with empty grid-areas, margin applies only when children exist
-    > :not(:last-child) {
-      margin-right: $spacer-2;
-    }
-  }
+  // define grid slots and layout for standard button contents
+  //   &:not(.Button--iconOnly) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacer-2;
 
   // base states
 
@@ -51,191 +46,200 @@
   &:focus {
     @include focusOutline;
   }
+}
 
-  // sizes
+// wrap grid content to allow trailingAction to lock-right
+.Button-content {
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: 'leadingVisual text trailingVisual';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+  align-items: center;
 
-  &.Button--small {
-    height: 28px;
-    font-size: $font-size-small;
+  > :not(:last-child) {
+    margin-right: $spacer-2;
   }
+}
 
-  &.Button--large {
-    height: 44px;
-  }
+// center child elements for fullWidth
+.Button-content--visualFixed {
+  place-content: center;
+}
+
+// button child elements
+
+// align svg
+.Button-visual {
+  display: flex;
+}
 
-  &.Button--fullWidth {
-    width: 100%;
+.Button-label {
+  grid-area: text;
+  white-space: nowrap;
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
 
-    .Button-trailingVisual {
-      margin-left: auto;
-    }
+.Button-trailingAction {
+  margin-right: -8px;
+}
+
+// sizes
+
+.Button--small {
+  height: 28px;
+  font-size: $font-size-small;
+}
+
+.Button--large {
+  height: 44px;
+}
+
+.Button--fullWidth {
+  width: 100%;
+}
+
+// variants
+
+// primary
+.Button--primary {
+  color: var(--color-btn-primary-text);
+  fill: var(--color-btn-primary-icon);
+  background-color: var(--color-btn-primary-bg);
+  border-color: var(--color-btn-primary-border);
+  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+
+  &:hover,
+  [open] > & {
+    background-color: var(--color-btn-primary-hover-bg);
+    border-color: var(--color-btn-primary-hover-border);
   }
 
-  &.Button-visual--fixed {
-    grid-template-columns: min-content min-content min-content min-content;
-    place-content: center;
+  &:active,
+  &[aria-pressed='true'],
+  &.Button--pressed {
+    background-color: var(--color-btn-primary-selected-bg);
+    box-shadow: var(--color-btn-primary-selected-shadow);
   }
 
-  // variants
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-primary-disabled-text);
+    background-color: var(--color-btn-primary-disabled-bg);
+    border-color: var(--color-btn-primary-disabled-border);
+    fill: var(--color-btn-primary-disabled-text);
+  }
+}
 
-  // primary
-  &.Button--primary {
-    color: var(--color-btn-primary-text);
-    fill: var(--color-btn-primary-icon);
-    background-color: var(--color-btn-primary-bg);
-    border-color: var(--color-btn-primary-border);
-    box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+// default (secondary)
+.Button--secondary {
+  color: var(--color-btn-text);
+  fill: var(--color-fg-muted); // help this
+  background-color: var(--color-btn-bg);
+  border: $border-width $border-style;
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
 
-    &:hover,
-    [open] > & {
-      background-color: var(--color-btn-primary-hover-bg);
-      border-color: var(--color-btn-primary-hover-border);
-    }
+  &:hover,
+  [open] > & {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
+  }
 
-    &:active,
-    &[aria-pressed='true'],
-    &.Button--pressed {
-      background-color: var(--color-btn-primary-selected-bg);
-      box-shadow: var(--color-btn-primary-selected-shadow);
-    }
+  &:active,
+  &.Button--active {
+    background-color: var(--color-btn-active-bg);
+    border-color: var(--color-btn-active-border);
+  }
 
-    &:disabled,
-    &.Button--disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-btn-primary-disabled-text);
-      background-color: var(--color-btn-primary-disabled-bg);
-      border-color: var(--color-btn-primary-disabled-border);
-      fill: var(--color-btn-primary-disabled-text);
-    }
+  &[aria-pressed='true'],
+  &.Button--pressed {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
   }
 
-  // default (secondary)
-  &.Button--secondary {
-    color: var(--color-btn-text);
-    fill: var(--color-fg-muted); // help this
-    background-color: var(--color-btn-bg);
-    border: $border-width $border-style;
-    border-color: var(--color-btn-border);
-    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-
-    &:hover,
-    [open] > & {
-      background-color: var(--color-btn-hover-bg);
-      border-color: var(--color-btn-hover-border);
-    }
-
-    &:active,
-    &.Button--active {
-      background-color: var(--color-btn-active-bg);
-      border-color: var(--color-btn-active-border);
-    }
-
-    &[aria-pressed='true'],
-    &.Button--pressed {
-      background-color: var(--color-btn-selected-bg);
-      box-shadow: var(--color-primer-shadow-inset);
-    }
-
-    &:disabled,
-    &.Button--disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-primer-fg-disabled);
-      background-color: var(--color-btn-bg);
-      border-color: var(--color-btn-border);
-      fill: var(--color-primer-fg-disabled);
-    }
-  }
-
-  &.Button--invisible {
-    color: var(--color-btn-outline-text);
-    fill: var(--color-btn-outline-text);
-    background-color: var(--color-canvas-default);
-    border: $border-width $border-style;
-    border-color: var(--color-canvas-default);
-
-    &:hover,
-    [open] > & {
-      background-color: var(--color-btn-hover-bg);
-      border-color: var(--color-btn-hover-bg);
-    }
-
-    &[aria-pressed='true'],
-    &:active,
-    &.Button--active,
-    &.Button--pressed {
-      background-color: var(--color-btn-selected-bg);
-      box-shadow: var(--color-primer-shadow-inset);
-    }
-
-    &:disabled,
-    &.Button--disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-primer-fg-disabled);
-      background-color: var(--color-btn-bg);
-      border-color: var(--color-btn-border);
-      fill: var(--color-primer-fg-disabled);
-    }
-  }
-
-  // danger
-  &.Button--danger {
-    color: var(--color-btn-danger-text);
-    fill: var(--color-btn-danger-icon);
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
     background-color: var(--color-btn-bg);
-    border: $border-width $border-style;
     border-color: var(--color-btn-border);
-    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-
-    &:hover,
-    [open] > & {
-      color: var(--color-btn-danger-hover-text);
-      fill: var(--color-btn-danger-hover-text);
-      background-color: var(--color-btn-danger-hover-bg);
-      border-color: var(--color-btn-danger-hover-border);
-      box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
-    }
-
-    &:active,
-    &[aria-pressed='true'],
-    &.Button--pressed {
-      color: var(--color-btn-danger-selected-text);
-      fill: var(--color-btn-danger-selected-text);
-      background-color: var(--color-btn-danger-selected-bg);
-      border-color: var(--color-btn-danger-selected-border);
-      box-shadow: var(--color-btn-danger-selected-shadow);
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-btn-danger-disabled-text);
-      fill: var(--color-btn-danger-disabled-text);
-      background-color: var(--color-btn-danger-disabled-bg);
-      border-color: var(--color-btn-border);
-    }
+    fill: var(--color-primer-fg-disabled);
   }
 }
 
-// button child elements
+.Button--invisible {
+  color: var(--color-btn-outline-text);
+  fill: var(--color-btn-outline-text);
+  background-color: var(--color-canvas-default);
+  border: $border-width $border-style;
+  border-color: var(--color-canvas-default);
 
-.Button-label {
-  grid-area: text;
-  white-space: nowrap;
-}
+  &:hover,
+  [open] > & {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-bg);
+  }
 
-.Button-leadingVisual {
-  grid-area: leadingVisual;
-}
+  &[aria-pressed='true'],
+  &:active,
+  &.Button--active,
+  &.Button--pressed {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
+  }
 
-.Button-trailingVisual {
-  grid-area: trailingVisual;
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-primer-fg-disabled);
+  }
 }
 
-.Button-trailingAction {
-  grid-area: trailingAction;
-  margin-right: -8px;
-}
+// danger
+.Button--danger {
+  color: var(--color-btn-danger-text);
+  fill: var(--color-btn-danger-icon);
+  background-color: var(--color-btn-bg);
+  border: $border-width $border-style;
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
 
-.Button-visual {
-  display: flex;
+  &:hover,
+  [open] > & {
+    color: var(--color-btn-danger-hover-text);
+    fill: var(--color-btn-danger-hover-text);
+    background-color: var(--color-btn-danger-hover-bg);
+    border-color: var(--color-btn-danger-hover-border);
+    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+  }
+
+  &:active,
+  &[aria-pressed='true'],
+  &.Button--pressed {
+    color: var(--color-btn-danger-selected-text);
+    fill: var(--color-btn-danger-selected-text);
+    background-color: var(--color-btn-danger-selected-bg);
+    border-color: var(--color-btn-danger-selected-border);
+    box-shadow: var(--color-btn-danger-selected-shadow);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-danger-disabled-text);
+    fill: var(--color-btn-danger-disabled-text);
+    background-color: var(--color-btn-danger-disabled-bg);
+    border-color: var(--color-btn-border);
+  }
 }
diff --git a/src/button-refactor/icon-button.scss b/src/button-refactor/icon-button.scss
index d2e849689c..001f59f2dc 100644
--- a/src/button-refactor/icon-button.scss
+++ b/src/button-refactor/icon-button.scss
@@ -7,4 +7,8 @@
   &.Button--small {
     width: 28px;
   }
+
+  &.Button--large {
+    width: 44px;
+  }
 }
diff --git a/src/button-refactor/link-styled-as-button.scss b/src/button-refactor/link-styled-as-button.scss
index 85ee4d44bf..153bf405b2 100644
--- a/src/button-refactor/link-styled-as-button.scss
+++ b/src/button-refactor/link-styled-as-button.scss
@@ -1,235 +1,75 @@
-// base button
+// base link
 .LinkStyledAsButton {
-  position: relative;
-  font-size: $body-font-size;
-  font-weight: $font-weight-semibold;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: $border-width $border-style;
-  border-color: transparent;
-  border-radius: $border-radius;
-  color: var(--color-btn-text);
-  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  transition-property: color, background-color, border-color;
-  text-align: center;
-  height: 32px;
-  padding: 0 16px;
-
-  // define grid slots for standard buttons
-  &:not(.LinkStyledAsButton--iconOnly) {
-    display: inline-grid;
-    grid-template-areas: 'leadingVisual text trailingVisual trailingAction';
-    grid-template-columns: min-content minmax(0, auto) min-content min-content;
-    align-items: center;
-
-    // column-gap persists with empty grid-areas, margin applies only when children exist
-    > :not(:last-child) {
-      margin-right: $spacer-2;
-    }
-  }
-
-  // base states
+  @extend .Button;
+  display: inline-flex;
 
-  &:hover,
-  [open] > & {
-    transition-duration: 0.1s;
+  &:hover {
     text-decoration: none;
   }
+}
 
-  &:active,
-  &.LinkStyledAsButton--active {
-    transition: none;
-  }
-
-  &:focus {
-    @include focusOutline;
-  }
+.LinkStyledAsButton-content {
+  @extend .Button-content;
+}
 
-  // sizes
+.LinkStyledAsButton-content--visualFixed {
+  @extend .Button-content--visualFixed;
+}
 
-  &.LinkStyledAsButton--small {
-    height: 28px;
-    font-size: $font-size-small;
-  }
+// link child elements
 
-  &.LinkStyledAsButton--large {
-    height: 44px;
-  }
+.LinkStyledAsButton-visual {
+  @extend .Button-visual;
+}
 
-  &.LinkStyledAsButton--fullWidth {
-    width: 100%;
+.LinkStyledAsButton-label {
+  @extend .Button-label;
+}
 
-    .LinkStyledAsButton-trailingVisual {
-      margin-left: auto;
-    }
-  }
+.LinkStyledAsButton-leadingVisual {
+  @extend .Button-leadingVisual;
+}
 
-  // variants
-
-  // primary
-  &.LinkStyledAsButton--primary {
-    color: var(--color-btn-primary-text);
-    fill: var(--color-btn-primary-icon);
-    background-color: var(--color-btn-primary-bg);
-    border-color: var(--color-btn-primary-border);
-    box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
-
-    &:hover,
-    [open] > & {
-      background-color: var(--color-btn-primary-hover-bg);
-      border-color: var(--color-btn-primary-hover-border);
-    }
-
-    &:active,
-    &[aria-pressed='true'],
-    &.Button--pressed {
-      background-color: var(--color-btn-primary-selected-bg);
-      box-shadow: var(--color-btn-primary-selected-shadow);
-    }
-
-    &:disabled,
-    &.Button--disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-btn-primary-disabled-text);
-      background-color: var(--color-btn-primary-disabled-bg);
-      border-color: var(--color-btn-primary-disabled-border);
-      fill: var(--color-btn-primary-disabled-text);
-    }
-  }
+.LinkStyledAsButton-trailingVisual {
+  @extend .Button-trailingVisual;
+}
 
-  // default (secondary)
-  &.LinkStyledAsButton--secondary {
-    color: var(--color-btn-text);
-    fill: var(--color-fg-muted); // help this
-    background-color: var(--color-btn-bg);
-    border: $border-width $border-style;
-    border-color: var(--color-btn-border);
-    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-
-    &:hover,
-    [open] > & {
-      background-color: var(--color-btn-hover-bg);
-      border-color: var(--color-btn-hover-border);
-    }
-
-    &:active,
-    &.Button--active {
-      background-color: var(--color-btn-active-bg);
-      border-color: var(--color-btn-active-border);
-    }
-
-    &[aria-pressed='true'],
-    &.Button--pressed {
-      background-color: var(--color-btn-selected-bg);
-      box-shadow: var(--color-primer-shadow-inset);
-    }
-
-    &:disabled,
-    &.Button--disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-primer-fg-disabled);
-      background-color: var(--color-btn-bg);
-      border-color: var(--color-btn-border);
-      fill: var(--color-primer-fg-disabled);
-    }
-  }
+.LinkStyledAsButton-trailingAction {
+  @extend .Button-trailingAction;
+}
 
-  &.LinkStyledAsButton--invisible {
-    color: var(--color-btn-outline-text);
-    fill: var(--color-btn-outline-text);
-    background-color: var(--color-canvas-default);
-    border: $border-width $border-style;
-    border-color: var(--color-canvas-default);
-
-    &:hover,
-    [open] > & {
-      background-color: var(--color-btn-hover-bg);
-      border-color: var(--color-btn-hover-bg);
-    }
-
-    &[aria-pressed='true'],
-    &:active,
-    &.Button--active,
-    &.Button--pressed {
-      background-color: var(--color-btn-selected-bg);
-      box-shadow: var(--color-primer-shadow-inset);
-    }
-
-    &:disabled,
-    &.Button--disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-primer-fg-disabled);
-      background-color: var(--color-btn-bg);
-      border-color: var(--color-btn-border);
-      fill: var(--color-primer-fg-disabled);
-    }
-  }
+// sizes
 
-  // danger
-  &.LinkStyledAsButton--danger {
-    color: var(--color-btn-danger-text);
-    fill: var(--color-btn-danger-icon);
-    background-color: var(--color-btn-bg);
-    border: $border-width $border-style;
-    border-color: var(--color-btn-border);
-    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-
-    &:hover,
-    [open] > & {
-      color: var(--color-btn-danger-hover-text);
-      fill: var(--color-btn-danger-hover-text);
-      background-color: var(--color-btn-danger-hover-bg);
-      border-color: var(--color-btn-danger-hover-border);
-      box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
-    }
-
-    &:active,
-    &[aria-pressed='true'],
-    &.Button--pressed {
-      color: var(--color-btn-danger-selected-text);
-      fill: var(--color-btn-danger-selected-text);
-      background-color: var(--color-btn-danger-selected-bg);
-      border-color: var(--color-btn-danger-selected-border);
-      box-shadow: var(--color-btn-danger-selected-shadow);
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-btn-danger-disabled-text);
-      fill: var(--color-btn-danger-disabled-text);
-      background-color: var(--color-btn-danger-disabled-bg);
-      border-color: var(--color-btn-border);
-    }
-  }
+.LinkStyledAsButton--small {
+  @extend .Button--small;
 }
 
-// button child elements
-
-.LinkStyledAsButton-label {
-  grid-area: text;
-  white-space: nowrap;
+.LinkStyledAsButton--large {
+  @extend .Button--large;
 }
 
-.LinkStyledAsButton-leadingVisual {
-  grid-area: leadingVisual;
+.LinkStyledAsButton--fullWidth {
+  @extend .Button--fullWidth;
 }
 
-.LinkStyledAsButton-trailingVisual {
-  grid-area: trailingVisual;
+// variants
+
+// primary
+.LinkStyledAsButton--primary {
+  @extend .Button--primary;
 }
 
-.LinkStyledAsButton-trailingAction {
-  grid-area: trailingAction;
-  margin-right: -8px;
+// default (secondary)
+.LinkStyledAsButton--secondary {
+  @extend .Button--secondary;
 }
 
-.LinkStyledAsButton-visual {
-  display: flex;
+// invisible
+.LinkStyledAsButton--invisible {
+  @extend .Button--invisible;
 }
 
-.LinkStyledAsButton-visual--fixed {
-  grid-template-columns: min-content min-content min-content min-content;
-  place-content: center;
+// danger
+.LinkStyledAsButton--danger {
+  @extend .Button--danger;
 }

From 3d882214340a96f5518b3f6df95cde77e26b5e51 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 20 Jan 2022 11:32:14 -0800
Subject: [PATCH 07/16] button group

---
 .../explorations/ButtonGroup.stories.jsx      | 24 +++++++++++++++++
 src/button-refactor/ButtonsLinksAPI.md        |  9 ++++---
 src/button-refactor/button-group.scss         | 27 +++++++++++++++++++
 3 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/stories/explorations/ButtonGroup.stories.jsx

diff --git a/docs/src/stories/explorations/ButtonGroup.stories.jsx b/docs/src/stories/explorations/ButtonGroup.stories.jsx
new file mode 100644
index 0000000000..b91ae511cd
--- /dev/null
+++ b/docs/src/stories/explorations/ButtonGroup.stories.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from './Button.stories'
+import {IconButtonTemplate} from './IconButton.stories'
+
+export default {
+  title: 'Explorations/ButtonGroup',
+  excludeStories: ['ButtonGroupTemplate'],
+  layout: 'padded',
+  argTypes: {}
+}
+
+// build every component case here in the template (private api)
+export const ButtonGroupTemplate = ({}) => (
+  <div className="ButtonGroup">
+    <ButtonTemplate label="Button 1" variant="Button--secondary" className="ButtonGroup-item" />
+    <ButtonTemplate label="Button 2" variant="Button--secondary" className="ButtonGroup-item" pressed />
+    <ButtonTemplate label="Button 3" variant="Button--secondary" className="ButtonGroup-item" />
+    <IconButtonTemplate ariaLabel="label" visual variant="Button--secondary" className="ButtonGroup-item" />
+  </div>
+)
+
+export const Playground = ButtonGroupTemplate.bind({})
+Playground.args = {}
diff --git a/src/button-refactor/ButtonsLinksAPI.md b/src/button-refactor/ButtonsLinksAPI.md
index edd6ba45e5..fbe1dc04e6 100644
--- a/src/button-refactor/ButtonsLinksAPI.md
+++ b/src/button-refactor/ButtonsLinksAPI.md
@@ -54,7 +54,7 @@ A few discussions were about naming and prop drilling (source here). We found th
 | prop | type | options | default | notes |
 | -- | -- | -- | -- | -- |
 | `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
-| `size` | one-of string | `small` `default` `large` | `default | |
+| `size` | one-of string | `small` `default` `large` | `default` | |
 | `label` | string | button description | null | |
 | `aria-label` | string | button description for screen readers | null | |
 | `aria-pressed` | boolean | `true/false` | `false` | |
@@ -70,7 +70,7 @@ A few discussions were about naming and prop drilling (source here). We found th
 | prop | type | options | default | notes |
 | -- | -- | -- | -- | -- |
 | `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
-| `size` | one-of string | `small` `default` `large` | `default | |
+| `size` | one-of string | `small` `default` `large` | `default` | |
 | `label` | string | button description | null | |
 | `leadingVisual` | children (slot) | octicon | null | |
 | `trailingVisual` | children (slot) | octicon | null | |
@@ -100,12 +100,13 @@ A few discussions were about naming and prop drilling (source here). We found th
 
 | prop | type | options | default | notes |
 | -- | -- | -- | -- | -- |
-| | | | |
+| `children` | child slot | | | |
 
 ## Next review session
 - [ ]  Help refine transition animations + tokenize
 - [ ]  Icon colors- same as button text, or specific?
-- [ ]  for `LinkStyledAsButton` should `trailingAction` slot be reserved for the > chevron indicating this is a link and not a button?
+- [ ]  for `LinkStyledAsButton` should `trailingAction` slot be reserved for the > chevron indicating this is a link and not a button? Or is it more of a `trailingVisual`?
 - [ ]  What color should `invisible` button variant be? Blue or grey?
 - [ ]  No aria-label for `LinkStyledAsButton`
 - [ ]  Do we like `fullWidth` or `block` as a prop for width behavior?
+- [ ]  Should `ButtonGroup` offer an option with gaps (more of a layout tool)
diff --git a/src/button-refactor/button-group.scss b/src/button-refactor/button-group.scss
index e69de29bb2..bc27caeae8 100644
--- a/src/button-refactor/button-group.scss
+++ b/src/button-refactor/button-group.scss
@@ -0,0 +1,27 @@
+.ButtonGroup {
+  display: flex;
+  flex-direction: row;
+}
+
+// reset border-radius
+.ButtonGroup-item {
+  border-right-width: 0;
+  border-radius: 0;
+
+  &:first-of-type {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-of-type {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  // ensure that the focus ring sits above the adjacent buttons
+  &:focus,
+  &:active {
+    z-index: 1;
+  }
+}

From b0dba371a643d6f42c7cb4d4806b05cf05524978 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 20 Jan 2022 11:36:06 -0800
Subject: [PATCH 08/16] cleanup

---
 src/button-refactor/button.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index 02a865f96e..8ba4b00537 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -15,9 +15,6 @@
   text-align: center;
   height: 32px;
   padding: 0 16px;
-
-  // define grid slots and layout for standard button contents
-  //   &:not(.Button--iconOnly) {
   display: flex;
   flex-direction: row;
   justify-content: space-between;

From 479b49dc6106f81ee21457b4e13caf23213e2f29 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 20 Jan 2022 12:46:20 -0800
Subject: [PATCH 09/16] example sheet for review

---
 .../explorations/ExampleSheet.stories.jsx     | 691 ++++++++++++++++++
 .../src/stories/explorations/Link.stories.jsx |   2 +-
 .../LinkStyledAsButton.stories.jsx            |   2 +-
 src/button-refactor/button.scss               |   7 +
 src/support/mixins/misc.scss                  |  16 +
 5 files changed, 716 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/stories/explorations/ExampleSheet.stories.jsx

diff --git a/docs/src/stories/explorations/ExampleSheet.stories.jsx b/docs/src/stories/explorations/ExampleSheet.stories.jsx
new file mode 100644
index 0000000000..0b90b15065
--- /dev/null
+++ b/docs/src/stories/explorations/ExampleSheet.stories.jsx
@@ -0,0 +1,691 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from './Button.stories'
+import {IconButtonTemplate} from './IconButton.stories'
+import {LinkTemplate} from './Link.stories'
+import {LinkStyledAsButtonTemplate} from './LinkStyledAsButton.stories'
+import {ButtonGroupTemplate} from './ButtonGroup.stories'
+
+export default {
+  title: 'Explorations',
+  layout: 'padded',
+  argTypes: {}
+}
+
+const gridStyle = {
+  display: 'grid',
+  gridAutoFlow: 'column dense',
+  gap: '16px',
+  justifyItems: 'start'
+}
+
+export const ExampleSheet = ({}) => (
+  <div style={{display: 'grid', gap: '16px', justifyItems: 'start'}}>
+    <h4>Standard</h4>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" />
+      <ButtonTemplate variant="Button--primary" label="Primary" />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" />
+      <ButtonTemplate variant="Button--danger" label="Danger" />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--small" />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--small" />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--large" />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--large" />
+    </div>
+    <h4>Leading visual</h4>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" leadingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" leadingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" leadingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" leadingVisual />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" leadingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--small" leadingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" leadingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--small" leadingVisual />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" leadingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--large" leadingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" leadingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--large" leadingVisual />
+    </div>
+    <h4>Trailing visual</h4>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" trailingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" trailingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" trailingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" trailingVisual />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" trailingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--small" trailingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" trailingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--small" trailingVisual />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" trailingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--large" trailingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" trailingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--large" trailingVisual />
+    </div>
+    <h4>Leading + Trailing visual</h4>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" leadingVisual trailingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" leadingVisual trailingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" leadingVisual trailingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" leadingVisual trailingVisual />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" leadingVisual trailingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--small" leadingVisual trailingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" leadingVisual trailingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--small" leadingVisual trailingVisual />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" leadingVisual trailingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--large" leadingVisual trailingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" leadingVisual trailingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--large" leadingVisual trailingVisual />
+    </div>
+
+    <h4>Trailing action</h4>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" trailingAction />
+      <ButtonTemplate variant="Button--primary" label="Primary" trailingAction />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" trailingAction />
+      <ButtonTemplate variant="Button--danger" label="Danger" trailingAction />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" trailingAction />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--small" trailingAction />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" trailingAction />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--small" trailingAction />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" trailingAction />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--large" trailingAction />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" trailingAction />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--large" trailingAction />
+    </div>
+
+    <h4>Leading visual + action</h4>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" leadingVisual trailingAction />
+      <ButtonTemplate variant="Button--primary" label="Primary" leadingVisual trailingAction />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" leadingVisual trailingAction />
+      <ButtonTemplate variant="Button--danger" label="Danger" leadingVisual trailingAction />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" leadingVisual trailingAction />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--small" leadingVisual trailingAction />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" leadingVisual trailingAction />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--small" leadingVisual trailingAction />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" leadingVisual trailingAction />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--large" leadingVisual trailingAction />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" leadingVisual trailingAction />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--large" leadingVisual trailingAction />
+    </div>
+    <h4>Trailing visual + action</h4>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" trailingVisual trailingAction />
+      <ButtonTemplate variant="Button--primary" label="Primary" trailingVisual trailingAction />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" trailingVisual trailingAction />
+      <ButtonTemplate variant="Button--danger" label="Danger" trailingVisual trailingAction />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--small"
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--small" trailingVisual trailingAction />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--small"
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--small" trailingVisual trailingAction />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--large"
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate variant="Button--primary" label="Primary" size="Button--large" trailingVisual trailingAction />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--large"
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate variant="Button--danger" label="Danger" size="Button--large" trailingVisual trailingAction />
+    </div>
+    <h4>Leading + Trailing visual + action</h4>
+    <div style={gridStyle}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" leadingVisual trailingVisual trailingAction />
+      <ButtonTemplate variant="Button--primary" label="Primary" leadingVisual trailingVisual trailingAction />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" leadingVisual trailingVisual trailingAction />
+      <ButtonTemplate variant="Button--danger" label="Danger" leadingVisual trailingVisual trailingAction />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+        trailingAction
+      />
+    </div>
+    <div style={gridStyle}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+        trailingAction
+      />
+      <ButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+        trailingAction
+      />
+    </div>
+    <hr />
+    <h4>IconButton</h4>
+    <div style={gridStyle}>
+      <IconButtonTemplate variant="Button--secondary" label="Secondary" visual />
+      <IconButtonTemplate variant="Button--primary" label="Primary" visual />
+      <IconButtonTemplate variant="Button--invisible" label="Invisible" visual />
+      <IconButtonTemplate variant="Button--danger" label="Danger" visual />
+    </div>
+    <div style={gridStyle}>
+      <IconButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" visual />
+      <IconButtonTemplate variant="Button--primary" label="Primary" size="Button--small" visual />
+      <IconButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" visual />
+      <IconButtonTemplate variant="Button--danger" label="Danger" size="Button--small" visual />
+    </div>
+    <div style={gridStyle}>
+      <IconButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" visual />
+      <IconButtonTemplate variant="Button--primary" label="Primary" size="Button--large" visual />
+      <IconButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" visual />
+      <IconButtonTemplate variant="Button--danger" label="Danger" size="Button--large" visual />
+    </div>
+    <hr />
+    <h4>LinkStyledAsButton</h4>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" size="Button--small" />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" size="Button--small" />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" size="Button--large" />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" size="Button--large" />
+    </div>
+    <h4>Leading visual</h4>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" leadingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" leadingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" leadingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" leadingVisual />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" leadingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" size="Button--small" leadingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" leadingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" size="Button--small" leadingVisual />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" leadingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" size="Button--large" leadingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" leadingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" size="Button--large" leadingVisual />
+    </div>
+    <h4>Trailing visual</h4>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" trailingVisual />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" size="Button--small" trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" size="Button--small" trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" size="Button--small" trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" size="Button--small" trailingVisual />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" size="Button--large" trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" size="Button--large" trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" size="Button--large" trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" size="Button--large" trailingVisual />
+    </div>
+    <h4>Leading + Trailing visual</h4>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" leadingVisual trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" leadingVisual trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" leadingVisual trailingVisual />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" leadingVisual trailingVisual />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+      />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+      />
+    </div>
+
+    <h4>Trailing action</h4>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" showTrailingAction />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" showTrailingAction />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" showTrailingAction />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" showTrailingAction />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--small"
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" size="Button--small" showTrailingAction />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--small"
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" size="Button--small" showTrailingAction />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--large"
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" size="Button--large" showTrailingAction />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--large"
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" size="Button--large" showTrailingAction />
+    </div>
+
+    <h4>Leading visual + action</h4>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" leadingVisual showTrailingAction />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" leadingVisual showTrailingAction />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" leadingVisual showTrailingAction />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" leadingVisual showTrailingAction />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--small"
+        leadingVisual
+        trailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--small"
+        leadingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--small"
+        leadingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--small"
+        leadingVisual
+        showTrailingAction
+      />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--large"
+        leadingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--large"
+        leadingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--large"
+        leadingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--large"
+        leadingVisual
+        showTrailingAction
+      />
+    </div>
+    <h4>Trailing visual + action</h4>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate variant="Button--secondary" label="Secondary" trailingVisual showTrailingAction />
+      <LinkStyledAsButtonTemplate variant="Button--primary" label="Primary" trailingVisual showTrailingAction />
+      <LinkStyledAsButtonTemplate variant="Button--invisible" label="Invisible" trailingVisual showTrailingAction />
+      <LinkStyledAsButtonTemplate variant="Button--danger" label="Danger" trailingVisual showTrailingAction />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--small"
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--small"
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--small"
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--small"
+        trailingVisual
+        showTrailingAction
+      />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--large"
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--large"
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--large"
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--large"
+        trailingVisual
+        showTrailingAction
+      />
+    </div>
+    <h4>Leading + Trailing visual + action</h4>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--small"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+    </div>
+    <div style={gridStyle}>
+      <LinkStyledAsButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+      <LinkStyledAsButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        size="Button--large"
+        leadingVisual
+        trailingVisual
+        showTrailingAction
+      />
+    </div>
+    <hr />
+    <h4>Link</h4>
+    <div style={gridStyle}>
+      <LinkTemplate label="Default" />
+      <LinkTemplate variant="Link--muted" label="Muted" />
+    </div>
+    <div style={gridStyle}>
+      <LinkTemplate label="Default" showTrailingAction />
+      <LinkTemplate variant="Link--muted" label="Muted" showTrailingAction />
+    </div>
+  </div>
+)
+
+// export const Playground = ExampleSheetTemplate.bind({})
+// Playground.args = {}
diff --git a/docs/src/stories/explorations/Link.stories.jsx b/docs/src/stories/explorations/Link.stories.jsx
index 81a0194d67..7379937b1f 100644
--- a/docs/src/stories/explorations/Link.stories.jsx
+++ b/docs/src/stories/explorations/Link.stories.jsx
@@ -89,7 +89,7 @@ const arrow = (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
     <path
       fill-rule="evenodd"
-      d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"
+      d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
     ></path>
   </svg>
 )
diff --git a/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
index 3387d1244a..70bd091e83 100644
--- a/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
+++ b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
@@ -171,7 +171,7 @@ const arrow = (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
     <path
       fill-rule="evenodd"
-      d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"
+      d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
     ></path>
   </svg>
 )
diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index 8ba4b00537..55a0539ed7 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -21,6 +21,13 @@
   align-items: center;
   gap: $spacer-2;
 
+  // mobile friendly sizing
+  @media (pointer: course) {
+    &::before {
+      @include minTouchTarget(48px, 48px);
+    }
+  }
+
   // base states
 
   &:hover,
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 05d908a1d9..101a012cc1 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -31,3 +31,19 @@
   outline: 2px solid var(--color-accent-fg);
   outline-offset: 2px;
 }
+
+// if min-width is undefined, return only min-height
+@mixin minTouchTarget($min-height: 48px, $min-width: '') {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: $min-height;
+  content: '';
+  transform: translateX(-50%) translateY(-50%);
+
+  @if $min-width != '' {
+    min-width: $min-width;
+  }
+}

From 19436675b120c655e9f9857525a1f0cf96b2c5ad Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 20 Jan 2022 12:59:51 -0800
Subject: [PATCH 10/16] most giant story of all time

---
 .../explorations/ExampleSheet.stories.jsx     | 295 ++++++++++++++++++
 1 file changed, 295 insertions(+)

diff --git a/docs/src/stories/explorations/ExampleSheet.stories.jsx b/docs/src/stories/explorations/ExampleSheet.stories.jsx
index 0b90b15065..2f539aa70f 100644
--- a/docs/src/stories/explorations/ExampleSheet.stories.jsx
+++ b/docs/src/stories/explorations/ExampleSheet.stories.jsx
@@ -19,6 +19,14 @@ const gridStyle = {
   justifyItems: 'start'
 }
 
+const gridStyleStretch = {
+  display: 'grid',
+  gridAutoFlow: 'column',
+  gap: '16px',
+  justifyItems: 'start',
+  width: '100%'
+}
+
 export const ExampleSheet = ({}) => (
   <div style={{display: 'grid', gap: '16px', justifyItems: 'start'}}>
     <h4>Standard</h4>
@@ -118,6 +126,293 @@ export const ExampleSheet = ({}) => (
       <ButtonTemplate variant="Button--danger" label="Danger" size="Button--large" trailingAction />
     </div>
 
+    <h4>Fullwidth (all visual scenarios, one button size)</h4>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" trailingAction fullWidth />
+      <ButtonTemplate variant="Button--primary" label="Primary" trailingAction fullWidth />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" trailingAction fullWidth />
+      <ButtonTemplate variant="Button--danger" label="Danger" trailingAction fullWidth />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" fullWidth leadingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" fullWidth leadingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" fullWidth leadingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" fullWidth leadingVisual />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" fullWidth trailingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" fullWidth trailingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" fullWidth trailingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" fullWidth trailingVisual />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" fullWidth trailingVisual leadingVisual />
+      <ButtonTemplate variant="Button--primary" label="Primary" fullWidth trailingVisual leadingVisual />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" fullWidth trailingVisual leadingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" fullWidth trailingVisual leadingVisual />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" trailingAction fullWidth />
+      <ButtonTemplate variant="Button--primary" label="Primary" trailingAction fullWidth />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" trailingAction fullWidth />
+      <ButtonTemplate variant="Button--danger" label="Danger" trailingAction fullWidth />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate variant="Button--secondary" label="Secondary" leadingVisual trailingAction fullWidth />
+      <ButtonTemplate variant="Button--primary" label="Primary" leadingVisual trailingAction fullWidth />
+      <ButtonTemplate variant="Button--invisible" label="Invisible" trailingAction fullWidth leadingVisual />
+      <ButtonTemplate variant="Button--danger" label="Danger" trailingAction fullWidth leadingVisual />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        leadingVisual
+        trailingAction
+        fullWidth
+        trailingVisual
+      />
+      <ButtonTemplate variant="Button--primary" label="Primary" leadingVisual trailingAction fullWidth trailingVisual />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        trailingAction
+        fullWidth
+        leadingVisual
+        trailingVisual
+      />
+      <ButtonTemplate variant="Button--danger" label="Danger" trailingAction fullWidth leadingVisual trailingVisual />
+    </div>
+
+    <hr />
+    <h4>Fullwidth (all visual scenarios, one button size) visualPosition fixed</h4>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        fullWidth
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        fullWidth
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        fullWidth
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        fullWidth
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        fullWidth
+        trailingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        fullWidth
+        trailingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        fullWidth
+        trailingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        fullWidth
+        trailingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        fullWidth
+        trailingVisual
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        fullWidth
+        trailingVisual
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        fullWidth
+        trailingVisual
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        fullWidth
+        trailingVisual
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        leadingVisual
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        leadingVisual
+        trailingAction
+        fullWidth
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        trailingAction
+        fullWidth
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        trailingAction
+        fullWidth
+        leadingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+    </div>
+    <div style={gridStyleStretch}>
+      <ButtonTemplate
+        variant="Button--secondary"
+        label="Secondary"
+        leadingVisual
+        trailingAction
+        fullWidth
+        trailingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--primary"
+        label="Primary"
+        leadingVisual
+        trailingAction
+        fullWidth
+        trailingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--invisible"
+        label="Invisible"
+        trailingAction
+        fullWidth
+        leadingVisual
+        trailingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+      <ButtonTemplate
+        variant="Button--danger"
+        label="Danger"
+        trailingAction
+        fullWidth
+        leadingVisual
+        trailingVisual
+        visualPosition="Button-content--visualFixed"
+      />
+    </div>
+
     <h4>Leading visual + action</h4>
     <div style={gridStyle}>
       <ButtonTemplate variant="Button--secondary" label="Secondary" leadingVisual trailingAction />

From 871167c94e04ce985cf9d976b0da694d7ec4bef2 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 25 Jan 2022 07:42:18 -0800
Subject: [PATCH 11/16] lg button height, segment control discussion

---
 docs/src/stories/explorations/Button.stories.jsx             | 2 +-
 docs/src/stories/explorations/IconButton.stories.jsx         | 2 +-
 docs/src/stories/explorations/LinkStyledAsButton.stories.jsx | 2 +-
 src/button-refactor/ButtonsLinksAPI.md                       | 3 +++
 src/button-refactor/button.scss                              | 2 +-
 5 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/src/stories/explorations/Button.stories.jsx b/docs/src/stories/explorations/Button.stories.jsx
index 6e99b67dbb..c755318ba0 100644
--- a/docs/src/stories/explorations/Button.stories.jsx
+++ b/docs/src/stories/explorations/Button.stories.jsx
@@ -31,7 +31,7 @@ export default {
       mapping: [null, 'Button--small', 'Button--large'], // values
       control: {
         type: 'inline-radio',
-        labels: ['default [32px]', 'small [28px]', 'large [44px]']
+        labels: ['default [32px]', 'small [28px]', 'large [40px]']
       },
       table: {
         category: 'CSS'
diff --git a/docs/src/stories/explorations/IconButton.stories.jsx b/docs/src/stories/explorations/IconButton.stories.jsx
index f03d53481c..83acd9c942 100644
--- a/docs/src/stories/explorations/IconButton.stories.jsx
+++ b/docs/src/stories/explorations/IconButton.stories.jsx
@@ -31,7 +31,7 @@ export default {
       mapping: [null, 'Button--small', 'Button--large'], // values
       control: {
         type: 'inline-radio',
-        labels: ['default [32px]', 'small [28px]', 'large [44px]']
+        labels: ['default [32px]', 'small [28px]', 'large [40px]']
       },
       table: {
         category: 'CSS'
diff --git a/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
index 70bd091e83..32bef167d4 100644
--- a/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
+++ b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
@@ -36,7 +36,7 @@ export default {
       mapping: [null, 'LinkStyledAsButton--small', 'LinkStyledAsButton--large'], // values
       control: {
         type: 'inline-radio',
-        labels: ['default [32px]', 'small [28px]', 'large [44px]']
+        labels: ['default [32px]', 'small [28px]', 'large [40px]']
       },
       table: {
         category: 'CSS'
diff --git a/src/button-refactor/ButtonsLinksAPI.md b/src/button-refactor/ButtonsLinksAPI.md
index fbe1dc04e6..2d1f051642 100644
--- a/src/button-refactor/ButtonsLinksAPI.md
+++ b/src/button-refactor/ButtonsLinksAPI.md
@@ -28,6 +28,8 @@ Existing issues
   -- Allie's thoughts on limiting icon only buttons and working towards encouraging visual labels
 - https://github.com/github/primer/discussions/477
   -- Buttons styled as links, links styled as buttons
+- https://github.com/github/primer/issues/65
+  -- Segmented control, pressed state discussion
 
 ## Specific notes from previous bugs to keep in mind
 - [ ]  Check all button variants have shadow present
@@ -110,3 +112,4 @@ A few discussions were about naming and prop drilling (source here). We found th
 - [ ]  No aria-label for `LinkStyledAsButton`
 - [ ]  Do we like `fullWidth` or `block` as a prop for width behavior?
 - [ ]  Should `ButtonGroup` offer an option with gaps (more of a layout tool)
+- [ ]  Should `Button` proper handle a `pressed` (formerly selected) state, or should we create a new component `SegmentedControl` that uses `Button` and provides specific design (color, shadows)?
diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index 55a0539ed7..eadde5350f 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -102,7 +102,7 @@
 }
 
 .Button--large {
-  height: 44px;
+  height: 40px;
 }
 
 .Button--fullWidth {

From bf8efe2d45c3813d4373a339b1fa19d6e90ac332 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 22 Mar 2022 15:12:14 -0700
Subject: [PATCH 12/16] play with tokens

---
 .../stories/explorations/Button.stories.jsx   |  21 ++--
 .../LinkStyledAsButton.stories.jsx            |  15 ++-
 docs/src/stories/explorations/adr.md          | 118 ++++++++++++++++++
 src/button-refactor/button.scss               | 101 +++++++++++++--
 .../link-styled-as-button.scss                |   4 +-
 5 files changed, 227 insertions(+), 32 deletions(-)
 create mode 100644 docs/src/stories/explorations/adr.md

diff --git a/docs/src/stories/explorations/Button.stories.jsx b/docs/src/stories/explorations/Button.stories.jsx
index c755318ba0..87e92c429c 100644
--- a/docs/src/stories/explorations/Button.stories.jsx
+++ b/docs/src/stories/explorations/Button.stories.jsx
@@ -4,10 +4,6 @@ import clsx from 'clsx'
 export default {
   title: 'Explorations/Button',
   parameters: {
-    // design: {
-    //   type: 'figma',
-    //   url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
-    // },
     layout: 'padded'
   },
 
@@ -39,19 +35,19 @@ export default {
       description: 'Controls button height',
       defaultValue: 0
     },
-    visualPosition: {
+    alignContent: {
       options: [0, 1], // iterator
-      mapping: [null, 'Button-content--visualFixed'], // values
+      mapping: [null, 'Button-content--alignStart'], // values
       control: {
         type: 'inline-radio',
-        labels: ['default', 'fixed']
+        labels: ['center [default]', 'start']
       },
       table: {
         category: 'CSS'
       },
       description:
-        '[Name TBD!] Controls where the leading or trailing visuals position themselves in a fullWidth button (lock to text label or button bounds)',
-      defaultValue: 'Button-content--visualFixed'
+        'Align button label + visuals to the center (default for CTA buttons) or start for select/dropdown button scenarios',
+      defaultValue: 0
     },
     label: {
       defaultValue: 'Button',
@@ -171,9 +167,9 @@ export const ButtonTemplate = ({
   pressed,
   focusElement,
   active,
-  visualPosition,
   className,
-  ariaLabel
+  ariaLabel,
+  alignContent
 }) => (
   <>
     <button
@@ -189,8 +185,7 @@ export const ButtonTemplate = ({
       aria-pressed={pressed ? pressed : undefined}
       aria-label={ariaLabel ? ariaLabel : undefined}
     >
-      {/* {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />} */}
-      <span className={clsx(visualPosition && `${visualPosition}`, 'Button-content')}>
+      <span className={clsx('Button-content', alignContent && `${alignContent}`)}>
         {leadingVisual && <span className="Button-visual Button-leadingVisual">{star}</span>}
         <span className="Button-label">{label}</span>
         {trailingVisual && <span className="Button-visual Button-trailingVisual">{star}</span>}
diff --git a/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
index 32bef167d4..0efd391a4e 100644
--- a/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
+++ b/docs/src/stories/explorations/LinkStyledAsButton.stories.jsx
@@ -44,19 +44,19 @@ export default {
       description: 'Controls button height',
       defaultValue: 0
     },
-    visualPosition: {
+    alignContent: {
       options: [0, 1], // iterator
-      mapping: [null, 'LinkStyledAsButton-content--visualFixed'], // values
+      mapping: [null, 'Button-content--alignStart'], // values
       control: {
         type: 'inline-radio',
-        labels: ['default', 'fixed']
+        labels: ['center [default]', 'start']
       },
       table: {
         category: 'CSS'
       },
       description:
-        '[Name TBD!] Controls where the leading or trailing visuals position themselves in a fullWidth button (lock to text label or button bounds)',
-      defaultValue: 'Button-visual--fixed'
+        'Align button label + visuals to the center (default for CTA buttons) or start for select/dropdown button scenarios',
+      defaultValue: 0
     },
     label: {
       defaultValue: 'Link',
@@ -186,7 +186,7 @@ export const LinkStyledAsButtonTemplate = ({
   showTrailingAction,
   focusElement,
   active,
-  visualPosition,
+  alignContent,
   className,
   href,
   target
@@ -204,8 +204,7 @@ export const LinkStyledAsButtonTemplate = ({
         active && 'LinkStyledAsButton--active'
       )}
     >
-      {/* {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />} */}
-      <span className={clsx(visualPosition && `${visualPosition}`, 'LinkStyledAsButton-content')}>
+      <span className={clsx(alignContent && `${alignContent}`, 'LinkStyledAsButton-content')}>
         {leadingVisual && <span className="LinkStyledAsButton-visual LinkStyledAsButton-leadingVisual">{star}</span>}
         <span className="LinkStyledAsButton-label">{label}</span>
         {trailingVisual && <span className="LinkStyledAsButton-visual LinkStyledAsButton-trailingVisual">{star}</span>}
diff --git a/docs/src/stories/explorations/adr.md b/docs/src/stories/explorations/adr.md
new file mode 100644
index 0000000000..980c745d7a
--- /dev/null
+++ b/docs/src/stories/explorations/adr.md
@@ -0,0 +1,118 @@
+# Discussion: Button and Link APIs
+
+Button and Link has been discussed in a number of issues and discussions over past few years. I went through the list[ref], took note of their purpose and started compiling a new API spec. I've been working on a spec in the Primer CSS Storybook to validate and stress test, and some of these decisions have already been implemented in the new PRC Button component(link).
+
+I'd like to use this discussion to align on API decisions, naming things, and design enhancements for Buttons and Links. Once a decisions has been reached, I'll formalize an ADR which will enable each Primer framework to move forward or plan for these improvements.
+
+## Component list
+A few [discussions](https://github.com/github/primer/discussions/477) were about naming and prop drilling. We found that for Button to handle all of its use cases, we would need a large number of props– some conditional and dependent on one another. When that happens, it's typically a sign that the logic should be separated into a separate component.
+
+| Component | Description |
+| -- | -- |
+| Button | standard `button` with variants, size, visual slots |
+| IconButton | `button` with icon only (square) and required `aria-label` |
+| ReactionButton | `button` snowflake with specific styles/interaction design |
+| ButtonGroup | wrapper to handle grouping buttons |
+| Link | `a` with variants, optional trailing visuals |
+| LinkStyledAsButton | `a` with button variants, *required* trailing visual |
+
+
+
+### Button
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default` | |
+| `label` | string | button description | null | required |
+| `aria-label` | string | button description for screen readers | null | additional button context |
+| `aria-pressed` | boolean | `true/false` | `false` | replaces `selected` (not valid) |
+| `leadingVisual` | children (slot) | octicon | null | |
+| `trailingVisual` | children (slot) | octicon | null | |
+| `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
+| `fullWidth` | boolean | `true/false` | `false` | |
+| `alignContent` | one-of string | `center` `start` | `center` | align content center or to start/left of button |
+
+**Visuals**
+<details>
+  <summary>Click to expand!</summary>
+  
+  stuff
+</details>
+
+**Primitives**
+<details>
+  <summary>Primitive variables</summary>
+  
+  | variant | property | token | value |
+  | -- | -- | -- | -- |
+  | small | `height` | `--gh-control-medium-size` | 32px |
+  | small | `padding` | 0 `--gh-control-medium-paddingInline-normal` | 12px |
+  | small | `gap` | `--gh-control-medium-gap` |
+  | medium | `height` | `--gh-control-medium-size` | 32px |
+  | medium | `padding` | 0 `--gh-control-medium-paddingInline-normal` | 12px |
+  | medium | `gap` | `--gh-control-medium-gap` |
+</details>
+
+### LinkStyledAsButton
+
+Shares props and styled with `Button`, with the exception of: `aria-label` and `aria-pressed`
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default` | |
+| `label` | string | button description | null | required |
+| `leadingVisual` | children (slot) | octicon | null | |
+| `trailingVisual` | children (slot) | octicon | null | |
+| `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
+| `fullWidth` | boolean | `true/false` | `false` | |
+| `alignContent` | one-of string | `center` `start` | `center` | align content center or to start/left of button |
+
+**Visuals**
+<details>
+  <summary>Click to expand!</summary>
+  
+  stuff
+</details>
+
+### IconButton
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
+| `size` | one-of string | `small` `default` `large` | `default | |
+| `aria-label` | string | button description for screen readers (required) | null | |
+| `visual` | children (slot) | octicon | null | |
+| `aria-pressed` | boolean | `true/false` | `false` | |
+
+
+### Link
+
+| prop | type | options | default | notes |
+| -- | -- | -- | -- | -- |
+| `variant` | one-of string | ?? we need to work on this (subtle and or muted) | |
+| `label` | string | button description | null | |
+| `showTrailingAction` | boolean | specific octicon for new tab or new page (or anchor?) | null | |
+
+
+## Design refinements
+
+| current | proposed | notes
+| -- | -- | -- |
+
+## Accessibility
+- aria-labels
+- touch target
+- color?
+
+
+* Don't use viewport range names to refer to individual values
+  
+  ```
+  ✅
+  narrow: 0 - 768px
+  
+  ❌
+  narrow: 768px
+  ```
diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index eadde5350f..6240a9ff50 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -1,3 +1,58 @@
+// temporary, pre primitives release
+:root {
+  --base-size-128: 8rem;
+  --base-size-112: 7rem;
+  --base-size-96: 6rem;
+  --base-size-80: 5rem;
+  --base-size-64: 4rem;
+  --base-size-48: 3rem;
+  --base-size-44: 2.75rem;
+  --base-size-40: 2.5rem;
+  --base-size-36: 2.25rem;
+  --base-size-32: 2rem;
+  --base-size-28: 1.75rem;
+  --base-size-24: 1.5rem;
+  --base-size-20: 1.25rem;
+  --base-size-16: 1rem;
+  --base-size-12: 0.75rem;
+  --base-size-8: 0.5rem;
+  --base-size-4: 0.25rem;
+  --gh-control-xlarge-gap: var(--base-size-8);
+  --gh-control-xlarge-paddingInline-spacious: var(--base-size-16);
+  --gh-control-xlarge-paddingInline-normal: var(--base-size-12);
+  --gh-control-xlarge-lineBoxHeight: var(--base-size-20);
+  --gh-control-xlarge-size: var(--base-size-48);
+  --gh-control-large-gap: var(--base-size-8);
+  --gh-control-large-paddingInline-spacious: var(--base-size-16);
+  --gh-control-large-paddingInline-normal: var(--base-size-12);
+  --gh-control-large-lineBoxHeight: var(--base-size-20);
+  --gh-control-large-size: var(--base-size-40);
+  --gh-control-medium-gap: var(--base-size-8);
+  --gh-control-medium-paddingInline-spacious: var(--base-size-16);
+  --gh-control-medium-paddingInline-normal: var(--base-size-12);
+  --gh-control-medium-paddingInline-condensed: var(--base-size-8);
+  --gh-control-medium-lineBoxHeight: var(--base-size-20);
+  --gh-control-medium-size: var(--base-size-32);
+  --gh-control-small-gap: var(--base-size-4);
+  --gh-control-small-paddingInline-normal: var(--base-size-12);
+  --gh-control-small-paddingInline-condensed: var(--base-size-8);
+  --gh-control-small-lineBoxHeight: var(--base-size-20);
+  --gh-control-small-size: var(--base-size-28);
+  --gh-control-xsmall-gap: var(--base-size-4);
+  --gh-control-xsmall-paddingInline-spacious: var(--base-size-12);
+  --gh-control-xsmall-paddingInline-normal: var(--base-size-8);
+  --gh-control-xsmall-paddingInline-condensed: var(--base-size-4);
+  --gh-control-xsmall-lineBoxHeight: var(--base-size-20);
+  --gh-control-xsmall-size: var(--base-size-24);
+  --gh-control-minTarget-coarse: var(--base-size-44);
+  --gh-control-minTarget-fine: var(--base-size-16);
+  --gh-control-xlarge-paddingBlock: calc((var(--gh-control-xlarge-size) - var(--gh-control-xlarge-lineBoxHeight)) / 2);
+  --gh-control-large-paddingBlock: calc((var(--gh-control-large-size) - var(--gh-control-large-lineBoxHeight)) / 2);
+  --gh-control-medium-paddingBlock: calc((var(--gh-control-medium-size) - var(--gh-control-medium-lineBoxHeight)) / 2);
+  --gh-control-small-paddingBlock: calc((var(--gh-control-small-size) - var(--gh-control-small-lineBoxHeight)) / 2);
+  --gh-control-xsmall-paddingBlock: calc((var(--gh-control-xsmall-size) - var(--gh-control-xsmall-lineBoxHeight)) / 2);
+}
+
 // base button
 .Button {
   position: relative;
@@ -13,13 +68,13 @@
   transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
   transition-property: color, background-color, border-color;
   text-align: center;
-  height: 32px;
-  padding: 0 16px;
+  height: var(--gh-control-medium-size);
+  padding: 0 var(--gh-control-medium-paddingInline-normal);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  gap: $spacer-2;
+  gap: var(--gh-control-medium-gap);
 
   // mobile friendly sizing
   @media (pointer: course) {
@@ -59,15 +114,16 @@
   grid-template-areas: 'leadingVisual text trailingVisual';
   grid-template-columns: min-content minmax(0, auto) min-content;
   align-items: center;
+  place-content: center;
 
   > :not(:last-child) {
-    margin-right: $spacer-2;
+    margin-right: var(--gh-control-medium-gap);
   }
 }
 
 // center child elements for fullWidth
-.Button-content--visualFixed {
-  place-content: center;
+.Button-content--alignStart {
+  justify-content: start;
 }
 
 // button child elements
@@ -80,6 +136,7 @@
 .Button-label {
   grid-area: text;
   white-space: nowrap;
+  line-height: var(--gh-control-medium-lineBoxHeight);
 }
 
 .Button-leadingVisual {
@@ -91,18 +148,44 @@
 }
 
 .Button-trailingAction {
-  margin-right: -8px;
+  margin-right: -6px;
 }
 
 // sizes
 
 .Button--small {
-  height: 28px;
+  //   height: 28px;
   font-size: $font-size-small;
+  height: var(--gh-control-small-size);
+  padding: 0 var(--gh-control-small-paddingInline-normal);
+  gap: var(--gh-control-small-gap);
+
+  .Button-label {
+    line-height: var(--gh-control-small-lineBoxHeight);
+  }
+
+  .Button-content {
+    > :not(:last-child) {
+      margin-right: var(--gh-control-small-gap);
+    }
+  }
 }
 
 .Button--large {
-  height: 40px;
+  //   height: 40px;
+  height: var(--gh-control-large-size);
+  padding: 0 var(--gh-control-large-paddingInline-normal);
+  gap: var(--gh-control-large-gap);
+
+  .Button-label {
+    line-height: var(--gh-control-large-lineBoxHeight);
+  }
+
+  .Button-content {
+    > :not(:last-child) {
+      margin-right: var(--gh-control-large-gap);
+    }
+  }
 }
 
 .Button--fullWidth {
diff --git a/src/button-refactor/link-styled-as-button.scss b/src/button-refactor/link-styled-as-button.scss
index 153bf405b2..7915374118 100644
--- a/src/button-refactor/link-styled-as-button.scss
+++ b/src/button-refactor/link-styled-as-button.scss
@@ -12,8 +12,8 @@
   @extend .Button-content;
 }
 
-.LinkStyledAsButton-content--visualFixed {
-  @extend .Button-content--visualFixed;
+.LinkStyledAsButton-content--alignStart {
+  @extend .Button-content--alignStart;
 }
 
 // link child elements

From 488e66557fba9349a83ce7980a8ad54f053c4669 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 22 Mar 2022 20:09:26 -0700
Subject: [PATCH 13/16] design refinements

Co-authored-by: Vinicius Depizzol <vdepizzol@gmail.com>
---
 docs/src/stories/explorations/adr.md   | 118 -------------------------
 src/button-refactor/ButtonsLinksAPI.md |   1 +
 src/button-refactor/button.scss        |  40 ++++++---
 src/button-refactor/icon-button.scss   |   6 +-
 src/button-refactor/link.scss          |   5 +-
 5 files changed, 34 insertions(+), 136 deletions(-)
 delete mode 100644 docs/src/stories/explorations/adr.md

diff --git a/docs/src/stories/explorations/adr.md b/docs/src/stories/explorations/adr.md
deleted file mode 100644
index 980c745d7a..0000000000
--- a/docs/src/stories/explorations/adr.md
+++ /dev/null
@@ -1,118 +0,0 @@
-# Discussion: Button and Link APIs
-
-Button and Link has been discussed in a number of issues and discussions over past few years. I went through the list[ref], took note of their purpose and started compiling a new API spec. I've been working on a spec in the Primer CSS Storybook to validate and stress test, and some of these decisions have already been implemented in the new PRC Button component(link).
-
-I'd like to use this discussion to align on API decisions, naming things, and design enhancements for Buttons and Links. Once a decisions has been reached, I'll formalize an ADR which will enable each Primer framework to move forward or plan for these improvements.
-
-## Component list
-A few [discussions](https://github.com/github/primer/discussions/477) were about naming and prop drilling. We found that for Button to handle all of its use cases, we would need a large number of props– some conditional and dependent on one another. When that happens, it's typically a sign that the logic should be separated into a separate component.
-
-| Component | Description |
-| -- | -- |
-| Button | standard `button` with variants, size, visual slots |
-| IconButton | `button` with icon only (square) and required `aria-label` |
-| ReactionButton | `button` snowflake with specific styles/interaction design |
-| ButtonGroup | wrapper to handle grouping buttons |
-| Link | `a` with variants, optional trailing visuals |
-| LinkStyledAsButton | `a` with button variants, *required* trailing visual |
-
-
-
-### Button
-
-| prop | type | options | default | notes |
-| -- | -- | -- | -- | -- |
-| `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
-| `size` | one-of string | `small` `default` `large` | `default` | |
-| `label` | string | button description | null | required |
-| `aria-label` | string | button description for screen readers | null | additional button context |
-| `aria-pressed` | boolean | `true/false` | `false` | replaces `selected` (not valid) |
-| `leadingVisual` | children (slot) | octicon | null | |
-| `trailingVisual` | children (slot) | octicon | null | |
-| `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
-| `fullWidth` | boolean | `true/false` | `false` | |
-| `alignContent` | one-of string | `center` `start` | `center` | align content center or to start/left of button |
-
-**Visuals**
-<details>
-  <summary>Click to expand!</summary>
-  
-  stuff
-</details>
-
-**Primitives**
-<details>
-  <summary>Primitive variables</summary>
-  
-  | variant | property | token | value |
-  | -- | -- | -- | -- |
-  | small | `height` | `--gh-control-medium-size` | 32px |
-  | small | `padding` | 0 `--gh-control-medium-paddingInline-normal` | 12px |
-  | small | `gap` | `--gh-control-medium-gap` |
-  | medium | `height` | `--gh-control-medium-size` | 32px |
-  | medium | `padding` | 0 `--gh-control-medium-paddingInline-normal` | 12px |
-  | medium | `gap` | `--gh-control-medium-gap` |
-</details>
-
-### LinkStyledAsButton
-
-Shares props and styled with `Button`, with the exception of: `aria-label` and `aria-pressed`
-
-| prop | type | options | default | notes |
-| -- | -- | -- | -- | -- |
-| `variant` | one-of string | `primary` `secondary` `danger` `invisible` | `secondary` | |
-| `size` | one-of string | `small` `default` `large` | `default` | |
-| `label` | string | button description | null | required |
-| `leadingVisual` | children (slot) | octicon | null | |
-| `trailingVisual` | children (slot) | octicon | null | |
-| `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
-| `fullWidth` | boolean | `true/false` | `false` | |
-| `alignContent` | one-of string | `center` `start` | `center` | align content center or to start/left of button |
-
-**Visuals**
-<details>
-  <summary>Click to expand!</summary>
-  
-  stuff
-</details>
-
-### IconButton
-
-| prop | type | options | default | notes |
-| -- | -- | -- | -- | -- |
-| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
-| `size` | one-of string | `small` `default` `large` | `default | |
-| `aria-label` | string | button description for screen readers (required) | null | |
-| `visual` | children (slot) | octicon | null | |
-| `aria-pressed` | boolean | `true/false` | `false` | |
-
-
-### Link
-
-| prop | type | options | default | notes |
-| -- | -- | -- | -- | -- |
-| `variant` | one-of string | ?? we need to work on this (subtle and or muted) | |
-| `label` | string | button description | null | |
-| `showTrailingAction` | boolean | specific octicon for new tab or new page (or anchor?) | null | |
-
-
-## Design refinements
-
-| current | proposed | notes
-| -- | -- | -- |
-
-## Accessibility
-- aria-labels
-- touch target
-- color?
-
-
-* Don't use viewport range names to refer to individual values
-  
-  ```
-  ✅
-  narrow: 0 - 768px
-  
-  ❌
-  narrow: 768px
-  ```
diff --git a/src/button-refactor/ButtonsLinksAPI.md b/src/button-refactor/ButtonsLinksAPI.md
index 2d1f051642..ac24cf474d 100644
--- a/src/button-refactor/ButtonsLinksAPI.md
+++ b/src/button-refactor/ButtonsLinksAPI.md
@@ -30,6 +30,7 @@ Existing issues
   -- Buttons styled as links, links styled as buttons
 - https://github.com/github/primer/issues/65
   -- Segmented control, pressed state discussion
+  https://github.com/primer/design/pull/193
 
 ## Specific notes from previous bugs to keep in mind
 - [ ]  Check all button variants have shadow present
diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index 6240a9ff50..f07d2a96a2 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -51,12 +51,14 @@
   --gh-control-medium-paddingBlock: calc((var(--gh-control-medium-size) - var(--gh-control-medium-lineBoxHeight)) / 2);
   --gh-control-small-paddingBlock: calc((var(--gh-control-small-size) - var(--gh-control-small-lineBoxHeight)) / 2);
   --gh-control-xsmall-paddingBlock: calc((var(--gh-control-xsmall-size) - var(--gh-control-xsmall-lineBoxHeight)) / 2);
+  --gh-duration-fast: 80ms;
+  --gh-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
 // base button
 .Button {
   position: relative;
-  font-size: $body-font-size;
+  font-size: 0.875rem;
   font-weight: $font-weight-semibold;
   cursor: pointer;
   user-select: none;
@@ -65,8 +67,8 @@
   border-color: transparent;
   border-radius: $border-radius;
   color: var(--color-btn-text);
-  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  transition-property: color, background-color, border-color;
+  transition: var(--gh-duration-fast) var(--gh-easing-easeInOut);
+  transition-property: color, fill, background-color, border-color;
   text-align: center;
   height: var(--gh-control-medium-size);
   padding: 0 var(--gh-control-medium-paddingInline-normal);
@@ -87,7 +89,7 @@
 
   &:hover,
   [open] > & {
-    transition-duration: 0.1s;
+    transition-duration: var(--gh-duration-fast);
   }
 
   &:active,
@@ -115,6 +117,7 @@
   grid-template-columns: min-content minmax(0, auto) min-content;
   align-items: center;
   place-content: center;
+  padding-bottom: 1px; // optical alignment for firefox
 
   > :not(:last-child) {
     margin-right: var(--gh-control-medium-gap);
@@ -131,6 +134,7 @@
 // align svg
 .Button-visual {
   display: flex;
+  pointer-events: none; // allow click handler to work, avoiding visuals
 }
 
 .Button-label {
@@ -148,13 +152,12 @@
 }
 
 .Button-trailingAction {
-  margin-right: -6px;
+  margin-right: calc(var(--base-size-4) * -1);
 }
 
 // sizes
 
 .Button--small {
-  //   height: 28px;
   font-size: $font-size-small;
   height: var(--gh-control-small-size);
   padding: 0 var(--gh-control-small-paddingInline-normal);
@@ -172,7 +175,6 @@
 }
 
 .Button--large {
-  //   height: 40px;
   height: var(--gh-control-large-size);
   padding: 0 var(--gh-control-large-paddingInline-normal);
   gap: var(--gh-control-large-gap);
@@ -262,17 +264,15 @@
   }
 }
 
+// link color without svg
 .Button--invisible {
-  color: var(--color-btn-outline-text);
-  fill: var(--color-btn-outline-text);
-  background-color: var(--color-canvas-default);
-  border: $border-width $border-style;
-  border-color: var(--color-canvas-default);
+  color: var(--color-accent-fg);
+  fill: var(--color-fg-muted);
+  border: none;
 
   &:hover,
   [open] > & {
-    background-color: var(--color-btn-hover-bg);
-    border-color: var(--color-btn-hover-bg);
+    background-color: var(--color-action-list-item-default-hover-bg);
   }
 
   &[aria-pressed='true'],
@@ -291,6 +291,18 @@
     border-color: var(--color-btn-border);
     fill: var(--color-primer-fg-disabled);
   }
+
+  // if visual is present, muted label color
+  .Button-label:not(:only-child) {
+    color: var(--color-btn-text);
+  }
+
+  // if trailingAction is present, muted label color
+  .Button-content:not(:only-child) {
+    .Button-label {
+      color: var(--color-btn-text);
+    }
+  }
 }
 
 // danger
diff --git a/src/button-refactor/icon-button.scss b/src/button-refactor/icon-button.scss
index 001f59f2dc..1b12624e31 100644
--- a/src/button-refactor/icon-button.scss
+++ b/src/button-refactor/icon-button.scss
@@ -2,13 +2,13 @@
   display: grid;
   place-content: center;
   padding: unset;
-  width: 32px;
+  width: var(--gh-control-medium-size);
 
   &.Button--small {
-    width: 28px;
+    width: var(--gh-control-small-size);
   }
 
   &.Button--large {
-    width: 44px;
+    width: var(--gh-control-large-size);
   }
 }
diff --git a/src/button-refactor/link.scss b/src/button-refactor/link.scss
index d08246fcf3..3b69f702b1 100644
--- a/src/button-refactor/link.scss
+++ b/src/button-refactor/link.scss
@@ -1,5 +1,6 @@
 .Link {
   color: var(--color-accent-fg);
+  fill: var(--color-accent-fg);
 
   &:hover {
     text-decoration: underline;
@@ -10,9 +11,11 @@
 
   &.Link--muted {
     color: var(--color-fg-muted);
+    fill: var(--color-fg-muted);
 
     &:hover {
       color: var(--color-accent-fg);
+      fill: var(--color-accent-fg);
     }
   }
 }
@@ -21,5 +24,5 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 4px;
+  gap: 0.25em;
 }

From a0219410009340305c8ea153fad64a2c00b28f35 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Thu, 14 Jul 2022 02:04:03 +0000
Subject: [PATCH 14/16] support tag variation for pvc

---
 src/button-refactor/button.scss | 112 ++++++++++----------------------
 1 file changed, 34 insertions(+), 78 deletions(-)

diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index f07d2a96a2..23407691d6 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -1,82 +1,31 @@
 // temporary, pre primitives release
 :root {
-  --base-size-128: 8rem;
-  --base-size-112: 7rem;
-  --base-size-96: 6rem;
-  --base-size-80: 5rem;
-  --base-size-64: 4rem;
-  --base-size-48: 3rem;
-  --base-size-44: 2.75rem;
-  --base-size-40: 2.5rem;
-  --base-size-36: 2.25rem;
-  --base-size-32: 2rem;
-  --base-size-28: 1.75rem;
-  --base-size-24: 1.5rem;
-  --base-size-20: 1.25rem;
-  --base-size-16: 1rem;
-  --base-size-12: 0.75rem;
-  --base-size-8: 0.5rem;
-  --base-size-4: 0.25rem;
-  --gh-control-xlarge-gap: var(--base-size-8);
-  --gh-control-xlarge-paddingInline-spacious: var(--base-size-16);
-  --gh-control-xlarge-paddingInline-normal: var(--base-size-12);
-  --gh-control-xlarge-lineBoxHeight: var(--base-size-20);
-  --gh-control-xlarge-size: var(--base-size-48);
-  --gh-control-large-gap: var(--base-size-8);
-  --gh-control-large-paddingInline-spacious: var(--base-size-16);
-  --gh-control-large-paddingInline-normal: var(--base-size-12);
-  --gh-control-large-lineBoxHeight: var(--base-size-20);
-  --gh-control-large-size: var(--base-size-40);
-  --gh-control-medium-gap: var(--base-size-8);
-  --gh-control-medium-paddingInline-spacious: var(--base-size-16);
-  --gh-control-medium-paddingInline-normal: var(--base-size-12);
-  --gh-control-medium-paddingInline-condensed: var(--base-size-8);
-  --gh-control-medium-lineBoxHeight: var(--base-size-20);
-  --gh-control-medium-size: var(--base-size-32);
-  --gh-control-small-gap: var(--base-size-4);
-  --gh-control-small-paddingInline-normal: var(--base-size-12);
-  --gh-control-small-paddingInline-condensed: var(--base-size-8);
-  --gh-control-small-lineBoxHeight: var(--base-size-20);
-  --gh-control-small-size: var(--base-size-28);
-  --gh-control-xsmall-gap: var(--base-size-4);
-  --gh-control-xsmall-paddingInline-spacious: var(--base-size-12);
-  --gh-control-xsmall-paddingInline-normal: var(--base-size-8);
-  --gh-control-xsmall-paddingInline-condensed: var(--base-size-4);
-  --gh-control-xsmall-lineBoxHeight: var(--base-size-20);
-  --gh-control-xsmall-size: var(--base-size-24);
-  --gh-control-minTarget-coarse: var(--base-size-44);
-  --gh-control-minTarget-fine: var(--base-size-16);
-  --gh-control-xlarge-paddingBlock: calc((var(--gh-control-xlarge-size) - var(--gh-control-xlarge-lineBoxHeight)) / 2);
-  --gh-control-large-paddingBlock: calc((var(--gh-control-large-size) - var(--gh-control-large-lineBoxHeight)) / 2);
-  --gh-control-medium-paddingBlock: calc((var(--gh-control-medium-size) - var(--gh-control-medium-lineBoxHeight)) / 2);
-  --gh-control-small-paddingBlock: calc((var(--gh-control-small-size) - var(--gh-control-small-lineBoxHeight)) / 2);
-  --gh-control-xsmall-paddingBlock: calc((var(--gh-control-xsmall-size) - var(--gh-control-xsmall-lineBoxHeight)) / 2);
-  --gh-duration-fast: 80ms;
-  --gh-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
+  --primer-duration-fast: 80ms;
+  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
 // base button
 .Button {
   position: relative;
-  font-size: 0.875rem;
-  font-weight: $font-weight-semibold;
+  font-size: var(--primer-text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
   cursor: pointer;
   user-select: none;
   background-color: transparent;
-  border: $border-width $border-style;
+  border: var(--primer-borderWidth-thin) solid;
   border-color: transparent;
-  border-radius: $border-radius;
+  border-radius: var(--primer-borderRadius-medium);
   color: var(--color-btn-text);
-  transition: var(--gh-duration-fast) var(--gh-easing-easeInOut);
+  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);
   transition-property: color, fill, background-color, border-color;
   text-align: center;
-  height: var(--gh-control-medium-size);
-  padding: 0 var(--gh-control-medium-paddingInline-normal);
+  height: var(--primer-control-medium-size);
+  padding: 0 var(--primer-control-medium-paddingInline-normal);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  gap: var(--gh-control-medium-gap);
+  gap: var(--primer-control-medium-gap);
 
   // mobile friendly sizing
   @media (pointer: course) {
@@ -89,7 +38,7 @@
 
   &:hover,
   [open] > & {
-    transition-duration: var(--gh-duration-fast);
+    transition-duration: var(--primer-duration-fast);
   }
 
   &:active,
@@ -109,6 +58,15 @@
   }
 }
 
+a.Button,
+summary.Button {
+  display: inline-flex;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
 // wrap grid content to allow trailingAction to lock-right
 .Button-content {
   flex: 1 0 auto;
@@ -117,10 +75,10 @@
   grid-template-columns: min-content minmax(0, auto) min-content;
   align-items: center;
   place-content: center;
-  padding-bottom: 1px; // optical alignment for firefox
+  //   padding-bottom: 1px; // optical alignment for firefox
 
   > :not(:last-child) {
-    margin-right: var(--gh-control-medium-gap);
+    margin-right: var(--primer-control-medium-gap);
   }
 }
 
@@ -140,7 +98,7 @@
 .Button-label {
   grid-area: text;
   white-space: nowrap;
-  line-height: var(--gh-control-medium-lineBoxHeight);
+  line-height: var(--primer-text-body-lineHeight-medium);
 }
 
 .Button-leadingVisual {
@@ -158,34 +116,34 @@
 // sizes
 
 .Button--small {
-  font-size: $font-size-small;
-  height: var(--gh-control-small-size);
-  padding: 0 var(--gh-control-small-paddingInline-normal);
-  gap: var(--gh-control-small-gap);
+  font-size: var(--primer-text-body-size-small);
+  height: var(--primer-control-small-size);
+  padding: 0 var(--primer-control-small-paddingInline-normal);
+  gap: var(--primer-control-small-gap);
 
   .Button-label {
-    line-height: var(--gh-control-small-lineBoxHeight);
+    line-height: var(--primer-text-body-lineHeight-small);
   }
 
   .Button-content {
     > :not(:last-child) {
-      margin-right: var(--gh-control-small-gap);
+      margin-right: var(--primer-control-small-gap);
     }
   }
 }
 
 .Button--large {
-  height: var(--gh-control-large-size);
-  padding: 0 var(--gh-control-large-paddingInline-normal);
-  gap: var(--gh-control-large-gap);
+  height: var(--primer-control-large-size);
+  padding: 0 var(--primer-control-large-paddingInline-normal);
+  gap: var(--primer-control-large-gap);
 
   .Button-label {
-    line-height: var(--gh-control-large-lineBoxHeight);
+    line-height: var(--primer-text-body-lineHeight-large);
   }
 
   .Button-content {
     > :not(:last-child) {
-      margin-right: var(--gh-control-large-gap);
+      margin-right: var(--primer-control-large-gap);
     }
   }
 }
@@ -232,7 +190,6 @@
   color: var(--color-btn-text);
   fill: var(--color-fg-muted); // help this
   background-color: var(--color-btn-bg);
-  border: $border-width $border-style;
   border-color: var(--color-btn-border);
   box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
 
@@ -310,7 +267,6 @@
   color: var(--color-btn-danger-text);
   fill: var(--color-btn-danger-icon);
   background-color: var(--color-btn-bg);
-  border: $border-width $border-style;
   border-color: var(--color-btn-border);
   box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
 

From f67a1c2f8cd792efa3c37d4218d6ab115386dc1f Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Thu, 14 Jul 2022 02:32:24 +0000
Subject: [PATCH 15/16] tokens

---
 src/button-refactor/icon-button.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/button-refactor/icon-button.scss b/src/button-refactor/icon-button.scss
index 1b12624e31..f2b39a5a02 100644
--- a/src/button-refactor/icon-button.scss
+++ b/src/button-refactor/icon-button.scss
@@ -2,13 +2,13 @@
   display: grid;
   place-content: center;
   padding: unset;
-  width: var(--gh-control-medium-size);
+  width: var(--primer-control-medium-size);
 
   &.Button--small {
-    width: var(--gh-control-small-size);
+    width: var(--primer-control-small-size);
   }
 
   &.Button--large {
-    width: var(--gh-control-large-size);
+    width: var(--primer-control-large-size);
   }
 }

From d2308e27b1ebe6603ecc6d92cccd3f2f3c3a6579 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Fri, 19 Aug 2022 22:33:59 +0000
Subject: [PATCH 16/16] update invisible style

---
 package.json                    |  2 +-
 src/button-refactor/button.scss | 15 ++++++++++-----
 src/button-refactor/index.scss  |  6 ++++++
 src/core/index.scss             |  6 +-----
 yarn.lock                       |  8 ++++----
 5 files changed, 22 insertions(+), 15 deletions(-)
 create mode 100644 src/button-refactor/index.scss

diff --git a/package.json b/package.json
index 9529b36034..d6567cb09c 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.8.4"
+    "@primer/primitives": "^7.9.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.4",
diff --git a/src/button-refactor/button.scss b/src/button-refactor/button.scss
index 23407691d6..8baf610001 100644
--- a/src/button-refactor/button.scss
+++ b/src/button-refactor/button.scss
@@ -58,6 +58,11 @@
   }
 }
 
+.Button-withTooltip {
+    position: relative;
+    display: inline-block;
+}
+
 a.Button,
 summary.Button {
   display: inline-flex;
@@ -223,21 +228,21 @@ summary.Button {
 
 // link color without svg
 .Button--invisible {
-  color: var(--color-accent-fg);
-  fill: var(--color-fg-muted);
+  color: var(--color-fg-default);
+  fill: var(--color-fg-default);
   border: none;
 
   &:hover,
   [open] > & {
-    background-color: var(--color-action-list-item-default-hover-bg);
+    background-color: var(--color-segmented-control-button-hover-bg);
   }
 
   &[aria-pressed='true'],
   &:active,
   &.Button--active,
   &.Button--pressed {
-    background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-primer-shadow-inset);
+    background-color: var(--color-segmented-control-button-active-bg);
+    // box-shadow: var(--color-primer-shadow-inset);
   }
 
   &:disabled,
diff --git a/src/button-refactor/index.scss b/src/button-refactor/index.scss
new file mode 100644
index 0000000000..739c32c617
--- /dev/null
+++ b/src/button-refactor/index.scss
@@ -0,0 +1,6 @@
+@import '../support/index.scss';
+@import './button.scss';
+@import './button-group.scss';
+@import './icon-button.scss';
+@import './link.scss';
+@import './link-styled-as-button.scss';
diff --git a/src/core/index.scss b/src/core/index.scss
index 438d756c73..ccac65d3ff 100644
--- a/src/core/index.scss
+++ b/src/core/index.scss
@@ -24,10 +24,6 @@
 @import '../pagination/index.scss';
 @import '../tooltips/index.scss';
 @import '../truncate/index.scss';
-@import '../button-refactor/button.scss';
-@import '../button-refactor/link.scss';
-@import '../button-refactor/icon-button.scss';
-@import '../button-refactor/link-styled-as-button.scss';
-@import '../button-refactor/button-group.scss';
+@import '../button-refactor/index.scss';
 // Utilities always go last so that they can override components
 @import '../utilities/index.scss';
diff --git a/yarn.lock b/yarn.lock
index 45e2f86a81..d89629d6cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1076,10 +1076,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@primer/primitives@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.8.4.tgz#484486ee47050f18b2e82c33e9df247a5886c82a"
-  integrity sha512-cXmnhKBvrwbP3FYR9oxNYx3s8y2svsQLbDNZuoGcsZJLQ6RD3HfQ9ZtXgbyTbTYTyfPvkyd0pkQLI7tRJSc5kg==
+"@primer/primitives@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.9.0.tgz#c8a27287488c8308b1715a7d73214629c331544a"
+  integrity sha512-ZHHfwB0z0z6nDJp263gyGIClYDy+rl0nwqyi4qhcv3Cxhkmtf+If2KVjr6FQqBBFfi1wQwUzaax2FBvfEMFBnw==
 
 "@primer/stylelint-config@^12.4.0":
   version "12.6.1"