Docs: Pagination component (#28143)

* Add basic docs for pagination component

* Update packages/grafana-ui/src/components/Pagination/Pagination.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update packages/grafana-ui/src/components/Pagination/Pagination.mdx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

packages/grafana-ui/src/components/Pagination/Pagination.mdx

 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import { Pagination } from './Pagination';
 
+<Meta title="MDX|Pagination" component={Pagination} />
+
 # 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>
+```
 
-<Meta title="MDX|Pagination" component={Pagination} />
 
-<Props of={Pagination}/>
\ No newline at end of file
+<Props of={Pagination} />

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;
 }