diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.mdx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.mdx
new file mode 100644
index 00000000000..e0ac489850e
--- /dev/null
+++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.mdx
@@ -0,0 +1,10 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { AlphaNotice } from './AlphaNotice';
+
+
+
+# AlphaNotice
+
+Used to indicate plugin state - Alpha, Beta or Deprecated.
+
+
diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.story.tsx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.story.tsx
new file mode 100644
index 00000000000..67b5236ba5a
--- /dev/null
+++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.story.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginState } from '@grafana/data';
+import { AlphaNotice } from './AlphaNotice';
+import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
+import mdx from './AlphaNotice.mdx';
+
+export default {
+ title: 'Overlays/AlphaNotice',
+ component: AlphaNotice,
+ decorators: [withCenteredStory, withHorizontallyCenteredStory],
+ parameters: {
+ docs: {
+ page: mdx,
+ },
+ },
+};
+
+export const basic = () => {
+ return ;
+};
diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
index 1b2fb38c8d5..8f6e35fae93 100644
--- a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
+++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
@@ -4,7 +4,7 @@ import { ThemeContext } from '../../index';
import { PluginState } from '@grafana/data';
import { Icon } from '../Icon/Icon';
-interface Props {
+export interface Props {
state?: PluginState;
text?: string;
className?: string;