diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx b/packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx
index f768eac2099..b4699759b1d 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx
+++ b/packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx
@@ -9,6 +9,8 @@ import { KEY_CODES } from '../../helpers/constants';
 export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes for the container */
   className?: string;
+  /** Flag indicating if the pagination is disabled */
+  isDisabled?: boolean;
   /** The number of the last page */
   lastPage?: number;
   /** The number of first page where pagination starts */
@@ -55,6 +57,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
 
   static defaultProps = {
     className: '',
+    isDisabled: false,
     lastPage: 0,
     firstPage: 0,
     pagesTitle: '',
@@ -102,6 +105,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
   render () {
     const {
       page,
+      isDisabled,
       lastPage,
       firstPage,
       pagesTitle,
@@ -125,7 +129,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
       <nav className={css(styles.paginationNav, className)} aria-label={paginationTitle} {...props}>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === firstPage}
+          isDisabled={isDisabled || page === firstPage}
           aria-label={toFirstPage}
           data-action="first"
           onClick={event => {
@@ -138,7 +142,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
         </Button>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === firstPage}
+          isDisabled={isDisabled || page === firstPage}
           data-action="previous"
           onClick={event => {
             const newPage = page as number - 1 >= 1 ? page as number - 1 : 1;
@@ -155,7 +159,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
             className={css(styles.formControl)}
             aria-label={currPage}
             type="number"
-            disabled={page === firstPage && page === lastPage}
+            disabled={isDisabled || page === firstPage && page === lastPage}
             min={lastPage <= 0 && firstPage <= 0 ? 0 : 1}
             max={lastPage}
             value={userInputPage}
@@ -168,7 +172,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
         </div>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === lastPage}
+          isDisabled={isDisabled || page === lastPage}
           aria-label={toNextPage}
           data-action="next"
           onClick={event => {
@@ -182,7 +186,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
         </Button>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === lastPage}
+          isDisabled={isDisabled || page === lastPage}
           aria-label={toLastPage}
           data-action="last"
           onClick={event => {
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.tsx b/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.tsx
index bc671fdb0c5..904a8c143ea 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.tsx
+++ b/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
-import { css, getModifier } from '@patternfly/react-styles';
+import { css } from '@patternfly/react-styles';
 
 import { fillTemplate } from '../../helpers';
 import { ToggleTemplateProps } from './ToggleTemplate';
@@ -25,6 +25,8 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   onToggle?: (isOpen: boolean) => void,
   /** Flag indicating if the Options Menu dropdown is open or not */
   isOpen?: boolean,
+  /** Flag indicating if the Options Menu is disabled */
+  isDisabled?: boolean,
   /** */
   parentRef?: HTMLElement;
   /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props. */
@@ -41,16 +43,17 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   showToggle = true,
   onToggle = (_isOpen: boolean) => undefined as any,
   isOpen = false,
+  isDisabled = false,
   parentRef = null,
   toggleTemplate: ToggleTemplate = '',
 }:OptionsToggleProps ) => {
   return (
-    <div className={css(styles.optionsMenuToggle, getModifier(styles, 'plain'), getModifier(styles, 'text'))} >
+    <div className={css(styles.optionsMenuToggle, isDisabled && styles.modifiers.disabled, styles.modifiers.plain, styles.modifiers.text)} >
       {showToggle && (
         <DropdownToggle
           aria-label={optionsToggle}
           onToggle={onToggle}
-          isDisabled={itemCount <= 0}
+          isDisabled={isDisabled || itemCount <= 0}
           isOpen={isOpen}
           id={`${widgetId}-toggle`}
           className={styles.optionsMenuToggleButton}
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.md b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.md
index f241f6497b5..8cc1cbeed3f 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.md
+++ b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.md
@@ -87,6 +87,48 @@ class PaginationBottom extends React.Component {
 }
 ```
 
+## Pagination disabled
+```js
+import React from 'react';
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+
+class PaginationDisabled extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      perPage: 20
+    };
+
+    this.onSetPage = (_event, pageNumber) => {
+      this.setState({
+        page: pageNumber
+      });
+    };
+
+    this.onPerPageSelect = (_event, perPage) => {
+      this.setState({
+        perPage
+      });
+    };
+  }
+
+  render() {
+    return (
+      <Pagination
+        itemCount={523}
+        perPage={this.state.perPage}
+        page={this.state.page}
+        onSetPage={this.onSetPage}
+        widgetId="pagination-options-menu-top"
+        onPerPageSelect={this.onPerPageSelect}
+        isDisabled
+      />
+    );
+  }
+}
+```
+
 ## No items
 ```js
 import React from 'react';
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.tsx
similarity index 98%
rename from packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js
rename to packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.tsx
index ea6aa34fd77..9cc42c7706c 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js
+++ b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.tsx
@@ -13,6 +13,11 @@ describe('component render', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('should render correctly disabled', () => {
+    const wrapper = mount(<Pagination itemCount={20} isDisabled />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   test('limited number of pages', () => {
     const wrapper = mount(<Pagination itemCount={20} perPage={20} />);
     expect(wrapper).toMatchSnapshot();
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx
index 8c8e83cc5f7..a904c5faa21 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx
@@ -60,6 +60,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement> {
   itemCount: number;
   /** Position where pagination is rendered. */
   variant?: 'top' | 'bottom' | 'left' | 'right';
+  /** Flag indicating if pagination is disabled */
+  isDisabled?: boolean;
   /** Number of items per page. */
   perPage?: number;
   /** Select from options to number of items per page. */
@@ -100,6 +102,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   children = null,
   className = '',
   variant = PaginationVariant.top,
+  isDisabled = false,
   perPage = defaultPerPageOptions[0].value,
   titles = {
     items: 'items',
@@ -170,6 +173,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         dropDirection={dropDirection}
         widgetId={widgetId}
         toggleTemplate={toggleTemplate}
+        isDisabled={isDisabled}
       />
       <Navigation
         pagesTitle={titles.page}
@@ -188,6 +192,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         onNextClick={onNextClick}
         onLastClick={onLastClick}
         onPageInput={onPageInput}
+        isDisabled={isDisabled}
       />
       {children}
     </div>
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
index 6700f8b727d..15903964877 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
+++ b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -13,6 +13,8 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   className?: string;
   /** Id added to the title of the Pagination Options Menu */
   widgetId?: string;
+  /** Flag indicating if Pagination Options Menu is disabled */
+  isDisabled?: boolean;
   /** Menu will open up or open down from the Options menu toggle */
   dropDirection?: 'up' | 'down';
   /** Array of titles and values which will be the options on the Options Menu dropdown */
@@ -48,6 +50,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
   static defaultProps = {
    className: '',
    widgetId: '',
+   isDisabled: false,
    dropDirection: DropdownDirection.down,
    perPageOptions: [] as PerPageOptions[],
    itemsPerPageTitle: 'Items per page',
@@ -109,7 +112,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
   };
 
   render() {
-    const { className, widgetId, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle } = this.props;
+    const { className, widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle } = this.props;
     const { isOpen } = this.state;
 
     return (
@@ -137,6 +140,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
               itemsTitle={itemsTitle}
               toggleTemplate={toggleTemplate}
               parentRef={this.parentRef.current}
+              isDisabled={isDisabled}
             />
           }
           dropdownItems={this.renderItems()}
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
similarity index 91%
rename from packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap
rename to packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
index 4a50bc2bb20..9c38b2f8044 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`component render custom pagination toggle 1`] = `
       className=""
       dropDirection="down"
       firstIndex={1}
+      isDisabled={false}
       itemCount={40}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
@@ -133,6 +134,7 @@ exports[`component render custom pagination toggle 1`] = `
           toggle={
             <Unknown
               firstIndex={1}
+              isDisabled={false}
               isOpen={false}
               itemCount={40}
               itemsTitle="items"
@@ -223,6 +225,7 @@ exports[`component render custom pagination toggle 1`] = `
             toggle={
               <Unknown
                 firstIndex={1}
+                isDisabled={false}
                 isOpen={false}
                 itemCount={40}
                 itemsTitle="items"
@@ -242,7 +245,8 @@ exports[`component render custom pagination toggle 1`] = `
               <Component
                 ariaHasPopup={true}
                 firstIndex={1}
-                id="pf-toggle-id-10"
+                id="pf-toggle-id-11"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={40}
@@ -469,6 +473,7 @@ exports[`component render custom pagination toggle 1`] = `
       className=""
       currPage="Current page"
       firstPage={1}
+      isDisabled={false}
       lastPage={4}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -720,6 +725,7 @@ exports[`component render custom perPageOptions 1`] = `
       className=""
       dropDirection="down"
       firstIndex={1}
+      isDisabled={false}
       itemCount={40}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
@@ -774,6 +780,7 @@ exports[`component render custom perPageOptions 1`] = `
           toggle={
             <Unknown
               firstIndex={1}
+              isDisabled={false}
               isOpen={false}
               itemCount={40}
               itemsTitle="items"
@@ -815,6 +822,7 @@ exports[`component render custom perPageOptions 1`] = `
             toggle={
               <Unknown
                 firstIndex={1}
+                isDisabled={false}
                 isOpen={false}
                 itemCount={40}
                 itemsTitle="items"
@@ -834,7 +842,8 @@ exports[`component render custom perPageOptions 1`] = `
               <Component
                 ariaHasPopup={true}
                 firstIndex={1}
-                id="pf-toggle-id-5"
+                id="pf-toggle-id-6"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={40}
@@ -1112,6 +1121,7 @@ exports[`component render custom perPageOptions 1`] = `
       className=""
       currPage="Current page"
       firstPage={1}
+      isDisabled={false}
       lastPage={4}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -1357,6 +1367,7 @@ exports[`component render custom start end 1`] = `
       className=""
       dropDirection="down"
       firstIndex={5}
+      isDisabled={false}
       itemCount={40}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
@@ -1472,6 +1483,7 @@ exports[`component render custom start end 1`] = `
           toggle={
             <Unknown
               firstIndex={5}
+              isDisabled={false}
               isOpen={false}
               itemCount={40}
               itemsTitle="items"
@@ -1562,6 +1574,7 @@ exports[`component render custom start end 1`] = `
             toggle={
               <Unknown
                 firstIndex={5}
+                isDisabled={false}
                 isOpen={false}
                 itemCount={40}
                 itemsTitle="items"
@@ -1581,7 +1594,8 @@ exports[`component render custom start end 1`] = `
               <Component
                 ariaHasPopup={true}
                 firstIndex={5}
-                id="pf-toggle-id-8"
+                id="pf-toggle-id-9"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={40}
@@ -1859,6 +1873,7 @@ exports[`component render custom start end 1`] = `
       className=""
       currPage="Current page"
       firstPage={5}
+      isDisabled={false}
       lastPage={4}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -2103,6 +2118,7 @@ exports[`component render empty per page options 1`] = `
       className=""
       dropDirection="down"
       firstIndex={1}
+      isDisabled={false}
       itemCount={40}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
@@ -2134,6 +2150,7 @@ exports[`component render empty per page options 1`] = `
           toggle={
             <Unknown
               firstIndex={1}
+              isDisabled={false}
               isOpen={false}
               itemCount={40}
               itemsTitle="items"
@@ -2159,6 +2176,7 @@ exports[`component render empty per page options 1`] = `
             toggle={
               <Unknown
                 firstIndex={1}
+                isDisabled={false}
                 isOpen={false}
                 itemCount={40}
                 itemsTitle="items"
@@ -2178,7 +2196,8 @@ exports[`component render empty per page options 1`] = `
               <Component
                 ariaHasPopup={false}
                 firstIndex={1}
-                id="pf-toggle-id-6"
+                id="pf-toggle-id-7"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={40}
@@ -2216,6 +2235,7 @@ exports[`component render empty per page options 1`] = `
       className=""
       currPage="Current page"
       firstPage={1}
+      isDisabled={false}
       lastPage={4}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -2461,6 +2481,7 @@ exports[`component render last page 1`] = `
       className=""
       dropDirection="down"
       firstIndex={11}
+      isDisabled={false}
       itemCount={20}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
@@ -2576,6 +2597,7 @@ exports[`component render last page 1`] = `
           toggle={
             <Unknown
               firstIndex={11}
+              isDisabled={false}
               isOpen={false}
               itemCount={20}
               itemsTitle="items"
@@ -2666,6 +2688,7 @@ exports[`component render last page 1`] = `
             toggle={
               <Unknown
                 firstIndex={11}
+                isDisabled={false}
                 isOpen={false}
                 itemCount={20}
                 itemsTitle="items"
@@ -2685,7 +2708,8 @@ exports[`component render last page 1`] = `
               <Component
                 ariaHasPopup={true}
                 firstIndex={11}
-                id="pf-toggle-id-4"
+                id="pf-toggle-id-5"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={20}
@@ -2963,6 +2987,7 @@ exports[`component render last page 1`] = `
       className=""
       currPage="Current page"
       firstPage={11}
+      isDisabled={false}
       lastPage={2}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -3207,6 +3232,7 @@ exports[`component render limited number of pages 1`] = `
       className=""
       dropDirection="down"
       firstIndex={1}
+      isDisabled={false}
       itemCount={20}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
@@ -3322,6 +3348,7 @@ exports[`component render limited number of pages 1`] = `
           toggle={
             <Unknown
               firstIndex={1}
+              isDisabled={false}
               isOpen={false}
               itemCount={20}
               itemsTitle="items"
@@ -3412,6 +3439,7 @@ exports[`component render limited number of pages 1`] = `
             toggle={
               <Unknown
                 firstIndex={1}
+                isDisabled={false}
                 isOpen={false}
                 itemCount={20}
                 itemsTitle="items"
@@ -3431,7 +3459,8 @@ exports[`component render limited number of pages 1`] = `
               <Component
                 ariaHasPopup={true}
                 firstIndex={1}
-                id="pf-toggle-id-2"
+                id="pf-toggle-id-3"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={20}
@@ -3709,6 +3738,7 @@ exports[`component render limited number of pages 1`] = `
       className=""
       currPage="Current page"
       firstPage={1}
+      isDisabled={false}
       lastPage={1}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -3952,6 +3982,7 @@ exports[`component render no items 1`] = `
       className=""
       dropDirection="down"
       firstIndex={0}
+      isDisabled={false}
       itemCount={0}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
@@ -4067,6 +4098,7 @@ exports[`component render no items 1`] = `
           toggle={
             <Unknown
               firstIndex={0}
+              isDisabled={false}
               isOpen={false}
               itemCount={0}
               itemsTitle="items"
@@ -4157,6 +4189,7 @@ exports[`component render no items 1`] = `
             toggle={
               <Unknown
                 firstIndex={0}
+                isDisabled={false}
                 isOpen={false}
                 itemCount={0}
                 itemsTitle="items"
@@ -4176,7 +4209,8 @@ exports[`component render no items 1`] = `
               <Component
                 ariaHasPopup={true}
                 firstIndex={0}
-                id="pf-toggle-id-7"
+                id="pf-toggle-id-8"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={0}
@@ -4457,6 +4491,7 @@ exports[`component render no items 1`] = `
       className=""
       currPage="Current page"
       firstPage={0}
+      isDisabled={false}
       lastPage={0}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -4696,6 +4731,7 @@ exports[`component render should render correctly bottom 1`] = `
       className=""
       dropDirection="down"
       firstIndex={1}
+      isDisabled={false}
       itemCount={20}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
@@ -4811,6 +4847,7 @@ exports[`component render should render correctly bottom 1`] = `
           toggle={
             <Unknown
               firstIndex={1}
+              isDisabled={false}
               isOpen={false}
               itemCount={20}
               itemsTitle="items"
@@ -4901,6 +4938,7 @@ exports[`component render should render correctly bottom 1`] = `
             toggle={
               <Unknown
                 firstIndex={1}
+                isDisabled={false}
                 isOpen={false}
                 itemCount={20}
                 itemsTitle="items"
@@ -4921,6 +4959,7 @@ exports[`component render should render correctly bottom 1`] = `
                 ariaHasPopup={true}
                 firstIndex={1}
                 id="pf-toggle-id-1"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={20}
@@ -5198,6 +5237,7 @@ exports[`component render should render correctly bottom 1`] = `
       className=""
       currPage="Current page"
       firstPage={1}
+      isDisabled={false}
       lastPage={2}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -5424,8 +5464,9 @@ exports[`component render should render correctly bottom 1`] = `
 </Component>
 `;
 
-exports[`component render should render correctly top 1`] = `
+exports[`component render should render correctly disabled 1`] = `
 <Component
+  isDisabled={true}
   itemCount={20}
 >
   <div
@@ -5441,6 +5482,7 @@ exports[`component render should render correctly top 1`] = `
       className=""
       dropDirection="down"
       firstIndex={1}
+      isDisabled={true}
       itemCount={20}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
@@ -5556,6 +5598,7 @@ exports[`component render should render correctly top 1`] = `
           toggle={
             <Unknown
               firstIndex={1}
+              isDisabled={true}
               isOpen={false}
               itemCount={20}
               itemsTitle="items"
@@ -5646,6 +5689,7 @@ exports[`component render should render correctly top 1`] = `
             toggle={
               <Unknown
                 firstIndex={1}
+                isDisabled={true}
                 isOpen={false}
                 itemCount={20}
                 itemsTitle="items"
@@ -5665,7 +5709,8 @@ exports[`component render should render correctly top 1`] = `
               <Component
                 ariaHasPopup={true}
                 firstIndex={1}
-                id="pf-toggle-id-0"
+                id="pf-toggle-id-2"
+                isDisabled={true}
                 isOpen={false}
                 isPlain={true}
                 itemCount={20}
@@ -5681,11 +5726,12 @@ exports[`component render should render correctly top 1`] = `
                       class="pf-c-dropdown"
                     >
                       <div
-                        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                        class="pf-c-options-menu__toggle pf-m-disabled pf-m-plain pf-m-text"
                       >
                         <button
                           aria-expanded="false"
-                          class="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
+                          class="pf-c-dropdown__toggle pf-m-disabled pf-c-options-menu__toggle-button"
+                          disabled=""
                           id="pagination-options-menu-toggle"
                           type="button"
                         >
@@ -5734,13 +5780,13 @@ exports[`component render should render correctly top 1`] = `
                 widgetId="pagination-options-menu"
               >
                 <div
-                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                  className="pf-c-options-menu__toggle pf-m-disabled pf-m-plain pf-m-text"
                 >
                   <Component
                     aria-label="Select"
                     className="pf-c-options-menu__toggle-button"
                     id="pagination-options-menu-toggle"
-                    isDisabled={false}
+                    isDisabled={true}
                     isOpen={false}
                     onToggle={[Function]}
                     parentRef={
@@ -5749,11 +5795,12 @@ exports[`component render should render correctly top 1`] = `
                           class="pf-c-dropdown"
                         >
                           <div
-                            class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                            class="pf-c-options-menu__toggle pf-m-disabled pf-m-plain pf-m-text"
                           >
                             <button
                               aria-expanded="false"
-                              class="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
+                              class="pf-c-dropdown__toggle pf-m-disabled pf-c-options-menu__toggle-button"
+                              disabled=""
                               id="pagination-options-menu-toggle"
                               type="button"
                             >
@@ -5802,7 +5849,7 @@ exports[`component render should render correctly top 1`] = `
                       className="pf-c-options-menu__toggle-button"
                       id="pagination-options-menu-toggle"
                       isActive={false}
-                      isDisabled={false}
+                      isDisabled={true}
                       isFocused={false}
                       isHovered={false}
                       isOpen={false}
@@ -5816,11 +5863,12 @@ exports[`component render should render correctly top 1`] = `
                             class="pf-c-dropdown"
                           >
                             <div
-                              class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                              class="pf-c-options-menu__toggle pf-m-disabled pf-m-plain pf-m-text"
                             >
                               <button
                                 aria-expanded="false"
-                                class="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
+                                class="pf-c-dropdown__toggle pf-m-disabled pf-c-options-menu__toggle-button"
+                                disabled=""
                                 id="pagination-options-menu-toggle"
                                 type="button"
                               >
@@ -5867,8 +5915,8 @@ exports[`component render should render correctly top 1`] = `
                     >
                       <button
                         aria-expanded={false}
-                        className="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
-                        disabled={false}
+                        className="pf-c-dropdown__toggle pf-m-disabled pf-c-options-menu__toggle-button"
+                        disabled={true}
                         id="pagination-options-menu-toggle"
                         onClick={[Function]}
                         onKeyDown={[Function]}
@@ -5943,6 +5991,7 @@ exports[`component render should render correctly top 1`] = `
       className=""
       currPage="Current page"
       firstPage={1}
+      isDisabled={true}
       lastPage={2}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -6058,7 +6107,7 @@ exports[`component render should render correctly top 1`] = `
           <input
             aria-label="Current page"
             className="pf-c-form-control"
-            disabled={false}
+            disabled={true}
             max={2}
             min={1}
             onChange={[Function]}
@@ -6076,16 +6125,16 @@ exports[`component render should render correctly top 1`] = `
         <Component
           aria-label="Go to next page"
           data-action="next"
-          isDisabled={false}
+          isDisabled={true}
           onClick={[Function]}
           variant="plain"
         >
           <button
             aria-disabled={null}
             aria-label="Go to next page"
-            className="pf-c-button pf-m-plain"
+            className="pf-c-button pf-m-plain pf-m-disabled"
             data-action="next"
-            disabled={false}
+            disabled={true}
             onClick={[Function]}
             tabIndex={null}
             type="button"
@@ -6121,16 +6170,16 @@ exports[`component render should render correctly top 1`] = `
         <Component
           aria-label="Go to last page"
           data-action="last"
-          isDisabled={false}
+          isDisabled={true}
           onClick={[Function]}
           variant="plain"
         >
           <button
             aria-disabled={null}
             aria-label="Go to last page"
-            className="pf-c-button pf-m-plain"
+            className="pf-c-button pf-m-plain pf-m-disabled"
             data-action="last"
-            disabled={false}
+            disabled={true}
             onClick={[Function]}
             tabIndex={null}
             type="button"
@@ -6169,15 +6218,9 @@ exports[`component render should render correctly top 1`] = `
 </Component>
 `;
 
-exports[`component render titles 1`] = `
+exports[`component render should render correctly top 1`] = `
 <Component
-  itemCount={40}
-  titles={
-    Object {
-      "items": "values",
-      "pages": "books",
-    }
-  }
+  itemCount={20}
 >
   <div
     className="pf-c-pagination"
@@ -6186,15 +6229,16 @@ exports[`component render titles 1`] = `
     <div
       className="pf-c-pagination__total-items"
     >
-      40 values
+      20 items
     </div>
     <PaginationOptionsMenu
       className=""
       dropDirection="down"
       firstIndex={1}
-      itemCount={40}
+      isDisabled={false}
+      itemCount={20}
       itemsPerPageTitle="Items per page"
-      itemsTitle="values"
+      itemsTitle="items"
       lastIndex={10}
       onPerPageSelect={[Function]}
       optionsToggle="Select"
@@ -6307,9 +6351,10 @@ exports[`component render titles 1`] = `
           toggle={
             <Unknown
               firstIndex={1}
+              isDisabled={false}
               isOpen={false}
-              itemCount={40}
-              itemsTitle="values"
+              itemCount={20}
+              itemsTitle="items"
               lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
@@ -6397,9 +6442,10 @@ exports[`component render titles 1`] = `
             toggle={
               <Unknown
                 firstIndex={1}
+                isDisabled={false}
                 isOpen={false}
-                itemCount={40}
-                itemsTitle="values"
+                itemCount={20}
+                itemsTitle="items"
                 lastIndex={10}
                 onToggle={[Function]}
                 optionsToggle="Select"
@@ -6416,11 +6462,12 @@ exports[`component render titles 1`] = `
               <Component
                 ariaHasPopup={true}
                 firstIndex={1}
-                id="pf-toggle-id-9"
+                id="pf-toggle-id-0"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
-                itemCount={40}
-                itemsTitle="values"
+                itemCount={20}
+                itemsTitle="items"
                 key=".0"
                 lastIndex={10}
                 onEnter={[Function]}
@@ -6454,10 +6501,10 @@ exports[`component render titles 1`] = `
                                
                               of 
                               <strong>
-                                40
+                                20
                               </strong>
                                
-                              values
+                              items
                             </span>
                           </span>
                           <svg
@@ -6522,10 +6569,10 @@ exports[`component render titles 1`] = `
                                    
                                   of 
                                   <strong>
-                                    40
+                                    20
                                   </strong>
                                    
-                                  values
+                                  items
                                 </span>
                               </span>
                               <svg
@@ -6589,10 +6636,10 @@ exports[`component render titles 1`] = `
                                      
                                     of 
                                     <strong>
-                                      40
+                                      20
                                     </strong>
                                      
-                                    values
+                                    items
                                   </span>
                                 </span>
                                 <svg
@@ -6633,8 +6680,8 @@ exports[`component render titles 1`] = `
                           >
                             <Component
                               firstIndex={1}
-                              itemCount={40}
-                              itemsTitle="values"
+                              itemCount={20}
+                              itemsTitle="items"
                               lastIndex={10}
                             >
                               <strong>
@@ -6645,10 +6692,10 @@ exports[`component render titles 1`] = `
                                
                               of 
                               <strong>
-                                40
+                                20
                               </strong>
                                
-                              values
+                              items
                             </Component>
                           </span>
                         </span>
@@ -6694,7 +6741,8 @@ exports[`component render titles 1`] = `
       className=""
       currPage="Current page"
       firstPage={1}
-      lastPage={4}
+      isDisabled={false}
+      lastPage={2}
       onFirstClick={[Function]}
       onLastClick={[Function]}
       onNextClick={[Function]}
@@ -6702,7 +6750,7 @@ exports[`component render titles 1`] = `
       onPreviousClick={[Function]}
       onSetPage={[Function]}
       page={1}
-      pagesTitle=""
+      pagesTitle="page"
       paginationTitle="Pagination"
       toFirstPage="Go to first page"
       toLastPage="Go to last page"
@@ -6810,7 +6858,7 @@ exports[`component render titles 1`] = `
             aria-label="Current page"
             className="pf-c-form-control"
             disabled={false}
-            max={4}
+            max={2}
             min={1}
             onChange={[Function]}
             onKeyDown={[Function]}
@@ -6821,7 +6869,7 @@ exports[`component render titles 1`] = `
             aria-hidden="true"
           >
             of 
-            4 s
+            2 pages
           </span>
         </div>
         <Component
@@ -6920,10 +6968,15 @@ exports[`component render titles 1`] = `
 </Component>
 `;
 
-exports[`component render up drop direction 1`] = `
+exports[`component render titles 1`] = `
 <Component
-  dropDirection="up"
   itemCount={40}
+  titles={
+    Object {
+      "items": "values",
+      "pages": "books",
+    }
+  }
 >
   <div
     className="pf-c-pagination"
@@ -6932,15 +6985,16 @@ exports[`component render up drop direction 1`] = `
     <div
       className="pf-c-pagination__total-items"
     >
-      40 items
+      40 values
     </div>
     <PaginationOptionsMenu
       className=""
-      dropDirection="up"
+      dropDirection="down"
       firstIndex={1}
+      isDisabled={false}
       itemCount={40}
       itemsPerPageTitle="Items per page"
-      itemsTitle="items"
+      itemsTitle="values"
       lastIndex={10}
       onPerPageSelect={[Function]}
       optionsToggle="Select"
@@ -6980,7 +7034,7 @@ exports[`component render up drop direction 1`] = `
           :
         </span>
         <Component
-          direction="up"
+          direction="down"
           dropdownItems={
             Array [
               <Unknown
@@ -7053,9 +7107,10 @@ exports[`component render up drop direction 1`] = `
           toggle={
             <Unknown
               firstIndex={1}
+              isDisabled={false}
               isOpen={false}
               itemCount={40}
-              itemsTitle="items"
+              itemsTitle="values"
               lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
@@ -7068,7 +7123,7 @@ exports[`component render up drop direction 1`] = `
         >
           <DropdownWithContext
             className=""
-            direction="up"
+            direction="down"
             dropdownItems={
               Array [
                 <Unknown
@@ -7143,9 +7198,10 @@ exports[`component render up drop direction 1`] = `
             toggle={
               <Unknown
                 firstIndex={1}
+                isDisabled={false}
                 isOpen={false}
                 itemCount={40}
-                itemsTitle="items"
+                itemsTitle="values"
                 lastIndex={10}
                 onToggle={[Function]}
                 optionsToggle="Select"
@@ -7157,16 +7213,17 @@ exports[`component render up drop direction 1`] = `
             }
           >
             <div
-              className="pf-c-dropdown pf-m-top"
+              className="pf-c-dropdown"
             >
               <Component
                 ariaHasPopup={true}
                 firstIndex={1}
-                id="pf-toggle-id-11"
+                id="pf-toggle-id-10"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={40}
-                itemsTitle="items"
+                itemsTitle="values"
                 key=".0"
                 lastIndex={10}
                 onEnter={[Function]}
@@ -7175,7 +7232,7 @@ exports[`component render up drop direction 1`] = `
                 parentRef={
                   Object {
                     "current": <div
-                      class="pf-c-dropdown pf-m-top"
+                      class="pf-c-dropdown"
                     >
                       <div
                         class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
@@ -7203,7 +7260,7 @@ exports[`component render up drop direction 1`] = `
                                 40
                               </strong>
                                
-                              items
+                              values
                             </span>
                           </span>
                           <svg
@@ -7243,7 +7300,7 @@ exports[`component render up drop direction 1`] = `
                     parentRef={
                       Object {
                         "current": <div
-                          class="pf-c-dropdown pf-m-top"
+                          class="pf-c-dropdown"
                         >
                           <div
                             class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
@@ -7271,7 +7328,7 @@ exports[`component render up drop direction 1`] = `
                                     40
                                   </strong>
                                    
-                                  items
+                                  values
                                 </span>
                               </span>
                               <svg
@@ -7310,7 +7367,7 @@ exports[`component render up drop direction 1`] = `
                       parentRef={
                         Object {
                           "current": <div
-                            class="pf-c-dropdown pf-m-top"
+                            class="pf-c-dropdown"
                           >
                             <div
                               class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
@@ -7338,7 +7395,7 @@ exports[`component render up drop direction 1`] = `
                                       40
                                     </strong>
                                      
-                                    items
+                                    values
                                   </span>
                                 </span>
                                 <svg
@@ -7380,7 +7437,7 @@ exports[`component render up drop direction 1`] = `
                             <Component
                               firstIndex={1}
                               itemCount={40}
-                              itemsTitle="items"
+                              itemsTitle="values"
                               lastIndex={10}
                             >
                               <strong>
@@ -7394,7 +7451,7 @@ exports[`component render up drop direction 1`] = `
                                 40
                               </strong>
                                
-                              items
+                              values
                             </Component>
                           </span>
                         </span>
@@ -7440,6 +7497,7 @@ exports[`component render up drop direction 1`] = `
       className=""
       currPage="Current page"
       firstPage={1}
+      isDisabled={false}
       lastPage={4}
       onFirstClick={[Function]}
       onLastClick={[Function]}
@@ -7448,7 +7506,7 @@ exports[`component render up drop direction 1`] = `
       onPreviousClick={[Function]}
       onSetPage={[Function]}
       page={1}
-      pagesTitle="page"
+      pagesTitle=""
       paginationTitle="Pagination"
       toFirstPage="Go to first page"
       toLastPage="Go to last page"
@@ -7567,7 +7625,7 @@ exports[`component render up drop direction 1`] = `
             aria-hidden="true"
           >
             of 
-            4 pages
+            4 s
           </span>
         </div>
         <Component
@@ -7666,9 +7724,10 @@ exports[`component render up drop direction 1`] = `
 </Component>
 `;
 
-exports[`component render zero results 1`] = `
+exports[`component render up drop direction 1`] = `
 <Component
-  itemCount={0}
+  dropDirection="up"
+  itemCount={40}
 >
   <div
     className="pf-c-pagination"
@@ -7677,16 +7736,17 @@ exports[`component render zero results 1`] = `
     <div
       className="pf-c-pagination__total-items"
     >
-      0 items
+      40 items
     </div>
     <PaginationOptionsMenu
       className=""
-      dropDirection="down"
-      firstIndex={0}
-      itemCount={0}
+      dropDirection="up"
+      firstIndex={1}
+      isDisabled={false}
+      itemCount={40}
       itemsPerPageTitle="Items per page"
       itemsTitle="items"
-      lastIndex={0}
+      lastIndex={10}
       onPerPageSelect={[Function]}
       optionsToggle="Select"
       perPage={10}
@@ -7725,7 +7785,7 @@ exports[`component render zero results 1`] = `
           :
         </span>
         <Component
-          direction="down"
+          direction="up"
           dropdownItems={
             Array [
               <Unknown
@@ -7797,11 +7857,12 @@ exports[`component render zero results 1`] = `
           onSelect={[Function]}
           toggle={
             <Unknown
-              firstIndex={0}
+              firstIndex={1}
+              isDisabled={false}
               isOpen={false}
-              itemCount={0}
+              itemCount={40}
               itemsTitle="items"
-              lastIndex={0}
+              lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
               parentRef={null}
@@ -7813,7 +7874,7 @@ exports[`component render zero results 1`] = `
         >
           <DropdownWithContext
             className=""
-            direction="down"
+            direction="up"
             dropdownItems={
               Array [
                 <Unknown
@@ -7887,11 +7948,12 @@ exports[`component render zero results 1`] = `
             position="left"
             toggle={
               <Unknown
-                firstIndex={0}
+                firstIndex={1}
+                isDisabled={false}
                 isOpen={false}
-                itemCount={0}
+                itemCount={40}
                 itemsTitle="items"
-                lastIndex={0}
+                lastIndex={10}
                 onToggle={[Function]}
                 optionsToggle="Select"
                 parentRef={null}
@@ -7902,12 +7964,763 @@ exports[`component render zero results 1`] = `
             }
           >
             <div
-              className="pf-c-dropdown"
+              className="pf-c-dropdown pf-m-top"
             >
               <Component
                 ariaHasPopup={true}
-                firstIndex={0}
-                id="pf-toggle-id-3"
+                firstIndex={1}
+                id="pf-toggle-id-12"
+                isDisabled={false}
+                isOpen={false}
+                isPlain={true}
+                itemCount={40}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={10}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={
+                  Object {
+                    "current": <div
+                      class="pf-c-dropdown pf-m-top"
+                    >
+                      <div
+                        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                      >
+                        <button
+                          aria-expanded="false"
+                          class="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
+                          id="pagination-options-menu-toggle"
+                          type="button"
+                        >
+                          <span
+                            class="pf-c-dropdown__toggle-text"
+                          >
+                            <span
+                              class="pf-c-options-menu__toggle-text"
+                            >
+                              <strong>
+                                1
+                                 - 
+                                10
+                              </strong>
+                               
+                              of 
+                              <strong>
+                                40
+                              </strong>
+                               
+                              items
+                            </span>
+                          </span>
+                          <svg
+                            aria-hidden="true"
+                            class="pf-c-dropdown__toggle-icon"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style="vertical-align: -0.125em;"
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>,
+                  }
+                }
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              >
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                >
+                  <Component
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    id="pagination-options-menu-toggle"
+                    isDisabled={false}
+                    isOpen={false}
+                    onToggle={[Function]}
+                    parentRef={
+                      Object {
+                        "current": <div
+                          class="pf-c-dropdown pf-m-top"
+                        >
+                          <div
+                            class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                          >
+                            <button
+                              aria-expanded="false"
+                              class="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
+                              id="pagination-options-menu-toggle"
+                              type="button"
+                            >
+                              <span
+                                class="pf-c-dropdown__toggle-text"
+                              >
+                                <span
+                                  class="pf-c-options-menu__toggle-text"
+                                >
+                                  <strong>
+                                    1
+                                     - 
+                                    10
+                                  </strong>
+                                   
+                                  of 
+                                  <strong>
+                                    40
+                                  </strong>
+                                   
+                                  items
+                                </span>
+                              </span>
+                              <svg
+                                aria-hidden="true"
+                                class="pf-c-dropdown__toggle-icon"
+                                fill="currentColor"
+                                height="1em"
+                                role="img"
+                                style="vertical-align: -0.125em;"
+                                viewBox="0 0 320 512"
+                                width="1em"
+                              >
+                                <path
+                                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                                  transform=""
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        </div>,
+                      }
+                    }
+                  >
+                    <Toggle
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={false}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={
+                        Object {
+                          "current": <div
+                            class="pf-c-dropdown pf-m-top"
+                          >
+                            <div
+                              class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                            >
+                              <button
+                                aria-expanded="false"
+                                class="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
+                                id="pagination-options-menu-toggle"
+                                type="button"
+                              >
+                                <span
+                                  class="pf-c-dropdown__toggle-text"
+                                >
+                                  <span
+                                    class="pf-c-options-menu__toggle-text"
+                                  >
+                                    <strong>
+                                      1
+                                       - 
+                                      10
+                                    </strong>
+                                     
+                                    of 
+                                    <strong>
+                                      40
+                                    </strong>
+                                     
+                                    items
+                                  </span>
+                                </span>
+                                <svg
+                                  aria-hidden="true"
+                                  class="pf-c-dropdown__toggle-icon"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  style="vertical-align: -0.125em;"
+                                  viewBox="0 0 320 512"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                                    transform=""
+                                  />
+                                </svg>
+                              </button>
+                            </div>
+                          </div>,
+                        }
+                      }
+                    >
+                      <button
+                        aria-expanded={false}
+                        className="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <span
+                          className="pf-c-dropdown__toggle-text"
+                        >
+                          <span
+                            className="pf-c-options-menu__toggle-text"
+                          >
+                            <Component
+                              firstIndex={1}
+                              itemCount={40}
+                              itemsTitle="items"
+                              lastIndex={10}
+                            >
+                              <strong>
+                                1
+                                 - 
+                                10
+                              </strong>
+                               
+                              of 
+                              <strong>
+                                40
+                              </strong>
+                               
+                              items
+                            </Component>
+                          </span>
+                        </span>
+                        <CaretDownIcon
+                          className="pf-c-dropdown__toggle-icon"
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className="pf-c-dropdown__toggle-icon"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </Component>
+                </div>
+              </Component>
+            </div>
+          </DropdownWithContext>
+        </Component>
+      </div>
+    </PaginationOptionsMenu>
+    <Navigation
+      className=""
+      currPage="Current page"
+      firstPage={1}
+      isDisabled={false}
+      lastPage={4}
+      onFirstClick={[Function]}
+      onLastClick={[Function]}
+      onNextClick={[Function]}
+      onPageInput={[Function]}
+      onPreviousClick={[Function]}
+      onSetPage={[Function]}
+      page={1}
+      pagesTitle="page"
+      paginationTitle="Pagination"
+      toFirstPage="Go to first page"
+      toLastPage="Go to last page"
+      toNextPage="Go to next page"
+      toPreviousPage="Go to previous page"
+    >
+      <nav
+        aria-label="Pagination"
+        className="pf-c-pagination__nav"
+      >
+        <Component
+          aria-label="Go to first page"
+          data-action="first"
+          isDisabled={true}
+          onClick={[Function]}
+          variant="plain"
+        >
+          <button
+            aria-disabled={null}
+            aria-label="Go to first page"
+            className="pf-c-button pf-m-plain pf-m-disabled"
+            data-action="first"
+            disabled={true}
+            onClick={[Function]}
+            tabIndex={null}
+            type="button"
+          >
+            <AngleDoubleLeftIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                  transform=""
+                />
+              </svg>
+            </AngleDoubleLeftIcon>
+          </button>
+        </Component>
+        <Component
+          aria-label="Go to previous page"
+          data-action="previous"
+          isDisabled={true}
+          onClick={[Function]}
+          variant="plain"
+        >
+          <button
+            aria-disabled={null}
+            aria-label="Go to previous page"
+            className="pf-c-button pf-m-plain pf-m-disabled"
+            data-action="previous"
+            disabled={true}
+            onClick={[Function]}
+            tabIndex={null}
+            type="button"
+          >
+            <AngleLeftIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                  transform=""
+                />
+              </svg>
+            </AngleLeftIcon>
+          </button>
+        </Component>
+        <div
+          className="pf-c-pagination__nav-page-select"
+        >
+          <input
+            aria-label="Current page"
+            className="pf-c-form-control"
+            disabled={false}
+            max={4}
+            min={1}
+            onChange={[Function]}
+            onKeyDown={[Function]}
+            type="number"
+            value={1}
+          />
+          <span
+            aria-hidden="true"
+          >
+            of 
+            4 pages
+          </span>
+        </div>
+        <Component
+          aria-label="Go to next page"
+          data-action="next"
+          isDisabled={false}
+          onClick={[Function]}
+          variant="plain"
+        >
+          <button
+            aria-disabled={null}
+            aria-label="Go to next page"
+            className="pf-c-button pf-m-plain"
+            data-action="next"
+            disabled={false}
+            onClick={[Function]}
+            tabIndex={null}
+            type="button"
+          >
+            <AngleRightIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  transform=""
+                />
+              </svg>
+            </AngleRightIcon>
+          </button>
+        </Component>
+        <Component
+          aria-label="Go to last page"
+          data-action="last"
+          isDisabled={false}
+          onClick={[Function]}
+          variant="plain"
+        >
+          <button
+            aria-disabled={null}
+            aria-label="Go to last page"
+            className="pf-c-button pf-m-plain"
+            data-action="last"
+            disabled={false}
+            onClick={[Function]}
+            tabIndex={null}
+            type="button"
+          >
+            <AngleDoubleRightIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                  transform=""
+                />
+              </svg>
+            </AngleDoubleRightIcon>
+          </button>
+        </Component>
+      </nav>
+    </Navigation>
+  </div>
+</Component>
+`;
+
+exports[`component render zero results 1`] = `
+<Component
+  itemCount={0}
+>
+  <div
+    className="pf-c-pagination"
+    id="pagination-options-menu"
+  >
+    <div
+      className="pf-c-pagination__total-items"
+    >
+      0 items
+    </div>
+    <PaginationOptionsMenu
+      className=""
+      dropDirection="down"
+      firstIndex={0}
+      isDisabled={false}
+      itemCount={0}
+      itemsPerPageTitle="Items per page"
+      itemsTitle="items"
+      lastIndex={0}
+      onPerPageSelect={[Function]}
+      optionsToggle="Select"
+      perPage={10}
+      perPageOptions={
+        Array [
+          Object {
+            "title": "10",
+            "value": 10,
+          },
+          Object {
+            "title": "20",
+            "value": 20,
+          },
+          Object {
+            "title": "50",
+            "value": 50,
+          },
+          Object {
+            "title": "100",
+            "value": 100,
+          },
+        ]
+      }
+      perPageSuffix="per page"
+      toggleTemplate={[Function]}
+      widgetId="pagination-options-menu"
+    >
+      <div
+        className="pf-c-options-menu"
+      >
+        <span
+          hidden={true}
+          id="pagination-options-menu-label"
+        >
+          Items per page
+          :
+        </span>
+        <Component
+          direction="down"
+          dropdownItems={
+            Array [
+              <Unknown
+                className="pf-c-options-menu__menu-item pf-m-selected"
+                component="button"
+                data-action="per-page-10"
+                onClick={[Function]}
+              >
+                10
+                <span
+                  className="pf-c-pagination__menu-text"
+                >
+                   per page
+                </span>
+                <i
+                  className="pf-c-options-menu__menu-item-icon"
+                >
+                  <CheckIcon
+                    color="currentColor"
+                    noVerticalAlign={false}
+                    size="sm"
+                    title={null}
+                  />
+                </i>
+              </Unknown>,
+              <Unknown
+                className="pf-c-options-menu__menu-item"
+                component="button"
+                data-action="per-page-20"
+                onClick={[Function]}
+              >
+                20
+                <span
+                  className="pf-c-pagination__menu-text"
+                >
+                   per page
+                </span>
+              </Unknown>,
+              <Unknown
+                className="pf-c-options-menu__menu-item"
+                component="button"
+                data-action="per-page-50"
+                onClick={[Function]}
+              >
+                50
+                <span
+                  className="pf-c-pagination__menu-text"
+                >
+                   per page
+                </span>
+              </Unknown>,
+              <Unknown
+                className="pf-c-options-menu__menu-item"
+                component="button"
+                data-action="per-page-100"
+                onClick={[Function]}
+              >
+                100
+                <span
+                  className="pf-c-pagination__menu-text"
+                >
+                   per page
+                </span>
+              </Unknown>,
+            ]
+          }
+          isOpen={false}
+          isPlain={true}
+          onSelect={[Function]}
+          toggle={
+            <Unknown
+              firstIndex={0}
+              isDisabled={false}
+              isOpen={false}
+              itemCount={0}
+              itemsTitle="items"
+              lastIndex={0}
+              onToggle={[Function]}
+              optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
+              toggleTemplate={[Function]}
+              widgetId="pagination-options-menu"
+            />
+          }
+        >
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Unknown
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-10"
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Unknown>,
+                <Unknown
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-20"
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Unknown>,
+                <Unknown
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Unknown>,
+                <Unknown
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Unknown>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <Unknown
+                firstIndex={0}
+                isDisabled={false}
+                isOpen={false}
+                itemCount={0}
+                itemsTitle="items"
+                lastIndex={0}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
+          >
+            <div
+              className="pf-c-dropdown"
+            >
+              <Component
+                ariaHasPopup={true}
+                firstIndex={0}
+                id="pf-toggle-id-4"
+                isDisabled={false}
                 isOpen={false}
                 isPlain={true}
                 itemCount={0}
@@ -8188,6 +9001,7 @@ exports[`component render zero results 1`] = `
       className=""
       currPage="Current page"
       firstPage={0}
+      isDisabled={false}
       lastPage={0}
       onFirstClick={[Function]}
       onLastClick={[Function]}
diff --git a/packages/patternfly-4/react-integration/cypress/integration/pagination.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/pagination.spec.ts
index 8244fcb515e..4aca0f263c7 100644
--- a/packages/patternfly-4/react-integration/cypress/integration/pagination.spec.ts
+++ b/packages/patternfly-4/react-integration/cypress/integration/pagination.spec.ts
@@ -5,8 +5,23 @@ describe('Pagination Demo Test', () => {
     cy.url().should('eq', 'http://localhost:3000/pagination-demo-nav-link');
   });
 
+  it('should be disabled when flag is present', () => {
+    cy.get('#pagination-options-menu-disabled').find('.pf-c-options-menu__toggle-text')
+      .then(toggleText => expect(toggleText).to.have.text('1 - 20 of 523 items'));
+    cy.get('#pagination-options-menu-disabled').find('button[data-action="first"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('#pagination-options-menu-disabled').find('button[data-action="previous"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('#pagination-options-menu-disabled').find('button[data-action="next"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('#pagination-options-menu-disabled').find('button[data-action="last"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('#pagination-options-menu-disabled > .pf-c-options-menu > .pf-c-dropdown').find('button')
+      .then(button => expect(button).to.be.disabled);
+  });
+
   it('Verify initial state', () => {
-    cy.get('.pf-c-pagination').should('have.length', 2);
+    cy.get('.pf-c-pagination').should('have.length', 3);
     cy.get('#pagination-options-menu-bottom.pf-c-pagination.pf-m-footer').should('exist');
     cy.get('#pagination-options-menu-top').find('.pf-c-options-menu__toggle-text')
       .then(toggleText => expect(toggleText).to.have.text('1 - 20 of 523 items'));
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationDemo.tsx
index eda9bb40300..d9580ae81dc 100644
--- a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationDemo.tsx
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationDemo.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import {
   Pagination,
-  PaginationVariant
+  PaginationVariant,
+  Stack, 
+  StackItem, 
+  Title
 } from '@patternfly/react-core';
 
 type OptionsMenuDemoState = {
@@ -35,30 +38,59 @@ export class PaginationDemo extends React.Component<React.HTMLProps<HTMLDivEleme
     });
   };
 
+  renderPagination() {
+    return (
+      <StackItem isFilled={false}>
+        <Title size="2xl">Pagination</Title>
+        <React.Fragment>
+          <Pagination
+            itemCount={523}
+            perPage={this.state.perPage}
+            page={this.state.topPage}
+            onSetPage={this.onSetTopPage}
+            widgetId="pagination-options-menu-top"
+            onPerPageSelect={this.onPerPageSelect}
+          />
+          <Pagination
+            itemCount={523}
+            widgetId="pagination-options-menu-bottom"
+            perPage={this.state.perPage}
+            page={this.state.bottomPage}
+            variant={PaginationVariant.bottom}
+            onSetPage={this.onSetBottomPage}
+            onPerPageSelect={this.onPerPageSelect}
+          />
+        </React.Fragment>
+      </StackItem>
+    );
+  }
 
-  render() {
+  renderDisabled() {
     return (
-      <React.Fragment>
-        <Pagination
-          itemCount={523}
-          perPage={this.state.perPage}
-          page={this.state.topPage}
-          onSetPage={this.onSetTopPage}
-          widgetId="pagination-options-menu-top"
-          onPerPageSelect={this.onPerPageSelect}
-        />
-        <Pagination
-          itemCount={523}
-          widgetId="pagination-options-menu-bottom"
-          perPage={this.state.perPage}
-          page={this.state.bottomPage}
-          variant={PaginationVariant.bottom}
-          onSetPage={this.onSetBottomPage}
-          onPerPageSelect={this.onPerPageSelect}
-        />
-      </React.Fragment>
+      <StackItem isFilled={false}>
+        <Title size="2xl">Disabled state</Title>
+        <React.Fragment>
+          <Pagination
+            itemCount={523}
+            perPage={this.state.perPage}
+            page={this.state.topPage}
+            onSetPage={this.onSetTopPage}
+            widgetId="pagination-options-menu-disabled"
+            onPerPageSelect={this.onPerPageSelect}
+            isDisabled
+          />
+        </React.Fragment>
+      </StackItem>
     );
   }
+
+
+  render() {
+    return <Stack gutter="md">
+      {this.renderPagination()}
+      {this.renderDisabled()}
+    </Stack>;
+  }
 }
 
 export default PaginationDemo;