diff --git a/packages/@react-spectrum/contextualhelp/package.json b/packages/@react-spectrum/contextualhelp/package.json
index 3bda3db17d5..a6e0b440259 100644
--- a/packages/@react-spectrum/contextualhelp/package.json
+++ b/packages/@react-spectrum/contextualhelp/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@babel/runtime": "^7.6.2",
     "@react-aria/i18n": "^3.6.0",
+    "@react-aria/utils": "^3.13.3",
     "@react-spectrum/button": "^3.9.1",
     "@react-spectrum/dialog": "^3.5.1",
     "@react-spectrum/utils": "^3.7.3",
diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
index 1088268d5ff..276361a47cc 100644
--- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
@@ -11,6 +11,7 @@
  */
 
 import {ActionButton} from '@react-spectrum/button';
+import {classNames, SlotProvider} from '@react-spectrum/utils';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {FocusableRef} from '@react-types/shared';
 import HelpOutline from '@spectrum-icons/workflow/HelpOutline';
@@ -18,8 +19,8 @@ import helpStyles from './contextualhelp.css';
 import InfoOutline from '@spectrum-icons/workflow/InfoOutline';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeProps, useLabels} from '@react-aria/utils';
 import React from 'react';
-import {SlotProvider} from '@react-spectrum/utils';
 import {SpectrumContextualHelpProps} from '@react-types/contextualhelp';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
@@ -40,23 +41,19 @@ function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef<HT
     footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}
   };
 
-  let ariaLabel = otherProps['aria-label'];
-  if (!ariaLabel && !otherProps['aria-labelledby']) {
-    ariaLabel = stringFormatter.format(variant);
-  }
+  let labelProps = useLabels(otherProps, stringFormatter.format(variant));
 
   return (
     <DialogTrigger {...otherProps} type="popover" placement={placement} hideArrow>
       <ActionButton
-        {...otherProps}
+        {...mergeProps(otherProps, labelProps)}
         ref={ref}
-        UNSAFE_className={helpStyles['react-spectrum-ContextualHelp-button']}
-        isQuiet
-        aria-label={ariaLabel}>
+        UNSAFE_className={classNames(helpStyles, 'react-spectrum-ContextualHelp-button', otherProps.UNSAFE_className)}
+        isQuiet>
         {icon}
       </ActionButton>
       <SlotProvider slots={slots}>
-        <Dialog UNSAFE_className={helpStyles['react-spectrum-ContextualHelp-dialog']}>
+        <Dialog UNSAFE_className={classNames(helpStyles, 'react-spectrum-ContextualHelp-dialog')}>
           {children}
         </Dialog>
       </SlotProvider>
diff --git a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx
index 559b3226e70..9b86e18382b 100644
--- a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx
+++ b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx
@@ -10,58 +10,118 @@
  * governing permissions and limitations under the License.
  */
 
-import {action} from '@storybook/addon-actions';
 import {Button, Content, Flex, Footer, Heading, Link, Text} from '@adobe/react-spectrum';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {ContextualHelp} from '../src';
 import React from 'react';
-import {storiesOf} from '@storybook/react';
 
-storiesOf('ContextualHelp', module)
-.add(
-  'default',
-  () => render({heading: 'Help title', description: helpText()})
-)
-.add(
-  'type: info',
-  () => render({heading: 'Help title', description: helpText(), variant: 'info'})
-)
-.add(
-  'with link',
-  () => render({heading: 'Help title', description: helpText(), link: <Link>Learn more</Link>})
-)
-.add(
-  'with button',
-  () => (<Flex alignItems="center">
-    <Button variant="primary" isDisabled>Create</Button>
-    <ContextualHelp marginStart="size-100">
-      <Heading>Help title</Heading>
-      <Content>{helpText()}</Content>
-    </ContextualHelp>
-  </Flex>)
-)
-.add(
-  'trigger events',
-  () => render({heading: 'Help title', description: helpText(), onOpenChange: action('open change')})
-)
-.add(
-  'placement: bottom',
-  () => render({heading: 'Help title', description: helpText(), placement: 'bottom'})
-)
-.add(
-  'placement: bottom start',
-  () => render({heading: 'Help title', description: helpText(), placement: 'bottom start'})
-);
+export default {
+  title: 'ContextualHelp',
+  component: ContextualHelp,
+  argTypes: {
+    onOpenChange: {
+      action: 'openChange',
+      table: {disable: true}
+    },
+    placement: {
+      control: 'select',
+      defaultValue: 'bottom',
+      options: [
+        'bottom', 'bottom left', 'bottom right', 'bottom start', 'bottom end',
+        'top', 'top left', 'top right', 'top start', 'top end',
+        'left', 'left top', 'left bottom',
+        'start', 'start top', 'start bottom',
+        'right', 'right top', 'right bottom',
+        'end', 'end top', 'end bottom'
+      ]
+    },
+    variant: {
+      control: 'select',
+      defaultValue: 'help',
+      options: ['help', 'info']
+    },
+    offset: {
+      control: 'number',
+      defaultValue: 0,
+      min: -500,
+      max: 500
+    },
+    crossOffset: {
+      control: 'number',
+      defaultValue: 0,
+      min: -500,
+      max: 500
+    },
+    containerPadding: {
+      control: 'number',
+      defaultValue: 0,
+      min: -500,
+      max: 500
+    },
+    shouldFlip: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    children: {
+      table: {disable: true}
+    }
+  }
+} as ComponentMeta<typeof ContextualHelp>;
+
+export type ContextualHelpStory = ComponentStoryObj<typeof ContextualHelp>;
 
 const helpText = () => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem.</Text>;
 
-function render(props: any = {}) {
-  let {heading, description, link, ...otherProps} = props;
+export const Default: ContextualHelpStory = {
+  args: {
+    children: (
+      <>
+        <Heading>Help title</Heading>
+        <Content>{helpText()}</Content>
+      </>
+    )
+  }
+};
+
+export const WithLink: ContextualHelpStory = {
+  args: {
+    children: (
+      <>
+        <Heading>Help title</Heading>
+        <Content>{helpText()}</Content>
+        <Footer><Link>Learn more</Link></Footer>
+      </>
+    )
+  },
+  name: 'with link'
+};
+
+export const WithButton: ContextualHelpStory = {
+  args: {
+    marginStart: 'size-100'
+  },
+  render: (args) => (
+    <Flex alignItems="center">
+      <Button variant="primary" isDisabled>Create</Button>
+      <ContextualHelp {...args} UNSAFE_className="foo">
+        <Heading>Help title</Heading>
+        <Content>{helpText()}</Content>
+      </ContextualHelp>
+    </Flex>
+  ),
+  name: 'with button',
+  parameters: {description: {data: 'Custom classname foo is on the contextual help button.'}}
+};
 
-  return (
-    <ContextualHelp {...otherProps}>
-      {heading && <Heading>{heading}</Heading>}
-      {description && <Content>{description}</Content>}
-      {link && <Footer>{link}</Footer>}
-    </ContextualHelp>
-  );
-}
+export const AriaLabelledyBy: ContextualHelpStory = {
+  render: (args) => (
+    <Flex alignItems="center">
+      <div id="foo">I label the contextual help button</div>
+      <ContextualHelp {...args} aria-labelledby="foo">
+        <Heading>Help title</Heading>
+        <Content>{helpText()}</Content>
+      </ContextualHelp>
+    </Flex>
+  ),
+  name: 'aria-labelledyby'
+};