diff --git a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.story.tsx b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.story.tsx
index 040d1f3584b..4c92e79a7fa 100644
--- a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.story.tsx
+++ b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.story.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import { PluginSignatureBadge } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { PluginSignatureStatus } from '@grafana/data';
@@ -8,25 +8,25 @@ export default {
   title: 'Data Display/PluginSignatureBadge',
   decorators: [withCenteredStory],
   component: PluginSignatureBadge,
-};
-
-const getKnobs = () => {
-  return {
-    status: select(
-      'status',
-      [
+  argTypes: {
+    status: {
+      control: {
+        type: 'select',
+      },
+      options: [
         PluginSignatureStatus.missing,
         PluginSignatureStatus.invalid,
         PluginSignatureStatus.modified,
         PluginSignatureStatus.valid,
         PluginSignatureStatus.internal,
       ],
-      PluginSignatureStatus.valid
-    ),
-  };
+    },
+  },
 };
 
-export const basic = () => {
-  const { status } = getKnobs();
-  return <PluginSignatureBadge status={status} />;
+export const Basic: Story = (args) => {
+  return <PluginSignatureBadge status={args.status} />;
+};
+Basic.args = {
+  status: PluginSignatureStatus.valid,
 };