diff --git a/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json b/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json
new file mode 100644
index 00000000000000..45bfd179c971ac
--- /dev/null
+++ b/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(Pagination) Add tooltips to pagination buttons.",
+  "packageName": "@fluentui/react-experiments",
+  "email": "amreladawy@mirosoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
index 6c36f801077fdd..89a716a7c83f4e 100644
--- a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
+++ b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
@@ -118,37 +118,43 @@ export class PaginationBase extends React.Component<IPaginationProps> {
     return (
       <div className={this._classNames.root}>
         <div role="radiogroup">
-          <IconButton
-            iconProps={this.props.firstPageIconProps}
-            onClick={this._handleFirstPage}
-            disabled={!canFirst}
-            aria-label={firstPageAriaLabel}
-            styles={{
-              icon: this._classNames.previousNextPage,
-              rootDisabled: this._classNames.previousNextPageDisabled,
-            }}
-          />
-          <IconButton
-            iconProps={this.props.previousPageIconProps}
-            onClick={this._handlePreviousPage}
-            disabled={!canPrevious}
-            aria-label={previousPageAriaLabel}
-            styles={{
-              icon: this._classNames.previousNextPage,
-              rootDisabled: this._classNames.previousNextPageDisabled,
-            }}
-          />
+          <TooltipHost content={firstPageAriaLabel} directionalHint={DirectionalHint.bottomCenter}>
+            <IconButton
+              iconProps={this.props.firstPageIconProps}
+              onClick={this._handleFirstPage}
+              disabled={!canFirst}
+              aria-label={firstPageAriaLabel}
+              styles={{
+                icon: this._classNames.previousNextPage,
+                rootDisabled: this._classNames.previousNextPageDisabled,
+              }}
+            />
+          </TooltipHost>
+          <TooltipHost content={previousPageAriaLabel} directionalHint={DirectionalHint.bottomCenter}>
+            <IconButton
+              iconProps={this.props.previousPageIconProps}
+              onClick={this._handlePreviousPage}
+              disabled={!canPrevious}
+              aria-label={previousPageAriaLabel}
+              styles={{
+                icon: this._classNames.previousNextPage,
+                rootDisabled: this._classNames.previousNextPageDisabled,
+              }}
+            />
+          </TooltipHost>
           {this._pageList()}
-          <IconButton
-            iconProps={this.props.nextPageIconProps}
-            onClick={this._handleNextPage}
-            disabled={!canNext}
-            aria-label={nextPageAriaLabel}
-            styles={{
-              icon: this._classNames.previousNextPage,
-              rootDisabled: this._classNames.previousNextPageDisabled,
-            }}
-          />
+          <TooltipHost content={nextPageAriaLabel} directionalHint={DirectionalHint.bottomCenter}>
+            <IconButton
+              iconProps={this.props.nextPageIconProps}
+              onClick={this._handleNextPage}
+              disabled={!canNext}
+              aria-label={nextPageAriaLabel}
+              styles={{
+                icon: this._classNames.previousNextPage,
+                rootDisabled: this._classNames.previousNextPageDisabled,
+              }}
+            />
+          </TooltipHost>
           <TooltipHost
             content={`${pageAriaLabel ? pageAriaLabel + ' ' : ''}${pageCount}`}
             directionalHint={DirectionalHint.bottomCenter}
diff --git a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
index 6c58ca4fc61d20..d826e2e933e6d3 100644
--- a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -14,264 +14,328 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
   <div
     role="radiogroup"
   >
-    <button
-      aria-disabled={true}
-      aria-label="first page"
+    <div
       className=
-          ms-Button
-          ms-Button--icon
-          is-disabled
+          ms-TooltipHost
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            background-color: transparent;
-            border-color: #f3f2f1;
-            border-radius: 2px;
-            border: none;
-            box-sizing: border-box;
-            color: #c8c6c4;
-            cursor: default;
-            display: inline-block;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 32px;
-            outline: transparent;
-            padding-bottom: 0;
-            padding-left: 4px;
-            padding-right: 4px;
-            padding-top: 0;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            user-select: none;
-            width: 32px;
-          }
-          &::-moz-focus-inner {
-            border: 0;
-          }
-          .ms-Fabric--isFocusVisible &:focus:after {
-            border: 1px solid transparent;
-            bottom: 2px;
-            content: "";
-            left: 2px;
-            outline: 1px solid #605e5c;
-            position: absolute;
-            right: 2px;
-            top: 2px;
-            z-index: 1;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-            bottom: -2px;
-            left: -2px;
-            outline-color: ButtonText;
-            right: -2px;
-            top: -2px;
-          }
-          &:active > span {
-            left: 0px;
-            position: relative;
-            top: 0px;
-          }
-          &:hover {
-            outline: 0px;
-          }
-          &:focus {
-            outline: 0px;
+            display: inline;
           }
-      data-is-focusable={false}
-      disabled={true}
-      onClick={[Function]}
+      onBlurCapture={[Function]}
+      onFocusCapture={[Function]}
       onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="none"
     >
-      <span
+      <button
+        aria-disabled={true}
+        aria-label="first page"
         className=
-            ms-Button-flexContainer
+            ms-Button
+            ms-Button--icon
+            is-disabled
             {
-              align-items: center;
-              display: flex;
-              flex-wrap: nowrap;
-              height: 100%;
-              justify-content: center;
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: transparent;
+              border-color: #f3f2f1;
+              border-radius: 2px;
+              border: none;
+              box-sizing: border-box;
+              color: #c8c6c4;
+              cursor: default;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 32px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              width: 32px;
             }
-        data-automationid="splitbuttonprimary"
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid transparent;
+              bottom: 2px;
+              content: "";
+              left: 2px;
+              outline: 1px solid #605e5c;
+              position: absolute;
+              right: 2px;
+              top: 2px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
+            }
+            &:active > span {
+              left: 0px;
+              position: relative;
+              top: 0px;
+            }
+            &:hover {
+              outline: 0px;
+            }
+            &:focus {
+              outline: 0px;
+            }
+        data-is-focusable={false}
+        disabled={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="button"
       >
-        <i
-          aria-hidden={true}
+        <span
           className=
-              ms-Icon
-              ms-Button-icon
-              {
-                display: inline-block;
-              }
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                font-family: "FabricMDL2Icons-1";
-                font-style: normal;
-                font-weight: normal;
-                speak: none;
-              }
+              ms-Button-flexContainer
               {
-                color: #a19f9d;
-                flex-shrink: 0;
-                font-size: 16px;
-                height: 16px;
-                line-height: 16px;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-                text-align: center;
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: center;
               }
-              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                color: GrayText;
+          data-automationid="splitbuttonprimary"
+        >
+          <i
+            aria-hidden={true}
+            className=
+                ms-Icon
+                ms-Button-icon
+                {
+                  display: inline-block;
+                }
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  font-family: "FabricMDL2Icons-1";
+                  font-style: normal;
+                  font-weight: normal;
+                  speak: none;
+                }
+                {
+                  color: #a19f9d;
+                  flex-shrink: 0;
+                  font-size: 16px;
+                  height: 16px;
+                  line-height: 16px;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
+                  text-align: center;
+                }
+                @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                  color: GrayText;
+                }
+            data-icon-name="Previous"
+            style={
+              Object {
+                "fontFamily": "\\"FabricMDL2Icons-1\\"",
               }
-          data-icon-name="Previous"
-          style={
-            Object {
-              "fontFamily": "\\"FabricMDL2Icons-1\\"",
             }
+          >
+            
+          </i>
+        </span>
+      </button>
+      <div
+        hidden={true}
+        id="tooltip0"
+        style={
+          Object {
+            "border": 0,
+            "height": 1,
+            "margin": -1,
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": 1,
           }
-        >
-          
-        </i>
-      </span>
-    </button>
-    <button
-      aria-disabled={true}
-      aria-label="previous page"
+        }
+      >
+        first page
+      </div>
+    </div>
+    <div
       className=
-          ms-Button
-          ms-Button--icon
-          is-disabled
+          ms-TooltipHost
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            background-color: transparent;
-            border-color: #f3f2f1;
-            border-radius: 2px;
-            border: none;
-            box-sizing: border-box;
-            color: #c8c6c4;
-            cursor: default;
-            display: inline-block;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 32px;
-            outline: transparent;
-            padding-bottom: 0;
-            padding-left: 4px;
-            padding-right: 4px;
-            padding-top: 0;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            user-select: none;
-            width: 32px;
-          }
-          &::-moz-focus-inner {
-            border: 0;
-          }
-          .ms-Fabric--isFocusVisible &:focus:after {
-            border: 1px solid transparent;
-            bottom: 2px;
-            content: "";
-            left: 2px;
-            outline: 1px solid #605e5c;
-            position: absolute;
-            right: 2px;
-            top: 2px;
-            z-index: 1;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-            bottom: -2px;
-            left: -2px;
-            outline-color: ButtonText;
-            right: -2px;
-            top: -2px;
-          }
-          &:active > span {
-            left: 0px;
-            position: relative;
-            top: 0px;
-          }
-          &:hover {
-            outline: 0px;
-          }
-          &:focus {
-            outline: 0px;
+            display: inline;
           }
-      data-is-focusable={false}
-      disabled={true}
-      onClick={[Function]}
+      onBlurCapture={[Function]}
+      onFocusCapture={[Function]}
       onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="none"
     >
-      <span
+      <button
+        aria-disabled={true}
+        aria-label="previous page"
         className=
-            ms-Button-flexContainer
+            ms-Button
+            ms-Button--icon
+            is-disabled
             {
-              align-items: center;
-              display: flex;
-              flex-wrap: nowrap;
-              height: 100%;
-              justify-content: center;
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: transparent;
+              border-color: #f3f2f1;
+              border-radius: 2px;
+              border: none;
+              box-sizing: border-box;
+              color: #c8c6c4;
+              cursor: default;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 32px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              width: 32px;
             }
-        data-automationid="splitbuttonprimary"
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid transparent;
+              bottom: 2px;
+              content: "";
+              left: 2px;
+              outline: 1px solid #605e5c;
+              position: absolute;
+              right: 2px;
+              top: 2px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
+            }
+            &:active > span {
+              left: 0px;
+              position: relative;
+              top: 0px;
+            }
+            &:hover {
+              outline: 0px;
+            }
+            &:focus {
+              outline: 0px;
+            }
+        data-is-focusable={false}
+        disabled={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="button"
       >
-        <i
-          aria-hidden={true}
+        <span
           className=
-              ms-Icon
-              ms-Button-icon
-              {
-                display: inline-block;
-              }
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                font-family: "FabricMDL2Icons-8";
-                font-style: normal;
-                font-weight: normal;
-                speak: none;
-              }
+              ms-Button-flexContainer
               {
-                color: #a19f9d;
-                flex-shrink: 0;
-                font-size: 16px;
-                height: 16px;
-                line-height: 16px;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-                text-align: center;
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: center;
               }
-              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                color: GrayText;
+          data-automationid="splitbuttonprimary"
+        >
+          <i
+            aria-hidden={true}
+            className=
+                ms-Icon
+                ms-Button-icon
+                {
+                  display: inline-block;
+                }
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  font-family: "FabricMDL2Icons-8";
+                  font-style: normal;
+                  font-weight: normal;
+                  speak: none;
+                }
+                {
+                  color: #a19f9d;
+                  flex-shrink: 0;
+                  font-size: 16px;
+                  height: 16px;
+                  line-height: 16px;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
+                  text-align: center;
+                }
+                @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                  color: GrayText;
+                }
+            data-icon-name="CaretSolidLeft"
+            style={
+              Object {
+                "fontFamily": "\\"FabricMDL2Icons-8\\"",
               }
-          data-icon-name="CaretSolidLeft"
-          style={
-            Object {
-              "fontFamily": "\\"FabricMDL2Icons-8\\"",
             }
+          >
+            
+          </i>
+        </span>
+      </button>
+      <div
+        hidden={true}
+        id="tooltip4"
+        style={
+          Object {
+            "border": 0,
+            "height": 1,
+            "margin": -1,
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": 1,
           }
-        >
-          
-        </i>
-      </span>
-    </button>
+        }
+      >
+        previous page
+      </div>
+    </div>
     <button
       aria-checked={true}
       aria-label="page 1 of 10 selected"
@@ -807,134 +871,166 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
         5
       </span>
     </button>
-    <button
-      aria-label="next page"
+    <div
       className=
-          ms-Button
-          ms-Button--icon
+          ms-TooltipHost
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            background-color: transparent;
-            border-radius: 2px;
-            border: none;
-            box-sizing: border-box;
-            color: #0078d4;
-            cursor: pointer;
-            display: inline-block;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 32px;
-            outline: transparent;
-            padding-bottom: 0;
-            padding-left: 4px;
-            padding-right: 4px;
-            padding-top: 0;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            user-select: none;
-            width: 32px;
-          }
-          &::-moz-focus-inner {
-            border: 0;
-          }
-          .ms-Fabric--isFocusVisible &:focus:after {
-            border: 1px solid transparent;
-            bottom: 2px;
-            content: "";
-            left: 2px;
-            outline: 1px solid #605e5c;
-            position: absolute;
-            right: 2px;
-            top: 2px;
-            z-index: 1;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-            bottom: -2px;
-            left: -2px;
-            outline-color: ButtonText;
-            right: -2px;
-            top: -2px;
-          }
-          &:active > span {
-            left: 0px;
-            position: relative;
-            top: 0px;
-          }
-          &:hover {
-            background-color: #f3f2f1;
-            color: #106ebe;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:hover {
-            border-color: Highlight;
-            color: Highlight;
-          }
-          &:active {
-            background-color: #edebe9;
-            color: #005a9e;
+            display: inline;
           }
-      data-is-focusable={true}
-      onClick={[Function]}
+      onBlurCapture={[Function]}
+      onFocusCapture={[Function]}
       onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="none"
     >
-      <span
+      <button
+        aria-label="next page"
         className=
-            ms-Button-flexContainer
+            ms-Button
+            ms-Button--icon
             {
-              align-items: center;
-              display: flex;
-              flex-wrap: nowrap;
-              height: 100%;
-              justify-content: center;
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: transparent;
+              border-radius: 2px;
+              border: none;
+              box-sizing: border-box;
+              color: #0078d4;
+              cursor: pointer;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 32px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              width: 32px;
             }
-        data-automationid="splitbuttonprimary"
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid transparent;
+              bottom: 2px;
+              content: "";
+              left: 2px;
+              outline: 1px solid #605e5c;
+              position: absolute;
+              right: 2px;
+              top: 2px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
+            }
+            &:active > span {
+              left: 0px;
+              position: relative;
+              top: 0px;
+            }
+            &:hover {
+              background-color: #f3f2f1;
+              color: #106ebe;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:hover {
+              border-color: Highlight;
+              color: Highlight;
+            }
+            &:active {
+              background-color: #edebe9;
+              color: #005a9e;
+            }
+        data-is-focusable={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="button"
       >
-        <i
-          aria-hidden={true}
+        <span
           className=
-              ms-Icon
-              ms-Button-icon
-              {
-                display: inline-block;
-              }
+              ms-Button-flexContainer
               {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                font-family: "FabricMDL2Icons-8";
-                font-style: normal;
-                font-weight: normal;
-                speak: none;
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: center;
               }
-              {
-                color: #0078d4;
-                flex-shrink: 0;
-                font-size: 16px;
-                height: 16px;
-                line-height: 16px;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-                text-align: center;
+          data-automationid="splitbuttonprimary"
+        >
+          <i
+            aria-hidden={true}
+            className=
+                ms-Icon
+                ms-Button-icon
+                {
+                  display: inline-block;
+                }
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  font-family: "FabricMDL2Icons-8";
+                  font-style: normal;
+                  font-weight: normal;
+                  speak: none;
+                }
+                {
+                  color: #0078d4;
+                  flex-shrink: 0;
+                  font-size: 16px;
+                  height: 16px;
+                  line-height: 16px;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
+                  text-align: center;
+                }
+            data-icon-name="CaretSolidRight"
+            style={
+              Object {
+                "fontFamily": "\\"FabricMDL2Icons-8\\"",
               }
-          data-icon-name="CaretSolidRight"
-          style={
-            Object {
-              "fontFamily": "\\"FabricMDL2Icons-8\\"",
             }
+          >
+            
+          </i>
+        </span>
+      </button>
+      <div
+        hidden={true}
+        id="tooltip23"
+        style={
+          Object {
+            "border": 0,
+            "height": 1,
+            "margin": -1,
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": 1,
           }
-        >
-          
-        </i>
-      </span>
-    </button>
+        }
+      >
+        next page
+      </div>
+    </div>
     <div
       className=
           ms-TooltipHost
@@ -1078,7 +1174,7 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       </button>
       <div
         hidden={true}
-        id="tooltip24"
+        id="tooltip27"
         style={
           Object {
             "border": 0,