diff --git a/packages/react-core/src/components/Pagination/OptionsToggle.tsx b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
index bb797b828ad..43c02e56f1a 100644
--- a/packages/react-core/src/components/Pagination/OptionsToggle.tsx
+++ b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
@@ -9,9 +9,9 @@ import { DropdownToggle } from '../Dropdown';
 export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   /** The type or title of the items being paginated */
   itemsTitle?: string;
-  /** Accessible label for the Options Toggle */
+  /** Accessible label for the options toggle */
   optionsToggle?: string;
-  /** The Title of the Pagination Options Menu */
+  /** The title of the pagination options menu */
   itemsPerPageTitle?: string;
   /** The first index of the items being paginated */
   firstIndex?: number;
@@ -19,15 +19,15 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   lastIndex?: number;
   /** The total number of items being paginated */
   itemCount?: number;
-  /** Id added to the title of the Pagination Options Menu */
+  /** Id added to the title of the pagination options menu */
   widgetId?: string;
   /** showToggle */
   showToggle?: boolean;
-  /** Event function that fires when user clicks the Options Menu toggle */
+  /** Event function that fires when user clicks the options menu toggle */
   onToggle?: (isOpen: boolean) => void;
-  /** Flag indicating if the Options Menu dropdown is open or not */
+  /** Flag indicating if the options menu dropdown is open or not */
   isOpen?: boolean;
-  /** Flag indicating if the Options Menu is disabled */
+  /** Flag indicating if the options menu is disabled */
   isDisabled?: boolean;
   /** */
   parentRef?: HTMLElement;
@@ -37,12 +37,16 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   onEnter?: () => void;
   /** Label for the English word "of" */
   ofWord?: string;
+  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
+   * all of the toggle text to be clickable.
+   */
+  perPageComponent?: 'div' | 'button';
 }
 
 let toggleId = 0;
 export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   itemsTitle = 'items',
-  optionsToggle = 'Items per page',
+  optionsToggle,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   itemsPerPageTitle = 'Items per page',
   ofWord = 'of',
@@ -57,43 +61,49 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   isDisabled = false,
   parentRef = null,
   toggleTemplate: ToggleTemplate,
-  onEnter = null
-}: OptionsToggleProps) => (
-  <div
-    className={css(
-      styles.optionsMenuToggle,
-      isDisabled && styles.modifiers.disabled,
-      styles.modifiers.plain,
-      styles.modifiers.text
-    )}
-  >
-    {showToggle && (
-      <React.Fragment>
-        <span className={css(styles.optionsMenuToggleText)}>
-          {typeof ToggleTemplate === 'string' ? (
-            fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })
-          ) : (
-            <ToggleTemplate
-              firstIndex={firstIndex}
-              lastIndex={lastIndex}
-              ofWord={ofWord}
-              itemCount={itemCount}
-              itemsTitle={itemsTitle}
-            />
-          )}
-        </span>
-        <DropdownToggle
-          onEnter={onEnter}
-          aria-label={optionsToggle}
-          onToggle={onToggle}
-          isDisabled={isDisabled || (itemCount && itemCount <= 0)}
-          isOpen={isOpen}
-          id={`${widgetId}-toggle-${toggleId++}`}
-          className={styles.optionsMenuToggleButton}
-          parentRef={parentRef}
-        ></DropdownToggle>
-      </React.Fragment>
-    )}
-  </div>
-);
+  onEnter = null,
+  perPageComponent = 'div'
+}: OptionsToggleProps) => {
+  const isDiv = perPageComponent === 'div';
+  const toggleClasses = css(
+    styles.optionsMenuToggle,
+    isDisabled && styles.modifiers.disabled,
+    styles.modifiers.plain,
+    styles.modifiers.text
+  );
+
+  const template =
+    typeof ToggleTemplate === 'string' ? (
+      fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })
+    ) : (
+      <ToggleTemplate
+        firstIndex={firstIndex}
+        lastIndex={lastIndex}
+        ofWord={ofWord}
+        itemCount={itemCount}
+        itemsTitle={itemsTitle}
+      />
+    );
+
+  const dropdown = showToggle && (
+    <React.Fragment>
+      {isDiv && <span className={css(styles.optionsMenuToggleText)}>{template}</span>}
+      <DropdownToggle
+        onEnter={onEnter}
+        aria-label={isDiv ? optionsToggle || 'Items per page' : optionsToggle}
+        onToggle={onToggle}
+        isDisabled={isDisabled || (itemCount && itemCount <= 0)}
+        isOpen={isOpen}
+        id={`${widgetId}-toggle-${toggleId++}`}
+        className={isDiv ? styles.optionsMenuToggleButton : toggleClasses}
+        parentRef={parentRef}
+        aria-haspopup="listbox"
+      >
+        {!isDiv && template}
+      </DropdownToggle>
+    </React.Fragment>
+  );
+
+  return isDiv ? <div className={toggleClasses}>{dropdown}</div> : dropdown;
+};
 OptionsToggle.displayName = 'OptionsToggle';
diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
index 926c2204446..ef7ff8e3c18 100644
--- a/packages/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -48,9 +48,9 @@ export interface PaginationTitles {
   pages?: string;
   /** The type or title of the items being paginated */
   items?: string;
-  /** The Title of the Pagination Options Menu */
+  /** The title of the pagination options menu */
   itemsPerPage?: string;
-  /** The suffix to be displayed after each option on the Options Menu dropdown */
+  /** The suffix to be displayed after each option on the options menu dropdown */
   perPageSuffix?: string;
   /** Accessible label for the button which moves to the first page */
   toFirstPage?: string;
@@ -60,7 +60,7 @@ export interface PaginationTitles {
   toLastPage?: string;
   /** Accessible label for the button which moves to the next page */
   toNextPage?: string;
-  /** Accessible label for the Options Toggle */
+  /** Accessible label for the options toggle */
   optionsToggle?: string;
   /** Accessible label for the input displaying the current page */
   currPage?: string;
@@ -141,6 +141,10 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
+  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
+   * all of the toggle text to be clickable.
+   */
+  perPageComponent?: 'div' | 'button';
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {
@@ -177,7 +181,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
       toPreviousPage: 'Go to previous page',
       toLastPage: 'Go to last page',
       toNextPage: 'Go to next page',
-      optionsToggle: 'Items per page',
+      optionsToggle: '',
       currPage: 'Current page',
       paginationTitle: 'Pagination',
       ofWord: 'of'
@@ -197,7 +201,8 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
     onNextClick: () => undefined,
     onPageInput: () => undefined,
     onLastClick: () => undefined,
-    ouiaSafe: true
+    ouiaSafe: true,
+    perPageComponent: 'div'
   };
 
   state = {
@@ -252,6 +257,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
       onLastClick,
       ouiaId,
       ouiaSafe,
+      perPageComponent,
       ...props
     } = this.props;
     const dropDirection = dropDirectionProp || (variant === 'bottom' && !isStatic ? 'up' : 'down');
@@ -335,6 +341,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
           widgetId={widgetId}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
+          perPageComponent={perPageComponent}
         />
         <Navigation
           pagesTitle={titles.page}
diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
index 9bc46c467b0..2f5d977c909 100644
--- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
+++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -8,25 +8,25 @@ import { ToggleTemplateProps, ToggleTemplate } from './ToggleTemplate';
 import { PerPageOptions, OnPerPageSelect } from './Pagination';
 
 export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivElement> {
-  /** Custom class name added to the Pagination Options Menu */
+  /** Custom class name added to the pagination options menu */
   className?: string;
-  /** Id added to the title of the Pagination Options Menu */
+  /** Id added to the title of the Pagination options menu */
   widgetId?: string;
-  /** Flag indicating if Pagination Options Menu is disabled */
+  /** Flag indicating if pagination options menu is disabled */
   isDisabled?: boolean;
-  /** Menu will open up or open down from the Options menu toggle */
+  /** 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 */
+  /** Array of titles and values which will be the options on the options menu dropdown */
   perPageOptions?: PerPageOptions[];
-  /** The Title of the Pagination Options Menu */
+  /** The title of the pagination options menu */
   itemsPerPageTitle?: string;
   /** Current page number */
   page?: number;
-  /** The suffix to be displayed after each option on the Options Menu dropdown */
+  /** The suffix to be displayed after each option on the options menu dropdown */
   perPageSuffix?: string;
   /** The type or title of the items being paginated */
   itemsTitle?: string;
-  /** The text to be displayed on the Options Toggle */
+  /** Accessible label for the options toggle */
   optionsToggle?: string;
   /** The total number of items being paginated */
   itemCount?: number;
@@ -46,6 +46,10 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of" */
   ofWord?: string;
+  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
+   * all of the toggle text to be clickable.
+   */
+  perPageComponent?: 'div' | 'button';
 }
 
 interface PaginationOptionsMenuState {
@@ -63,7 +67,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
     perPageOptions: [] as PerPageOptions[],
     itemsPerPageTitle: 'Items per page',
     perPageSuffix: 'per page',
-    optionsToggle: 'Items per page',
+    optionsToggle: '',
     ofWord: 'of',
     perPage: 0,
     firstIndex: 0,
@@ -71,7 +75,8 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
     defaultToFullPage: false,
     itemsTitle: 'items',
     toggleTemplate: ToggleTemplate,
-    onPerPageSelect: () => null as any
+    onPerPageSelect: () => null as any,
+    perPageComponent: 'div'
   };
 
   constructor(props: PaginationOptionsMenuProps) {
@@ -144,7 +149,8 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
       lastIndex,
       itemCount,
       itemsTitle,
-      ofWord
+      ofWord,
+      perPageComponent
     } = this.props;
     const { isOpen } = this.state;
 
@@ -153,7 +159,8 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
         value={{
           id: widgetId,
           onSelect: this.onSelect,
-          toggleIndicatorClass: styles.optionsMenuToggleButtonIcon,
+          toggleIndicatorClass:
+            perPageComponent === 'div' ? styles.optionsMenuToggleButtonIcon : styles.optionsMenuToggleIcon,
           toggleTextClass: styles.optionsMenuToggleText,
           menuClass: styles.optionsMenuMenu,
           itemClass: styles.optionsMenuMenuItem,
@@ -184,6 +191,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
               toggleTemplate={toggleTemplate}
               parentRef={this.parentRef.current}
               isDisabled={isDisabled}
+              perPageComponent={perPageComponent}
             />
           }
           dropdownItems={this.renderItems()}
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
index 294ac5dbf4c..0251e56a3fc 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`OptionsToggle should match snapshot (auto-generated) 1`] = `
     />
     <button
       aria-expanded="false"
+      aria-haspopup="listbox"
       aria-label="'Select'"
       class="pf-c-dropdown__toggle pf-c-options-menu__toggle-button"
       data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
diff --git a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
index de4b8b4686b..ba17f3b099e 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
+++ b/packages/react-core/src/components/Pagination/__tests__/Pagination.test.tsx
@@ -75,10 +75,7 @@ describe('Pagination', () => {
 
     test('custom pagination toggle', () => {
       const { asFragment } = render(
-        <Pagination
-          itemCount={40}
-          toggleTemplate={'${firstIndex} - ${lastIndex} - ${itemCount} - ${itemsTitle}'}
-        />
+        <Pagination itemCount={40} toggleTemplate={'${firstIndex} - ${lastIndex} - ${itemCount} - ${itemsTitle}'} />
       );
       expect(asFragment()).toMatchSnapshot();
     });
@@ -110,6 +107,11 @@ describe('Pagination', () => {
       render(<Pagination toggleTemplate={'I am a string'} />);
       expect(screen.getAllByText('I am a string')[0]).toBeInTheDocument();
     });
+
+    test('should render correctly button variant', () => {
+      const { asFragment } = render(<Pagination perPageComponent="button" itemCount={20} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
   });
 
   describe('API', () => {
diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index 6d92aa8ffda..a89f6ec9472 100644
--- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
@@ -242,6 +243,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
@@ -454,6 +456,7 @@ exports[`Pagination component render custom start end 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
@@ -835,6 +838,7 @@ exports[`Pagination component render last page 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
@@ -1047,6 +1051,7 @@ exports[`Pagination component render limited number of pages 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
@@ -1250,6 +1255,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
@@ -1450,6 +1456,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
@@ -1618,6 +1625,215 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
 </DocumentFragment>
 `;
 
+exports[`Pagination component render should render correctly button variant 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-pagination"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-17"
+    data-ouia-component-type="PF4/Pagination"
+    data-ouia-safe="true"
+    id="pagination-options-menu-18"
+    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+  >
+    <div
+      class="pf-c-pagination__total-items"
+    >
+      <b>
+        -9 - 10
+      </b>
+       of 
+      <b>
+        20
+      </b>
+       
+    </div>
+    <div
+      class="pf-c-options-menu"
+      data-ouia-component-type="PF4/PaginationOptionsMenu"
+      data-ouia-safe="true"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label=""
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-18"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-17"
+        type="button"
+      >
+        <span
+          class="pf-c-options-menu__toggle-text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-c-options-menu__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            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"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <nav
+      aria-label="Pagination"
+      class="pf-c-pagination__nav"
+    >
+      <div
+        class="pf-c-pagination__nav-control pf-m-first"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to first page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="first"
+          data-ouia-component-id="OUIA-Generated-Button-plain-71"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -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"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to previous page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="previous"
+          data-ouia-component-id="OUIA-Generated-Button-plain-72"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -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"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-page-select"
+      >
+        <input
+          aria-label="Current page"
+          class="pf-c-form-control"
+          max="2"
+          min="1"
+          type="number"
+          value="1"
+        />
+        <span
+          aria-hidden="true"
+        >
+          of 2
+        </span>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to next page"
+          class="pf-c-button pf-m-plain"
+          data-action="next"
+          data-ouia-component-id="OUIA-Generated-Button-plain-73"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -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"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control pf-m-last"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to last page"
+          class="pf-c-button pf-m-plain"
+          data-action="last"
+          data-ouia-component-id="OUIA-Generated-Button-plain-74"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -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"
+            />
+          </svg>
+        </button>
+      </div>
+    </nav>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Pagination component render should render correctly compact 1`] = `
 <DocumentFragment>
   <div
@@ -1662,6 +1878,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
@@ -1800,6 +2017,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
@@ -2016,6 +2234,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
@@ -2228,6 +2447,7 @@ exports[`Pagination component render should render correctly top 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
@@ -2440,6 +2660,7 @@ exports[`Pagination component render titles 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
@@ -2652,6 +2873,7 @@ exports[`Pagination component render up drop direction 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
@@ -2864,6 +3086,7 @@ exports[`Pagination component render zero results 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
diff --git a/packages/react-core/src/components/Pagination/examples/Pagination.md b/packages/react-core/src/components/Pagination/examples/Pagination.md
index 9db34f98bd7..f933a0292e8 100644
--- a/packages/react-core/src/components/Pagination/examples/Pagination.md
+++ b/packages/react-core/src/components/Pagination/examples/Pagination.md
@@ -38,6 +38,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -77,6 +78,7 @@ class PaginationBottom extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={333}
         widgetId="pagination-options-menu-bottom"
         perPage={this.state.perPage}
@@ -89,6 +91,7 @@ class PaginationBottom extends React.Component {
   }
 }
 ```
+
 ### Indeterminate
 
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
@@ -106,6 +109,7 @@ PaginationIndeterminate = () => {
 
   return (
     <Pagination
+      perPageComponent="button"
       toggleTemplate={({ firstIndex, lastIndex }) => (
         <React.Fragment>
           <b>
@@ -122,7 +126,7 @@ PaginationIndeterminate = () => {
       onPerPageSelect={onPerPageSelect}
     />
   );
-}
+};
 ```
 
 ### Disabled
@@ -155,6 +159,7 @@ class PaginationDisabled extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -198,6 +203,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={0}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -240,6 +246,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={15}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -282,6 +289,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -335,6 +343,7 @@ class PaginationSticky extends React.Component {
         {this.state.isTopSticky && (
           <React.Fragment>
             <Pagination
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}
@@ -368,6 +377,7 @@ class PaginationSticky extends React.Component {
               ))}
             </Gallery>
             <Pagination
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}
diff --git a/packages/react-integration/cypress/integration/paginationbuttonvariant.spec.ts b/packages/react-integration/cypress/integration/paginationbuttonvariant.spec.ts
new file mode 100644
index 00000000000..a33019de559
--- /dev/null
+++ b/packages/react-integration/cypress/integration/paginationbuttonvariant.spec.ts
@@ -0,0 +1,162 @@
+describe('Pagination Button Variant Demo Test', () => {
+  it('Navigate to Pagination section', () => {
+    cy.visit('http://localhost:3000/pagination-button-variant-demo-nav-link');
+  });
+
+  it('should be disabled when flag is present on button variant', () => {
+    cy.get('.pagination-options-menu-disabled')
+      .find('.pf-c-options-menu__toggle-text')
+      .then(toggleText => expect(toggleText).to.have.text('1 - 20 of 523 '));
+    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')
+      .find('.pf-c-options-menu__toggle')
+      .then(toggleButton => expect(toggleButton).to.be.disabled);
+  });
+
+  it('should be sticky when flag is present on button variant', () => {
+    cy.get('.pagination-options-menu-sticky').should('have.class', 'pf-m-sticky');
+  });
+
+  it('Verify initial state on button variant', () => {
+    cy.get('.pf-c-pagination').should('have.length', 5);
+    cy.get('.pagination-options-menu-bottom.pf-c-pagination.pf-m-bottom').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 '));
+
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="first"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="previous"]')
+      .then(button => expect(button).to.be.disabled);
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="next"]')
+      .then(button => expect(button).not.to.be.disabled);
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="last"]')
+      .then(button => expect(button).not.to.be.disabled);
+
+    cy.get('.pagination-options-menu-top')
+      .find('.pf-c-pagination__nav-page-select input')
+      .then(input => expect(input).to.have.value('1'));
+    cy.get('.pagination-options-menu-top')
+      .find('.pf-c-pagination__nav-page-select')
+      .then(navPageSelect => expect(navPageSelect).to.have.text('of 27'));
+  });
+
+  it('Verify event handlers fire correctly on button variant', () => {
+    cy.get('.pagination-options-menu-top')
+      .find('button.pf-c-options-menu__toggle')
+      .then((toggleButton: JQuery<HTMLButtonElement>) => {
+        cy.wrap(toggleButton).click();
+        cy.get('.pf-c-options-menu.pf-m-expanded').should('exist');
+        cy.get('button[data-action="per-page-10"]').then((firstMenuItem: JQuery<HTMLButtonElement>) => {
+          cy.wrap(firstMenuItem).click();
+          cy.get('.pf-c-options-menu.pf-m-expanded').should('not.exist');
+          cy.get('.pagination-options-menu-top')
+            .find('.pf-c-options-menu__toggle-text')
+            .then(toggleText => expect(toggleText).to.have.text('1 - 10 of 523 '));
+          cy.get('.pagination-options-menu-top')
+            .find('.pf-c-pagination__nav-page-select')
+            .then(navPageSelect => expect(navPageSelect).to.have.text('of 53'));
+
+          cy.get('.pagination-options-menu-bottom')
+            .find('.pf-c-options-menu__toggle-text')
+            .then(toggleText => expect(toggleText).to.have.text('1 - 10 of 523 '));
+          cy.get('.pagination-options-menu-bottom')
+            .find('.pf-c-pagination__nav-page-select')
+            .then(navPageSelect => expect(navPageSelect).to.have.text('of 53'));
+        });
+      });
+
+    cy.get('.pagination-options-menu-top')
+      .find('button[data-action="next"]')
+      .then((button: JQuery<HTMLButtonElement>) => {
+        cy.wrap(button).click();
+        cy.get('.pagination-options-menu-top')
+          .find('button[data-action="first"]')
+          .then(firstButton => expect(firstButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-top')
+          .find('button[data-action="previous"]')
+          .then(previousButton => expect(previousButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-top')
+          .find('.pf-c-options-menu__toggle-text')
+          .then(toggleText => expect(toggleText).to.have.text('11 - 20 of 523 '));
+        cy.get('.pagination-options-menu-top')
+          .find('.pf-c-pagination__nav-page-select input')
+          .then(input => expect(input).to.have.value('2'));
+      });
+
+    cy.get('.pagination-options-menu-bottom')
+      .find('button[data-action="next"]')
+      .then((button: JQuery<HTMLButtonElement>) => {
+        cy.wrap(button).click();
+        cy.get('.pagination-options-menu-bottom')
+          .find('button[data-action="first"]')
+          .then(firstButton => expect(firstButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-bottom')
+          .find('button[data-action="previous"]')
+          .then(previousButton => expect(previousButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-bottom')
+          .find('.pf-c-options-menu__toggle-text')
+          .then(toggleText => expect(toggleText).to.have.text('11 - 20 of 523 '));
+        cy.get('.pagination-options-menu-bottom')
+          .find('.pf-c-pagination__nav-page-select input')
+          .then(input => expect(input).to.have.value('2'));
+      });
+
+    cy.get('.pagination-options-menu-default-fullpage')
+      .find('button[data-action="next"]')
+      .then((button: JQuery<HTMLButtonElement>) => {
+        cy.wrap(button).click();
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('button[data-action="first"]')
+          .then(firstButton => expect(firstButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('button[data-action="previous"]')
+          .then(previousButton => expect(previousButton).not.to.be.disabled);
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('.pf-c-options-menu__toggle-text')
+          .then(toggleText => expect(toggleText).to.have.text('11 - 20 of 523 '));
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('.pf-c-pagination__nav-page-select input')
+          .then(input => expect(input).to.have.value('2'));
+      });
+  });
+
+  it('Verify defaultToFullPage works correctly on button variant', () => {
+    cy.get('.pagination-options-menu-default-fullpage')
+      .find('button[data-action="last"]')
+      .then((button: JQuery<HTMLButtonElement>) => {
+        cy.wrap(button).click();
+        cy.get('.pagination-options-menu-default-fullpage')
+          .find('button.pf-c-options-menu__toggle')
+          .then((toggleButton: JQuery<HTMLButtonElement>) => {
+            cy.wrap(toggleButton).click();
+            cy.get('.pf-c-options-menu.pf-m-expanded').should('exist');
+            cy.get('button[data-action="per-page-100"]').then((lastMenuItem: JQuery<HTMLButtonElement>) => {
+              cy.wrap(lastMenuItem).click();
+              cy.get('.pf-c-options-menu.pf-m-expanded').should('not.exist');
+              cy.get('.pagination-options-menu-default-fullpage')
+                .find('.pf-c-options-menu__toggle-text')
+                .then(toggleText => expect(toggleText).to.have.text('401 - 500 of 523 '));
+              cy.get('.pagination-options-menu-default-fullpage')
+                .find('.pf-c-form-control')
+                .then(currentPage => expect(currentPage).to.have.value('5'));
+            });
+          });
+      });
+  });
+});
diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts
index ef1c2c68316..7e460ad6d02 100644
--- a/packages/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/react-integration/demo-app-ts/src/Demos.ts
@@ -285,6 +285,11 @@ export const Demos: DemoInterface[] = [
     name: 'Page Managed Sidebar Closed Demo',
     componentType: Examples.PageManagedSidebarClosedDemo
   },
+  {
+    id: 'pagination-button-variant-demo',
+    name: 'Pagination Button Variant Demo',
+    componentType: Examples.PaginationButtonVariantDemo
+  },
   {
     id: 'pagination-demo',
     name: 'Pagination Demo',
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx
new file mode 100644
index 00000000000..76d7a879074
--- /dev/null
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PaginationDemo/PaginationButtonVariantDemo.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import { Pagination, PaginationVariant, Stack, StackItem, Title } from '@patternfly/react-core';
+
+interface OptionsMenuDemoState {
+  topPage: number;
+  bottomPage: number;
+  defaultFullPage: number;
+  perPage: number;
+}
+
+export class PaginationButtonVariantDemo extends React.Component<
+  React.HTMLProps<HTMLDivElement>,
+  OptionsMenuDemoState
+> {
+  static displayName = 'PaginationDemo';
+  state = {
+    topPage: 1,
+    bottomPage: 1,
+    defaultFullPage: 1,
+    perPage: 20
+  };
+
+  onSetTopPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {
+    this.setState({
+      topPage: pageNumber
+    });
+  };
+
+  onSetBottomPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {
+    this.setState({
+      bottomPage: pageNumber
+    });
+  };
+
+  onSetDefaultPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {
+    this.setState({
+      defaultFullPage: pageNumber
+    });
+  };
+
+  onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, perPage: number) => {
+    this.setState({
+      perPage
+    });
+  };
+
+  onDefaultToFullPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    perPage: number,
+    pageNumber: number
+  ) => {
+    this.setState({
+      perPage,
+      defaultFullPage: pageNumber
+    });
+  };
+
+  renderPaginationButtonVariant() {
+    return (
+      <StackItem isFilled={false}>
+        <Title headingLevel="h2" size="2xl">
+          Pagination
+        </Title>
+        <React.Fragment>
+          <Pagination
+            perPageComponent="button"
+            itemCount={523}
+            perPage={this.state.perPage}
+            page={this.state.topPage}
+            onSetPage={this.onSetTopPage}
+            widgetId="pagination-options-menu-top"
+            className="pagination-options-menu-top"
+            onPerPageSelect={this.onPerPageSelect}
+          />
+          <Pagination
+            perPageComponent="button"
+            itemCount={523}
+            widgetId="pagination-options-menu-bottom"
+            className="pagination-options-menu-bottom"
+            perPage={this.state.perPage}
+            page={this.state.bottomPage}
+            variant={PaginationVariant.bottom}
+            onSetPage={this.onSetBottomPage}
+            onPerPageSelect={this.onPerPageSelect}
+          />
+          <Pagination
+            perPageComponent="button"
+            itemCount={523}
+            widgetId="pagination-options-menu-default-fullpage"
+            className="pagination-options-menu-default-fullpage"
+            perPage={this.state.perPage}
+            page={this.state.defaultFullPage}
+            variant={PaginationVariant.bottom}
+            onSetPage={this.onSetDefaultPage}
+            onPerPageSelect={this.onDefaultToFullPerPageSelect}
+            defaultToFullPage
+          />
+        </React.Fragment>
+      </StackItem>
+    );
+  }
+
+  renderDisabledButtonVariant() {
+    return (
+      <StackItem isFilled={false}>
+        <Title headingLevel="h2" size="2xl">
+          Disabled state
+        </Title>
+        <React.Fragment>
+          <Pagination
+            perPageComponent="button"
+            itemCount={523}
+            perPage={this.state.perPage}
+            page={this.state.topPage}
+            onSetPage={this.onSetTopPage}
+            widgetId="pagination-options-menu-disabled"
+            className="pagination-options-menu-disabled"
+            onPerPageSelect={this.onPerPageSelect}
+            isDisabled
+          />
+        </React.Fragment>
+      </StackItem>
+    );
+  }
+
+  renderStickyButtonVariant() {
+    return (
+      <StackItem isFilled={false}>
+        <Title headingLevel="h2" size="2xl">
+          Sticky state
+        </Title>
+        <React.Fragment>
+          <Pagination
+            perPageComponent="button"
+            isSticky
+            itemCount={523}
+            perPage={this.state.perPage}
+            page={this.state.topPage}
+            onSetPage={this.onSetTopPage}
+            widgetId="pagination-options-menu-sticky"
+            className="pagination-options-menu-sticky"
+            onPerPageSelect={this.onPerPageSelect}
+          />
+        </React.Fragment>
+      </StackItem>
+    );
+  }
+
+  render() {
+    return (
+      <Stack hasGutter>
+        {this.renderPaginationButtonVariant()}
+        {this.renderDisabledButtonVariant()}
+        {this.renderStickyButtonVariant()}
+      </Stack>
+    );
+  }
+}
+
+export default PaginationButtonVariantDemo;
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
index 6f67e7f41e5..f6f8d58fac4 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -55,6 +55,7 @@ export * from './OptionsMenuDemo/OptionsMenuDemo';
 export * from './OverflowMenuDemo/OverflowMenuDemo';
 export * from './PageDemo/PageDemo';
 export * from './PageDemo/PageManagedSidebarClosedDemo';
+export * from './PaginationDemo/PaginationButtonVariantDemo';
 export * from './PaginationDemo/PaginationDemo';
 export * from './PopoverDemo/PopoverDemo';
 export * from './RadioDemo/RadioDemo';