diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.mdx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.mdx
new file mode 100644
index 00000000000..8bed9f4cd6d
--- /dev/null
+++ b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.mdx
@@ -0,0 +1,21 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { ClipboardButton } from './ClipboardButton';
+
+<Meta title="MDX|ClipboardButton" component={ClipboardButton} />
+
+# ClipboardButton
+
+A wrapper for [clipboard.js](https://github.com/zenorocha/clipboard.js) library that allows copying text to clipboard. The text to be copied should be provided via `getText` prop.
+
+# Usage
+
+```jsx
+<ClipboardButton
+  variant="secondary"
+  getText={() => 'Text to be copied'}
+  onClipboardCopy={() => console.log('text copied')}
+>
+  Copy to clipboard
+</ClipboardButton>
+````
+<Props of={ClipboardButton}/>
diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx
index f37b6a4a158..1a47f52be38 100644
--- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx
+++ b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-
+import { text } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ClipboardButton } from './ClipboardButton';
 import { Input } from '../Forms/Legacy/Input/Input';
-import { text } from '@storybook/addon-knobs';
+import mdx from './ClipboardButton.mdx';
 
 const getKnobs = () => {
   return {
@@ -38,6 +38,11 @@ export default {
   title: 'Buttons/ClipboardButton',
   component: ClipboardButton,
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const copyToClipboard = () => <Wrapper />;
diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
index 33118fb34d7..52e8d105c0e 100644
--- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
+++ b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
@@ -2,17 +2,18 @@ import React, { PureComponent } from 'react';
 import Clipboard from 'clipboard';
 import { Button, ButtonProps } from '../Button';
 
-interface Props extends ButtonProps {
+export interface Props extends ButtonProps {
+  /** A function that returns text to be copied */
   getText(): string;
+  /** Callback when the text has been successfully copied */
   onClipboardCopy?(e: Clipboard.Event): void;
+  /** Callback when there was an error copying the text */
   onClipboardError?(e: Clipboard.Event): void;
 }
 
 export class ClipboardButton extends PureComponent<Props> {
-  // @ts-ignore
-  private clipboard: Clipboard;
-  // @ts-ignore
-  private elem: HTMLButtonElement;
+  private clipboard!: Clipboard;
+  private elem!: HTMLButtonElement;
 
   setRef = (elem: HTMLButtonElement) => {
     this.elem = elem;