diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 655102a2ea9..e1ebcfa1c06 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -110,6 +110,7 @@
     "@storybook/addons": "6.4.21",
     "@storybook/api": "6.4.21",
     "@storybook/builder-webpack5": "6.4.21",
+    "@storybook/client-api": "6.4.21",
     "@storybook/components": "6.4.21",
     "@storybook/core-events": "6.4.21",
     "@storybook/manager-webpack5": "6.4.21",
diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.mdx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.mdx
new file mode 100644
index 00000000000..9e7c33675e0
--- /dev/null
+++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.mdx
@@ -0,0 +1,19 @@
+import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
+import { RefreshPicker } from './RefreshPicker';
+
+<Meta title="MDX|RefreshPicker" component={RefreshPicker} />
+
+# Refresh Picker
+
+This component is used on dashboards to refresh visualizations. Grafana does not do this automatically, queries run on their own schedule according to the panel settings. Grafana cancels any pending requests when a new refresh is triggered.
+
+**The refresh icon:** will immediately run the query and refresh the visualizations.
+
+**The down arrow:** will display a list of refresh intervals. If one of them is selected the dashboard will regularly refresh according to that schedule.
+
+<Preview>
+  <RefreshPicker tooltip="Run query" />
+  <RefreshPicker text="Run query" tooltip="Run query" />
+  <RefreshPicker text="Run query" isLoading={true} tooltip="Run query" value="1h" />
+</Preview>
+<Props of={RefreshPicker} />
diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx
index 1ec9a5bafb3..da309c0a0ef 100644
--- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx
+++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx
@@ -1,24 +1,45 @@
 import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/client-api';
+import { Story } from '@storybook/react';
 import React from 'react';
 
 import { RefreshPicker } from '@grafana/ui';
 
-import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { StoryExample } from '../../utils/storybook/StoryExample';
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { HorizontalGroup } from '../Layout/Layout';
+
+import { Props } from './RefreshPicker';
+import mdx from './RefreshPicker.mdx';
 
 export default {
   title: 'Pickers and Editors/RefreshPicker',
   component: RefreshPicker,
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+    controls: {
+      sort: 'alpha',
+    },
+  },
+  args: {
+    isLoading: false,
+    isLive: false,
+    width: 'auto',
+    text: 'Run query',
+    tooltip: 'My tooltip text goes here',
+    value: '1h',
+    primary: false,
+    noIntervalPicker: false,
+    intervals: ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'],
+  },
 };
 
-export const Examples = () => {
-  const intervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];
+export const Examples: Story<Props> = (args) => {
+  const [, updateArgs] = useArgs();
   const onIntervalChanged = (interval: string) => {
     action('onIntervalChanged fired')(interval);
+    updateArgs({ value: interval });
   };
 
   const onRefresh = () => {
@@ -26,45 +47,17 @@ export const Examples = () => {
   };
 
   return (
-    <DashboardStoryCanvas>
-      <UseState initialState={'1h'}>
-        {(value, updateValue) => {
-          return (
-            <HorizontalGroup>
-              <StoryExample name="Simple">
-                <RefreshPicker
-                  tooltip="Hello world"
-                  value={value}
-                  intervals={intervals}
-                  onIntervalChanged={onIntervalChanged}
-                  onRefresh={onRefresh}
-                />
-              </StoryExample>
-              <StoryExample name="With text">
-                <RefreshPicker
-                  tooltip="Hello world"
-                  value={value}
-                  text="Run query"
-                  intervals={intervals}
-                  onIntervalChanged={onIntervalChanged}
-                  onRefresh={onRefresh}
-                />
-              </StoryExample>
-              <StoryExample name="With text and loading">
-                <RefreshPicker
-                  tooltip="Hello world"
-                  value={value}
-                  text="Run query"
-                  isLoading={true}
-                  intervals={intervals}
-                  onIntervalChanged={onIntervalChanged}
-                  onRefresh={onRefresh}
-                />
-              </StoryExample>
-            </HorizontalGroup>
-          );
-        }}
-      </UseState>
-    </DashboardStoryCanvas>
+    <RefreshPicker
+      tooltip={args.tooltip}
+      value={args.value}
+      text={args.text}
+      isLoading={args.isLoading}
+      intervals={args.intervals}
+      width={args.width}
+      onIntervalChanged={onIntervalChanged}
+      onRefresh={onRefresh}
+      noIntervalPicker={args.noIntervalPicker}
+      primary={args.primary}
+    />
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 9dc73ae3d45..f440dd83eab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5034,6 +5034,7 @@ __metadata:
     "@storybook/addons": 6.4.21
     "@storybook/api": 6.4.21
     "@storybook/builder-webpack5": 6.4.21
+    "@storybook/client-api": 6.4.21
     "@storybook/components": 6.4.21
     "@storybook/core-events": 6.4.21
     "@storybook/manager-webpack5": 6.4.21