diff --git a/.changeset/seven-ears-know.md b/.changeset/seven-ears-know.md
new file mode 100644
index 00000000000..0b130b45e38
--- /dev/null
+++ b/.changeset/seven-ears-know.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Hidden: rename prop 'on' -> 'when'
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-colorblind-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-colorblind-linux.png
new file mode 100644
index 00000000000..a3d97b9a42f
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-dimmed-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-dimmed-linux.png
new file mode 100644
index 00000000000..15aa45e00eb
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-high-contrast-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..f4c26b11a71
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-linux.png
new file mode 100644
index 00000000000..a3d97b9a42f
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-tritanopia-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..a3d97b9a42f
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-colorblind-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-colorblind-linux.png
new file mode 100644
index 00000000000..7cecc35151c
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-high-contrast-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-high-contrast-linux.png
new file mode 100644
index 00000000000..2f53a562c7d
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-linux.png
new file mode 100644
index 00000000000..7cecc35151c
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-tritanopia-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-tritanopia-linux.png
new file mode 100644
index 00000000000..7cecc35151c
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-medium-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-colorblind-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-colorblind-linux.png
new file mode 100644
index 00000000000..0c18cbe9054
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-dimmed-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-dimmed-linux.png
new file mode 100644
index 00000000000..1c5ec1373bb
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-high-contrast-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..a6ae22946f7
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-linux.png
new file mode 100644
index 00000000000..0c18cbe9054
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-tritanopia-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..0c18cbe9054
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-colorblind-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-colorblind-linux.png
new file mode 100644
index 00000000000..a11f89bd814
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-high-contrast-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-high-contrast-linux.png
new file mode 100644
index 00000000000..ef1a0d170d1
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-linux.png
new file mode 100644
index 00000000000..a11f89bd814
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-tritanopia-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-tritanopia-linux.png
new file mode 100644
index 00000000000..a11f89bd814
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-narrow-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-colorblind-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-colorblind-linux.png
new file mode 100644
index 00000000000..b752096b903
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-dimmed-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-dimmed-linux.png
new file mode 100644
index 00000000000..a52285f0308
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-high-contrast-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..3477284b8ac
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-linux.png
new file mode 100644
index 00000000000..b752096b903
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-tritanopia-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..b752096b903
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-colorblind-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-colorblind-linux.png
new file mode 100644
index 00000000000..2b4fe4b4b98
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-high-contrast-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-high-contrast-linux.png
new file mode 100644
index 00000000000..7551f90759b
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-linux.png
new file mode 100644
index 00000000000..2b4fe4b4b98
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-linux.png differ
diff --git a/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-tritanopia-linux.png b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-tritanopia-linux.png
new file mode 100644
index 00000000000..2b4fe4b4b98
Binary files /dev/null and b/.playwright/snapshots/components/Hidden.test.ts-snapshots/Hidden-Default-wide-light-tritanopia-linux.png differ
diff --git a/docs/content/drafts/Hidden.mdx b/docs/content/drafts/Hidden.mdx
index 2090bdde820..a7e6ee93adc 100644
--- a/docs/content/drafts/Hidden.mdx
+++ b/docs/content/drafts/Hidden.mdx
@@ -18,7 +18,7 @@ The `Hidden` component is a utility component that will help you hide or show co
 ### Single viewport value provided
 
 ```jsx live drafts
-<Hidden on="narrow">
+<Hidden when="narrow">
   <Placeholder height="80px" label="This is not visible in narrow viewport" />
 </Hidden>
 ```
@@ -26,7 +26,7 @@ The `Hidden` component is a utility component that will help you hide or show co
 ### Multiple viewport values provided
 
 ```jsx live drafts
-<Hidden on={['narrow', 'wide']}>
+<Hidden when={['narrow', 'wide']}>
   <Placeholder height="80px" label="This is not visible in narrow and wide viewport" />
 </Hidden>
 ```
diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx
index 07eab16538f..44f751767bd 100644
--- a/docs/content/drafts/PageHeader.mdx
+++ b/docs/content/drafts/PageHeader.mdx
@@ -293,10 +293,10 @@ import {PageHeader} from '@primer/react/drafts'
   <PageHeader.TitleArea>
     <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
     <PageHeader.Actions>
-      <Hidden on={['narrow']}>
+      <Hidden when={['narrow']}>
         <Button variant="primary">New webhook</Button>
       </Hidden>
-      <Hidden on={['regular', 'wide']}>
+      <Hidden when={['regular', 'wide']}>
         <Button variant="primary">New</Button>
       </Hidden>
     </PageHeader.Actions>
diff --git a/e2e/components/Hidden.test.ts b/e2e/components/Hidden.test.ts
new file mode 100644
index 00000000000..3bc87d1cd3e
--- /dev/null
+++ b/e2e/components/Hidden.test.ts
@@ -0,0 +1,50 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+import {viewports} from '../test-helpers/viewports'
+
+test.describe('Hidden', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-hidden--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Regular size viewport
+          await page.setViewportSize({width: viewports['primer.breakpoint.md'], height: 768})
+          await page
+            .getByText('The below content is visible when the viewport is regular or wide but hidden when narrow:')
+            .waitFor()
+          expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.medium.${theme}.png`)
+          // Wide size viewport
+          await page.setViewportSize({width: viewports['primer.breakpoint.lg'], height: 768})
+          await page
+            .getByText('The below content is visible when the viewport is regular or wide but hidden when narrow:')
+            .waitFor()
+          expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.wide.${theme}.png`)
+          // Narrow size viewport
+          await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768})
+          await page
+            .getByText('The below content is visible when the viewport is regular or wide but hidden when narrow:')
+            .waitFor()
+          expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.narrow.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-hidden--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})
diff --git a/generated/components.json b/generated/components.json
index cb5135fa7e3..e76592ba65a 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -2268,10 +2268,15 @@
       "name": "Hidden",
       "status": "draft",
       "a11yReviewed": false,
-      "stories": [],
+      "stories": [
+        {
+          "id": "components-hidden--default",
+          "code": "() => (\n  <>\n    <Text>\n      The below content is visible when the viewport is regular or wide but\n      hidden when narrow:\n    </Text>\n    <Hidden when=\"narrow\">\n      This is the said content and it is visible when the viewport is regular or\n      wide but hidden when narrow\n    </Hidden>\n  </>\n)"
+        }
+      ],
       "props": [
         {
-          "name": "on",
+          "name": "when",
           "type": "'narrow' | 'wide' | 'regular' | Array<'narrow' | 'regular' | 'wide'>",
           "defaultValue": "",
           "description": "In which viewport(s) the children are going to be hidden"
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 0d030a15766..4b1921969d2 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -374,6 +374,17 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'Hidden',
+    {
+      stories: [
+        {
+          id: 'drafts-components-hidden--default',
+          name: 'Default',
+        },
+      ],
+    },
+  ],
   [
     'IconButton',
     {
diff --git a/src/Hidden/Hidden.docs.json b/src/Hidden/Hidden.docs.json
index 3816f52e391..0c4b3a0d3e0 100644
--- a/src/Hidden/Hidden.docs.json
+++ b/src/Hidden/Hidden.docs.json
@@ -6,7 +6,7 @@
   "stories": [],
   "props": [
     {
-      "name": "on",
+      "name": "when",
       "type": "'narrow' | 'wide' | 'regular' | Array<'narrow' | 'regular' | 'wide'>",
       "defaultValue": "",
       "description": "In which viewport(s) the children are going to be hidden"
diff --git a/src/Hidden/examples.stories.tsx b/src/Hidden/Hidden.examples.stories.tsx
similarity index 93%
rename from src/Hidden/examples.stories.tsx
rename to src/Hidden/Hidden.examples.stories.tsx
index b6d9b62ef92..39a1fcef230 100644
--- a/src/Hidden/examples.stories.tsx
+++ b/src/Hidden/Hidden.examples.stories.tsx
@@ -4,7 +4,7 @@ import {Button, Link, Text, StateLabel, BranchName, Box} from '..'
 import {ArrowRightIcon} from '@primer/octicons-react'
 
 import {PageHeader} from '../PageHeader'
-import Hidden from '../Hidden'
+import Hidden from '.'
 
 export default {
   title: 'Drafts/Components/Hidden/Examples',
@@ -30,11 +30,11 @@ export const Webhooks = () => (
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
 
         <PageHeader.Actions>
-          <Hidden on={['narrow']}>
+          <Hidden when={['narrow']}>
             <Button variant="primary">New webhook</Button>
           </Hidden>
 
-          <Hidden on={['regular', 'wide']}>
+          <Hidden when={['regular', 'wide']}>
             <Button variant="primary">New</Button>
           </Hidden>
         </PageHeader.Actions>
@@ -60,7 +60,7 @@ export const PullRequestPage = () => (
       </PageHeader.TitleArea>
       <PageHeader.Description>
         <StateLabel status="pullOpened">Open</StateLabel>
-        <Hidden on={['narrow']}>
+        <Hidden when={['narrow']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
             <Link href="#" muted sx={{fontWeight: 'bold'}}>
               broccolinisoup
@@ -69,7 +69,7 @@ export const PullRequestPage = () => (
             <BranchName href="#">broccolinisoup/add-hidden-component</BranchName>
           </Text>
         </Hidden>
-        <Hidden on={['regular', 'wide']}>
+        <Hidden when={['regular', 'wide']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
             <BranchName href="#">main</BranchName>
             <ArrowRightIcon />
diff --git a/src/Hidden/Hidden.features.stories.tsx b/src/Hidden/Hidden.features.stories.tsx
new file mode 100644
index 00000000000..f6cbcaf8752
--- /dev/null
+++ b/src/Hidden/Hidden.features.stories.tsx
@@ -0,0 +1,29 @@
+import {ComponentMeta} from '@storybook/react'
+import React from 'react'
+import {Hidden} from './Hidden'
+import {Box, Button} from '..'
+
+export default {
+  title: 'Drafts/Components/Hidden/Features',
+  component: Hidden,
+} as ComponentMeta<typeof Hidden>
+
+export const HideContent = () => (
+  <Box>
+    <Hidden when="narrow"> This value is shown in regular and wide viewports</Hidden>
+    <Hidden when="regular"> This value is shown in narrow and wide viewports</Hidden>
+    <Hidden when="wide"> This value is shown in narrow and regular viewports</Hidden>
+  </Box>
+)
+
+export const RenderContentResponsively = () => (
+  <Box>
+    <Hidden when="narrow">
+      <Button variant="primary">I am visible when the viewport is regular or wide viewport</Button>
+    </Hidden>
+
+    <Hidden when={['regular', 'wide']}>
+      <Button variant="primary">I am visible when the viewport is narrow</Button>
+    </Hidden>
+  </Box>
+)
diff --git a/src/Hidden/Hidden.stories.tsx b/src/Hidden/Hidden.stories.tsx
index c778b615a9b..efad238fbc2 100644
--- a/src/Hidden/Hidden.stories.tsx
+++ b/src/Hidden/Hidden.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {ComponentMeta, ComponentStory} from '@storybook/react'
 
 import Hidden from '.'
+import Text from '../Text'
 
 export default {
   title: 'Drafts/Components/Hidden',
@@ -11,20 +12,29 @@ export default {
     },
   },
   args: {
-    on: ['regular'],
+    when: ['narrow'],
   },
   argTypes: {
-    on: {
+    when: {
       type: {
         name: 'enum',
         value: ['narrow', 'regular', 'wide'],
       },
       control: {type: 'multi-select'},
-      description: 'The viewport type to hide the content on.',
+      description: 'The viewport type where the content is hidden.',
     },
   },
 } as ComponentMeta<typeof Hidden>
 
+export const Default = () => (
+  <>
+    <Text>The below content is visible when the viewport is regular or wide but hidden when narrow:</Text>
+    <Hidden when="narrow">
+      This is the said content and it is visible when the viewport is regular or wide but hidden when narrow
+    </Hidden>
+  </>
+)
+
 export const Playground: ComponentStory<typeof Hidden> = args => (
-  <Hidden {...args}>The content is hidden on {Array(args.on).join(',')}</Hidden>
+  <Hidden {...args}>The content is hidden when the viewport is {Array(args.when).join(',')}</Hidden>
 )
diff --git a/src/Hidden/Hidden.test.tsx b/src/Hidden/Hidden.test.tsx
index cef8a602307..4a2560f0902 100644
--- a/src/Hidden/Hidden.test.tsx
+++ b/src/Hidden/Hidden.test.tsx
@@ -20,8 +20,8 @@ describe('Hidden', () => {
     Component: Hidden,
     options: {skipAs: true, skipSx: true},
     toRender: () => (
-      <Hidden on={'narrow'}>
-        <div>Hidden on narrow</div>
+      <Hidden when={'narrow'}>
+        <div>Hidden when narrow</div>
       </Hidden>
     ),
   })
@@ -31,16 +31,16 @@ describe('Hidden', () => {
     Hidden,
   })
 
-  it('renders `on` prop as expected', () => {
+  it('renders `when` prop as expected', () => {
     const {container} = render(
-      <Hidden on={'narrow'}>
-        <div>Hidden on narrow</div>
+      <Hidden when={'narrow'}>
+        <div>Hidden when narrow</div>
       </Hidden>,
     )
     expect(container).toMatchSnapshot()
   })
 
-  it('renders the styles as expected when a single viewport value is provided as a string via `on` prop', () => {
+  it('renders the styles as expected when a single viewport value is provided as a string via `when` prop', () => {
     const expectedStyles = {
       // `.replace` is used because renderStyles return the JSON object without a space after the column
       [`${mediaQueries.regular.replace(': ', ':')}`]: {
@@ -49,14 +49,14 @@ describe('Hidden', () => {
     }
     expect(
       renderStyles(
-        <Hidden on="regular">
-          <div>This is hidden on regular viewports</div>
+        <Hidden when="regular">
+          <div>This is hidden when regular viewports</div>
         </Hidden>,
       ),
     ).toEqual(expect.objectContaining(expectedStyles))
   })
 
-  it('renders the styles as expected when multiple viewport values are provided as an array via `on` prop', () => {
+  it('renders the styles as expected when multiple viewport values are provided as an array via `when` prop', () => {
     const expectedStyles = {
       [`${mediaQueries.narrow.replace(': ', ':')}`]: {
         display: 'none',
@@ -67,13 +67,13 @@ describe('Hidden', () => {
     }
     expect(
       renderStyles(
-        <Hidden on={['narrow', 'wide']}>
-          <div>This is hidden on regular and wide viewports</div>
+        <Hidden when={['narrow', 'wide']}>
+          <div>This is hidden when regular and wide viewports</div>
         </Hidden>,
       ),
     ).toEqual(expect.objectContaining(expectedStyles))
   })
 })
 
-checkStoriesForAxeViolations('features', '../Hidden/')
-checkStoriesForAxeViolations('examples', '../Hidden/')
+checkStoriesForAxeViolations('Hidden.features', '../Hidden/')
+checkStoriesForAxeViolations('Hidden.examples', '../Hidden/')
diff --git a/src/Hidden/Hidden.tsx b/src/Hidden/Hidden.tsx
index c2ea2731cdc..7b7f0a98aee 100644
--- a/src/Hidden/Hidden.tsx
+++ b/src/Hidden/Hidden.tsx
@@ -6,10 +6,10 @@ import Box from '../Box'
 type Viewport = 'narrow' | 'regular' | 'wide'
 
 export type HiddenProps = {
-  on: Array<Viewport> | Viewport
+  when: Array<Viewport> | Viewport
   children: React.ReactNode
 }
-/* Normalize the value that is received from the prop `on`.
+/* Normalize the value that is received from the prop `when`.
  * For array types : ['narrow', 'wide'] -> {narrow: true, wide: true}
  * For string types: 'narrow' -> {narrow: true}
  */
@@ -30,9 +30,9 @@ function normalize(hiddenViewports: Array<Viewport> | Viewport): ResponsiveValue
   }
 }
 
-export const Hidden = ({on, children}: HiddenProps) => {
+export const Hidden = ({when, children}: HiddenProps) => {
   // Get breakpoint declarations for the normalized ResponsiveValue object
-  const styles = getBreakpointDeclarations(normalize(on), 'display', () => 'none')
+  const styles = getBreakpointDeclarations(normalize(when), 'display', () => 'none')
   // Render the children with the styles
   return styles ? <Box sx={styles}>{children}</Box> : null
 }
diff --git a/src/Hidden/__snapshots__/Hidden.test.tsx.snap b/src/Hidden/__snapshots__/Hidden.test.tsx.snap
index cb145908e1e..2bbb116a602 100644
--- a/src/Hidden/__snapshots__/Hidden.test.tsx.snap
+++ b/src/Hidden/__snapshots__/Hidden.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Hidden renders \`on\` prop as expected 1`] = `
+exports[`Hidden renders \`when\` prop as expected 1`] = `
 @media screen and (max-width:calc(768px - 0.02px)) {
   .c0 {
     display: none;
@@ -12,7 +12,7 @@ exports[`Hidden renders \`on\` prop as expected 1`] = `
     class="c0"
   >
     <div>
-      Hidden on narrow
+      Hidden when narrow
     </div>
   </div>
 </div>
@@ -29,7 +29,7 @@ exports[`Hidden renders consistently 1`] = `
   className="c0"
 >
   <div>
-    Hidden on narrow
+    Hidden when narrow
   </div>
 </div>
 `;
diff --git a/src/Hidden/features.stories.tsx b/src/Hidden/features.stories.tsx
deleted file mode 100644
index 27a7b096866..00000000000
--- a/src/Hidden/features.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {ComponentMeta} from '@storybook/react'
-import React from 'react'
-import {Hidden} from './Hidden'
-import {Box, Button} from '..'
-
-export default {
-  title: 'Drafts/Components/Hidden/Features',
-  component: Hidden,
-} as ComponentMeta<typeof Hidden>
-
-export const HideContent = () => (
-  <Box>
-    <Hidden on="narrow"> This value is shown in regular and wide viewports</Hidden>
-    <Hidden on="regular"> This value is shown in narrow and wide viewports</Hidden>
-    <Hidden on="wide"> This value is shown in narrow and regular viewports</Hidden>
-  </Box>
-)
-
-export const RenderContentResponsively = () => (
-  <Box>
-    <Hidden on="narrow">
-      <Button variant="primary">I am visible on regular and wide viewport</Button>
-    </Hidden>
-
-    <Hidden on={['regular', 'wide']}>
-      <Button variant="primary">I am visible on narrow viewport</Button>
-    </Hidden>
-  </Box>
-)
diff --git a/src/PageHeader/PageHeader.examples.stories.tsx b/src/PageHeader/PageHeader.examples.stories.tsx
index 7b2c8dbfd6d..6697ec47981 100644
--- a/src/PageHeader/PageHeader.examples.stories.tsx
+++ b/src/PageHeader/PageHeader.examples.stories.tsx
@@ -40,11 +40,11 @@ export const Webhooks = () => (
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
 
         <PageHeader.Actions>
-          <Hidden on={['narrow']}>
+          <Hidden when={['narrow']}>
             <Button variant="primary">New webhook</Button>
           </Hidden>
 
-          <Hidden on={['regular', 'wide']}>
+          <Hidden when={['regular', 'wide']}>
             <Button variant="primary">New</Button>
           </Hidden>
         </PageHeader.Actions>
@@ -70,12 +70,12 @@ export const PullRequestPage = () => (
           PageHeader component initial layout explorations extra long pull request title
         </PageHeader.Title>
         <PageHeader.Actions>
-          <Hidden on={['regular', 'wide']}>
+          <Hidden when={['regular', 'wide']}>
             <IconButton aria-label="More" icon={KebabHorizontalIcon} />
             {/* Pop up actions */}
           </Hidden>
 
-          <Hidden on={['narrow']}>
+          <Hidden when={['narrow']}>
             <Box sx={{display: 'flex', gap: 2}}>
               <Button>Edit</Button>
               <Button leadingIcon={CodeIcon}>Code</Button>
@@ -85,7 +85,7 @@ export const PullRequestPage = () => (
       </PageHeader.TitleArea>
       <PageHeader.Description>
         <StateLabel status="pullOpened">Open</StateLabel>
-        <Hidden on={['narrow']}>
+        <Hidden when={['narrow']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
             <Link href="#" muted sx={{fontWeight: 'bold'}}>
               broccolinisoup
@@ -94,7 +94,7 @@ export const PullRequestPage = () => (
             <BranchName href="#">broccolinisoup/switch-to-new-underlineNav</BranchName>
           </Text>
         </Hidden>
-        <Hidden on={['regular', 'wide']}>
+        <Hidden when={['regular', 'wide']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
             <BranchName href="#">main</BranchName>
             <ArrowRightIcon />
@@ -172,12 +172,12 @@ export const WithPageLayout = () => {
               <Text sx={{color: 'fg.muted', fontWeight: 'light'}}>#1831</Text>
             </PageHeader.Title>
             <PageHeader.Actions>
-              <Hidden on={['regular', 'wide']}>
+              <Hidden when={['regular', 'wide']}>
                 <IconButton aria-label="More" icon={KebabHorizontalIcon} />
                 {/* Pop up actions */}
               </Hidden>
 
-              <Hidden on={['narrow']}>
+              <Hidden when={['narrow']}>
                 <Box sx={{display: 'flex'}}>
                   <Button>Edit</Button>
                   <Button leadingIcon={CodeIcon}>Code</Button>
@@ -187,7 +187,7 @@ export const WithPageLayout = () => {
           </PageHeader.TitleArea>
           <PageHeader.Description>
             <StateLabel status="pullOpened">Open</StateLabel>
-            <Hidden on={['narrow']}>
+            <Hidden when={['narrow']}>
               <Text sx={{fontSize: 1, color: 'fg.muted'}}>
                 <Link href="#" muted sx={{fontWeight: 'bold'}}>
                   broccolinisoup
@@ -196,7 +196,7 @@ export const WithPageLayout = () => {
                 <BranchName href="#">broccolinisoup/switch-to-new-underlineNav</BranchName>
               </Text>
             </Hidden>
-            <Hidden on={['regular', 'wide']}>
+            <Hidden when={['regular', 'wide']}>
               <Text sx={{fontSize: 1, color: 'fg.muted'}}>
                 <BranchName href="#">main</BranchName>
                 <ArrowRightIcon />
diff --git a/src/PageHeader/PageHeader.features.stories.tsx b/src/PageHeader/PageHeader.features.stories.tsx
index 4fcc34bc3f8..52ab002b37f 100644
--- a/src/PageHeader/PageHeader.features.stories.tsx
+++ b/src/PageHeader/PageHeader.features.stories.tsx
@@ -270,10 +270,10 @@ export const WithActionsThatHaveResponsiveContent = () => (
       <PageHeader.TitleArea>
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
         <PageHeader.Actions>
-          <Hidden on={['narrow']}>
+          <Hidden when={['narrow']}>
             <Button variant="primary">New webhook</Button>
           </Hidden>
-          <Hidden on={['regular', 'wide']}>
+          <Hidden when={['regular', 'wide']}>
             <Button variant="primary">New</Button>
           </Hidden>
         </PageHeader.Actions>
diff --git a/src/PageHeader/PageHeader.stories.tsx b/src/PageHeader/PageHeader.stories.tsx
index c9808664d02..0e8b3ce3565 100644
--- a/src/PageHeader/PageHeader.stories.tsx
+++ b/src/PageHeader/PageHeader.stories.tsx
@@ -230,11 +230,11 @@ export const Playground: Story = args => (
           <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
         </PageHeader.TrailingAction>
         <PageHeader.Actions hidden={!args.hasActions}>
-          <Hidden on={['narrow']}>
+          <Hidden when={['narrow']}>
             <Button variant="primary">New Branch</Button>
           </Hidden>
 
-          <Hidden on={['regular', 'wide', 'narrow']}>
+          <Hidden when={['regular', 'wide', 'narrow']}>
             <Button variant="primary">New</Button>
           </Hidden>
           <IconButton aria-label="More" icon={KebabHorizontalIcon} />
@@ -242,7 +242,7 @@ export const Playground: Story = args => (
       </PageHeader.TitleArea>
       <PageHeader.Description hidden={!args.hasDescription}>
         <StateLabel status="pullOpened">Open</StateLabel>
-        <Hidden on={['narrow']}>
+        <Hidden when={['narrow']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
             <Link href="#" muted sx={{fontWeight: 'bold'}}>
               broccolinisoup
@@ -251,7 +251,7 @@ export const Playground: Story = args => (
             <BranchName href="#">broccolinisoup/switch-to-new-underlineNav</BranchName>
           </Text>
         </Hidden>
-        <Hidden on={['regular', 'wide']}>
+        <Hidden when={['regular', 'wide']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
             <BranchName href="#">main</BranchName>
             <ArrowRightIcon />