Adds 'inactive' state to buttons

.changeset/soft-pans-punch.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Adds an 'inactive' state to buttons. An inactive button looks disabled and has aria-disabled, but it can still be clicked and focused. This was added to support buttons that are broken due to availability issues, but can't be removed from the page.
+
+<!-- Changed components: Button, Button2, IconButton -->

e2e/components/Button.test.ts

@@ -479,6 +479,40 @@ test.describe('Button', () => {
     }
   })
 
+  test.describe('Inactive', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--inactive',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.Inactive.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--inactive',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
   test.describe('Dev: Invisible Variants', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

src/Button/Button.docs.json

@@ -44,6 +44,11 @@
       "type": "React.ElementType",
       "description": "A visual to display after the button text."
     },
+    {
+      "name": "inactive",
+      "type": "boolean",
+      "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+    },
     {
       "name": "as",
       "type": "React.ElementType",

src/Button/Button.features.stories.tsx

@@ -82,6 +82,12 @@ export const Block = () => <Button block>Default</Button>
 
 export const Disabled = () => <Button disabled>Default</Button>
 
+export const Inactive = () => (
+  <Button variant="primary" inactive>
+    Default
+  </Button>
+)
+
 export const Small = () => <Button size="small">Default</Button>
 
 export const Medium = () => <Button size="medium">Default</Button>

src/Button/Button.stories.tsx

@@ -18,6 +18,11 @@ export default {
         type: 'boolean',
       },
     },
+    inactive: {
+      control: {
+        type: 'boolean',
+      },
+    },
     variant: {
       control: {
         type: 'radio',
@@ -48,6 +53,7 @@ export default {
     block: false,
     size: 'medium',
     disabled: false,
+    inactive: false,
     variant: 'default',
     alignContent: 'center',
     trailingVisual: null,

src/Button/ButtonBase.tsx

@@ -21,6 +21,7 @@ const ButtonBase = forwardRef(
       size = 'medium',
       alignContent = 'center',
       block = false,
+      inactive,
       ...rest
     } = props
     const LeadingVisual = leadingVisual ?? leadingIcon
@@ -70,6 +71,7 @@ const ButtonBase = forwardRef(
         data-block={block ? 'block' : null}
         data-size={size === 'small' || size === 'large' ? size : undefined}
         data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
+        aria-disabled={inactive}
       >
         {Icon ? (
           <Icon />

src/Button/IconButton.docs.json

@@ -24,6 +24,11 @@
       "defaultValue": "",
       "description": "Changes the size of the icon button component"
     },
+    {
+      "name": "inactive",
+      "type": "boolean",
+      "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+    },
     {
       "name": "icon",
       "type": "Component",

src/Button/IconButton.stories.tsx

@@ -18,6 +18,11 @@ const meta: Meta<ComponentProps<typeof IconButton>> = {
         type: 'boolean',
       },
     },
+    inactive: {
+      control: {
+        type: 'boolean',
+      },
+    },
     variant: {
       control: {
         type: 'radio',