diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.mdx b/packages/grafana-ui/src/components/Pagination/Pagination.mdx
index 726ca63a354..aa4f92bf277 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.mdx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.mdx
@@ -1,8 +1,21 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import { Pagination } from './Pagination';
 
-# Pagination
-
 <Meta title="MDX|Pagination" component={Pagination} />
 
-<Props of={Pagination}/>
\ No newline at end of file
+# Pagination
+Component used for rendering a page selector below paginated content.
+
+### Usage
+
+```tsx
+<div>
+  <div>
+    Page 1 content
+  </div>
+  <Pagination currentPage={1} numberOfPages={5} onNavigate={() => fetchPage(2)} />
+</div>
+```
+
+
+<Props of={Pagination} />
diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
index 3532210b0c3..febdb843334 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
@@ -4,8 +4,11 @@ import { stylesFactory } from '../../themes';
 import { Button, ButtonVariant } from '../Button';
 
 interface Props {
+  /** The current page index being shown.  */
   currentPage: number;
+  /** Number of total pages.  */
   numberOfPages: number;
+  /** Callback function for fetching the selected page  */
   onNavigate: (toPage: number) => void;
 }