diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx
index 9849450b63a..2ff6f650f12 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx
+++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx
@@ -1,20 +1,23 @@
 import React from 'react';
-import { withKnobs, text, boolean, object, select } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ButtonCascader } from '@grafana/ui';
+import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
+import { ButtonCascaderProps } from './ButtonCascader';
 
 export default {
   title: 'Forms/Cascader/ButtonCascader',
   component: ButtonCascader,
-  decorators: [withKnobs, withCenteredStory],
-};
-
-const getKnobs = () => {
-  return {
-    disabled: boolean('Disabled', false),
-    text: text('Button Text', 'Click me!'),
-    icon: select('Icon', ['plus', 'minus', 'table'], 'plus'),
-    options: object('Options', [
+  decorators: [withCenteredStory],
+  parameters: {
+    knobs: {
+      disabled: true,
+    },
+  },
+  args: {
+    disabled: false,
+    children: 'Click me!',
+    options: [
       {
         label: 'A',
         value: 'A',
@@ -24,24 +27,24 @@ const getKnobs = () => {
         ],
       },
       { label: 'D', value: 'D' },
-    ]),
-  };
+    ],
+  },
+  argTypes: {
+    icon: { control: { type: 'select', options: ['plus', 'minus', 'table'] } },
+    options: { control: 'object' },
+    className: NOOP_CONTROL,
+    value: NOOP_CONTROL,
+    fieldNames: NOOP_CONTROL,
+  },
 };
 
-export const simple = () => {
-  const { disabled, text, options } = getKnobs();
-  return (
-    <ButtonCascader disabled={disabled} options={options} value={['A']}>
-      {text}
-    </ButtonCascader>
-  );
+const Template: Story<ButtonCascaderProps> = ({ children, ...args }) => {
+  return <ButtonCascader {...args}>{children}</ButtonCascader>;
 };
 
-export const withIcon = () => {
-  const { disabled, text, options, icon } = getKnobs();
-  return (
-    <ButtonCascader disabled={disabled} options={options} value={['A']} icon={icon}>
-      {text}
-    </ButtonCascader>
-  );
+export const simple = Template.bind({});
+
+export const withIcon = Template.bind({});
+withIcon.args = {
+  icon: 'plus',
 };