Replacing all buttons from console with mds (#2303)

Replaces buttons in console to start using MinIO Design System (mds)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/package.json

@@ -10,6 +10,7 @@
     "@mui/lab": "^5.0.0-alpha.83",
     "@mui/material": "^5.8.1",
     "@mui/styles": "^5.8.0",
+    "@mui/x-date-pickers": "^5.0.0",
     "@reduxjs/toolkit": "^1.8.1",
     "@types/lodash": "^4.14.149",
     "@types/minio": "^7.0.11",
@@ -29,6 +30,7 @@
     "kbar": "^0.1.0-beta.34",
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
+    "mds": "https://github.com/minio/mds.git#v0.0.2",
     "minio": "^7.0.28",
     "moment": "^2.29.4",
     "react": "^18.1.0",

portal-ui/src/StyleHandler.tsx

@@ -30,6 +30,7 @@ import { generateOverrideTheme } from "./utils/stylesUtils";
 import "./index.css";
 import { useSelector } from "react-redux";
 import { AppState } from "./store";
+import { ThemeHandler } from "mds";
 
 declare module "@mui/styles/defaultTheme" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -85,10 +86,6 @@ const StyleHandler = ({ children }: IStyleHandler) => {
           width: 16,
         },
       },
-      // You should target [class*="MuiButton-root"] instead if you nest themes.
-      ".MuiButton-root:not(.noDefaultHeight)": {
-        height: 38,
-      },
       ".MuiButton-contained": {
         fontSize: "14px",
         textTransform: "capitalize",
@@ -155,11 +152,14 @@ const StyleHandler = ({ children }: IStyleHandler) => {
     },
   })(() => null);
 
+  // ThemeHandler is needed for MDS components theming. Eventually we will remove Theme Provider & use only mds themes.
   return (
     <Fragment>
       <GlobalCss />
       <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={thm}>{children}</ThemeProvider>
+        <ThemeProvider theme={thm}>
+          <ThemeHandler>{children}</ThemeHandler>
+        </ThemeProvider>
       </StyledEngineProvider>
     </Fragment>
   );

portal-ui/src/screens/Console/Account/Account.tsx

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
+import { Button } from "mds";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
@@ -51,7 +52,7 @@ import {
   IAM_SCOPES,
 } from "../../../common/SecureComponent/permissions";
 import { SecureComponent } from "../../../common/SecureComponent";
-import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
+
 import { selectSAs } from "../Configurations/utils";
 import DeleteMultipleServiceAccounts from "../Users/DeleteMultipleServiceAccounts";
 import ServiceAccountPolicy from "./ServiceAccountPolicy";
@@ -59,6 +60,7 @@ import { setErrorSnackMessage, setSnackBarMessage } from "../../../systemSlice";
 import makeStyles from "@mui/styles/makeStyles";
 import { selFeatures } from "../consoleSlice";
 import { useAppDispatch } from "../../../store";
+import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 
 const DeleteServiceAccount = withSuspense(
   React.lazy(() => import("./DeleteServiceAccount"))
@@ -220,40 +222,41 @@ const Account = () => {
             }}
           >
             {" "}
-            <RBIconButton
+            <TooltipWrapper tooltip={"Delete Selected"}>
-              tooltip={"Delete Selected"}
+              <Button
-              onClick={() => {
+                id={"delete-selected-accounts"}
-                setDeleteMultipleOpen(true);
+                onClick={() => {
-              }}
+                  setDeleteMultipleOpen(true);
-              text={"Delete Selected"}
+                }}
-              icon={<DeleteIcon />}
+                label={"Delete Selected"}
-              color="secondary"
+                icon={<DeleteIcon />}
-              disabled={selectedSAs.length === 0}
+                disabled={selectedSAs.length === 0}
-              variant={"outlined"}
+                variant={"secondary"}
-            />
+              />
+            </TooltipWrapper>
             <SecureComponent
               scopes={[IAM_SCOPES.ADMIN_CREATE_USER]}
               resource={CONSOLE_UI_RESOURCE}
               matchAll
               errorProps={{ disabled: true }}
             >
-              <RBIconButton
+              <Button
+                id={"change-password"}
                 onClick={() => setChangePasswordModalOpen(true)}
-                text={`Change Password`}
+                label={`Change Password`}
                 icon={<PasswordKeyIcon />}
-                color={"primary"}
+                variant={"regular"}
-                variant={"outlined"}
                 disabled={userIDP}
               />
             </SecureComponent>
-            <RBIconButton
+            <Button
-              onClick={(e) => {
+              id={"create-service-account"}
+              onClick={() => {
                 navigate(`${IAM_PAGES.ACCOUNT_ADD}`);
               }}
-              text={`Create service account`}
+              label={`Create service account`}
               icon={<AddIcon />}
-              color={"primary"}
+              variant={"callAction"}
-              variant={"contained"}
             />
           </Box>
         </Grid>

portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx

@@ -17,6 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
@@ -24,7 +25,7 @@ import {
   modalStyleUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import Grid from "@mui/material/Grid";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
 import {
   IAMPoliciesIcon,
   PasswordKeyIcon,
@@ -287,17 +288,20 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
                   </Grid>
                   <Grid item xs={12} className={classes.modalButtonBar}>
                     <Button
+                      id={"clear"}
                       type="button"
-                      variant="outlined"
+                      variant="regular"
-                      color="primary"
                       onClick={resetForm}
-                    >
+                      label={"Clear"}
-                      Clear
+                    />
-                    </Button>
 
-                    <Button type="submit" variant="contained" color="primary">
+                    <Button
-                      Create
+                      id={"create-sa"}
-                    </Button>
+                      type="submit"
+                      variant="callAction"
+                      color="primary"
+                      label={"Create"}
+                    />
                   </Grid>
                 </Grid>
               </form>

portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx

@@ -15,14 +15,14 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-
+import { Button } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import Grid from "@mui/material/Grid";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import {
   containerForHeader,
   formFieldStyles,
@@ -193,8 +193,9 @@ const ChangePassword = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"save-password-modal"}
               type="submit"
-              variant="contained"
+              variant="callAction"
               color="primary"
               disabled={
                 loading ||
@@ -204,9 +205,8 @@ const ChangePassword = ({
                   reNewPassword.length > 0
                 )
               }
-            >
+              label="Save"
-              Save
+            />
-            </Button>
           </Grid>
           {loading && (
             <Grid item xs={12}>

portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx

@@ -15,14 +15,14 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-
+import { Button } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import Grid from "@mui/material/Grid";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import {
   containerForHeader,
   formFieldStyles,
@@ -156,16 +156,16 @@ const ChangeUserPassword = ({
           </Grid>
           <Grid item xs={12} className={classes.buttonContainer}>
             <Button
+              id={"save-user-password"}
               type="submit"
-              variant="contained"
+              variant="callAction"
               color="primary"
               disabled={
                 loading ||
                 !(reNewPassword.length > 0 && newPassword === reNewPassword)
               }
-            >
+              label={"Save"}
-              Save
+            />
-            </Button>
           </Grid>
           {loading && (
             <Grid item xs={12}>

portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useState } from "react";
 
-import { Button } from "@mui/material";
+import { Button } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -139,24 +139,23 @@ const ServiceAccountPolicy = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"cancel-sa-policy"}
               type="button"
-              variant="outlined"
+              variant="regular"
-              color="primary"
               onClick={() => {
                 closeModalAndRefresh();
               }}
               disabled={loading}
-            >
+              label={"Cancel"}
-              Cancel
+            />
-            </Button>
             <Button
+              id={"save-sa-policy"}
               type="submit"
-              variant="contained"
+              variant="callAction"
               color="primary"
               disabled={loading}
-            >
+              label={"Set"}
-              Set
+            />
-            </Button>
           </Grid>
         </Grid>
       </form>

portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx

@@ -18,8 +18,9 @@ import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
+import { Button } from "mds";
 import { Paper } from "@mui/material";
+import createStyles from "@mui/styles/createStyles";
 import { ErrorResponseHandler } from "../../../../common/types";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import api from "../../../../common/api";
@@ -41,11 +42,11 @@ import {
 } from "../../../../common/SecureComponent";
 
 import withSuspense from "../../Common/Components/withSuspense";
-import RBIconButton from "./SummaryItems/RBIconButton";
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import makeStyles from "@mui/styles/makeStyles";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 const AddAccessRuleModal = withSuspense(
   React.lazy(() => import("./AddAccessRule"))
@@ -203,16 +204,17 @@ const AccessRule = () => {
           matchAll
           errorProps={{ disabled: true }}
         >
-          <RBIconButton
+          <TooltipWrapper tooltip={"Add Access Rule"}>
-            tooltip={"Add Access Rule"}
+            <Button
-            onClick={() => {
+              id={"add-bucket-access-rule"}
-              setAddAccessRuleOpen(true);
+              onClick={() => {
-            }}
+                setAddAccessRuleOpen(true);
-            text={"Add Access Rule"}
+              }}
-            icon={<AddIcon />}
+              label={"Add Access Rule"}
-            color="primary"
+              icon={<AddIcon />}
-            variant={"contained"}
+              variant={"callAction"}
-          />
+            />
+          </TooltipWrapper>
         </SecureComponent>
       </Grid>
       <Paper className={classes.tableBlock}>

portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx

@@ -16,7 +16,8 @@
 
 import React, { useState } from "react";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import { Button, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
+import { Button } from "mds";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -121,22 +122,21 @@ const AddAccessRule = ({
         </Grid>
         <Grid item xs={12} className={classes.modalButtonBar}>
           <Button
+            id={"clear"}
             type="button"
-            color="primary"
+            variant="regular"
-            variant="outlined"
             onClick={resetForm}
-          >
+            label={"Clear"}
-            Clear
+          />
-          </Button>
+
           <Button
+            id={"add-access-save"}
             type="submit"
-            variant="contained"
+            variant="callAction"
-            color="primary"
             disabled={prefix.trim() === ""}
             onClick={createProcess}
-          >
+            label={"Save"}
-            Save
+          />
-          </Button>
         </Grid>
       </Grid>
     </ModalWrapper>

portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx

@@ -15,8 +15,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-
+import { Button } from "mds";
-import { Button, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -127,24 +127,23 @@ const AddBucketTagModal = ({
         </Grid>
         <Grid item xs={12} className={classes.modalButtonBar}>
           <Button
+            id={"clear"}
             type="button"
-            variant="outlined"
+            variant="regular"
-            color="primary"
             onClick={resetForm}
-          >
+            label={"Clear"}
-            Clear
+          />
-          </Button>
           <Button
+            id={"save-add-bucket-tag"}
             type="submit"
-            variant="contained"
+            variant="callAction"
             color="primary"
             disabled={
               newLabel.trim() === "" || newKey.trim() === "" || isSending
             }
             onClick={addTagProcess}
-          >
+            label={"Save"}
-            Save
+          />
-          </Button>
         </Grid>
       </Grid>
     </ModalWrapper>

portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx

@@ -17,7 +17,7 @@
 import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
 
 import Grid from "@mui/material/Grid";
-import { Button } from "@mui/material";
+import { Button } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -247,24 +247,22 @@ const AddEvent = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"cancel-add-event"}
               type="button"
-              variant="outlined"
+              variant="regular"
-              color="primary"
               disabled={addLoading}
               onClick={() => {
                 closeModalAndRefresh();
               }}
-            >
+              label={"Cancel"}
-              Cancel
+            />
-            </Button>
             <Button
+              id={"save-event"}
               type="submit"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               disabled={addLoading}
-            >
+              label={"Save"}
-              Save
+            />
-            </Button>
           </Grid>
         </Grid>
       </form>

portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx

@@ -16,6 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
+import { Button } from "mds";
 import { useSelector } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -24,7 +25,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Button,
   LinearProgress,
   SelectChangeEvent,
   Typography,
@@ -403,24 +403,23 @@ const AddLifecycleModal = ({
             </Grid>
             <Grid item xs={12} className={classes.modalButtonBar}>
               <Button
+                id={"reset"}
                 type="button"
-                variant="outlined"
+                variant="regular"
-                color="primary"
                 disabled={addLoading}
                 onClick={() => {
                   closeModalAndRefresh(false);
                 }}
-              >
+                label={"Cancel"}
-                Cancel
+              />
-              </Button>
               <Button
+                id={"save-lifecycle"}
                 type="submit"
-                variant="contained"
+                variant="callAction"
                 color="primary"
                 disabled={addLoading || !isFormValid}
-              >
+                label={"Save"}
-                Save
+              />
-              </Button>
             </Grid>
             {addLoading && (
               <Grid item xs={12}>

portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx

@@ -16,9 +16,10 @@
 
 import React, { useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, SelectChangeEvent } from "@mui/material";
+import { SelectChangeEvent } from "@mui/material";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
 import {
@@ -451,24 +452,23 @@ const AddReplicationModal = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"cancel"}
               type="button"
-              variant="outlined"
+              variant="regular"
-              color="primary"
               disabled={addLoading}
               onClick={() => {
                 closeModalAndRefresh();
               }}
-            >
+              label={"Cancel"}
-              Cancel
+            />
-            </Button>
             <Button
+              id={"submit"}
               type="submit"
-              variant="contained"
+              variant="callAction"
               color="primary"
               disabled={addLoading}
-            >
+              label={"Save"}
-              Save
+            />
-            </Button>
           </Grid>
         </Grid>
       </form>

portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx

@@ -20,7 +20,7 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid } from "@mui/material";
 import { AppState, useAppDispatch } from "../../../../store";
 import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
 
@@ -44,6 +44,8 @@ import {
 import SearchBox from "../../Common/SearchBox";
 import { selFeatures } from "../../consoleSlice";
 import AutoColorIcon from "../../Common/Components/AutoColorIcon";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import { Button } from "mds";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -127,17 +129,22 @@ const BrowserHandler = () => {
               resource={bucketName}
               errorProps={{ disabled: true }}
             >
-              <Tooltip title={"Configure Bucket"}>
+              <TooltipWrapper tooltip={"Configure Bucket"}>
-                <IconButton
+                <Button
+                  id={"configure-bucket-main"}
                   color="primary"
                   aria-label="Configure Bucket"
-                  component="span"
                   onClick={openBucketConfiguration}
-                  size="large"
+                  icon={
-                >
+                    <SettingsIcon
-                  <SettingsIcon />
+                      style={{ width: 20, height: 20, marginTop: -3 }}
-                </IconButton>
+                    />
-              </Tooltip>
+                  }
+                  style={{
+                    padding: "0 10px",
+                  }}
+                />
+              </TooltipWrapper>
             </SecureComponent>
           }
           middleComponent={searchBar}

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx

@@ -23,6 +23,7 @@ import {
   useNavigate,
   useParams,
 } from "react-router-dom";
+import { Button } from "mds";
 import { useSelector } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -41,7 +42,7 @@ import { ErrorResponseHandler } from "../../../../common/types";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 
 import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box } from "@mui/material";
 
 import RefreshIcon from "../../../../icons/RefreshIcon";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
@@ -54,7 +55,6 @@ import {
 } from "../../../../common/SecureComponent";
 
 import withSuspense from "../../Common/Components/withSuspense";
-import RBIconButton from "./SummaryItems/RBIconButton";
 import { TrashIcon } from "../../../../icons";
 import {
   selDistSet,
@@ -68,6 +68,7 @@ import {
   setBucketInfo,
 } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 const BucketsIcon = React.lazy(() => import("../../../../icons/BucketsIcon"));
 const FolderIcon = React.lazy(() => import("../../../../icons/FolderIcon"));
@@ -208,19 +209,19 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
       <PageHeader
         label={<BackLink to={"/buckets"} label={"Buckets"} />}
         actions={
-          <Fragment>
+          <TooltipWrapper tooltip={"Browse Bucket"}>
-            <Tooltip title={"Browse Bucket"}>
+            <Button
-              <IconButton
+              id={"switch-browse-view"}
-                color="primary"
+              aria-label="Browse Bucket"
-                aria-label="Browse Bucket"
+              onClick={openBucketBrowser}
-                component="span"
+              icon={
-                onClick={openBucketBrowser}
+                <FolderIcon style={{ width: 20, height: 20, marginTop: -3 }} />
-                size="large"
+              }
-              >
+              style={{
-                <FolderIcon />
+                padding: "0 10px",
-              </IconButton>
+              }}
-            </Tooltip>
+            />
-          </Fragment>
+          </TooltipWrapper>
         }
       />
       <PageLayout className={classes.pageContainer}>
@@ -259,24 +260,25 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
                   resource={bucketName}
                   errorProps={{ disabled: true }}
                 >
-                  <RBIconButton
+                  <TooltipWrapper tooltip={"Delete Bucket"}>
-                    tooltip={"Delete Bucket"}
+                    <Button
-                    onClick={() => {
+                      id={"delete-bucket-button"}
-                      setDeleteOpen(true);
+                      onClick={() => {
-                    }}
+                        setDeleteOpen(true);
-                    text={"Delete Bucket"}
+                      }}
-                    icon={<TrashIcon />}
+                      label={"Delete Bucket"}
-                    color={"secondary"}
+                      icon={<TrashIcon />}
-                    variant={"outlined"}
+                      variant={"secondary"}
-                  />
+                    />
+                  </TooltipWrapper>
                 </SecureComponent>
-                <RBIconButton
+                <Button
+                  id={"refresh-bucket-info"}
                   onClick={() => {
                     dispatch(setBucketDetailsLoad(true));
                   }}
-                  text={`Refresh`}
+                  label={"Refresh"}
                   icon={<RefreshIcon />}
-                  color={"primary"}
                 />
               </Fragment>
             }

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx

@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import get from "lodash/get";
@@ -42,10 +43,10 @@ import {
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 
 import withSuspense from "../../Common/Components/withSuspense";
-import RBIconButton from "./SummaryItems/RBIconButton";
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 const DeleteEvent = withSuspense(React.lazy(() => import("./DeleteEvent")));
 const AddEvent = withSuspense(React.lazy(() => import("./AddEvent")));
@@ -160,16 +161,17 @@ const BucketEventsPanel = ({ classes }: IBucketEventsProps) => {
             matchAll
             errorProps={{ disabled: true }}
           >
-            <RBIconButton
+            <TooltipWrapper tooltip={"Subscribe to Event"}>
-              tooltip={"Subscribe to Event"}
+              <Button
-              onClick={() => {
+                id={"Subscribe-bucket-event"}
-                setAddEventScreenOpen(true);
+                onClick={() => {
-              }}
+                  setAddEventScreenOpen(true);
-              text={"Subscribe to Event"}
+                }}
-              icon={<AddIcon />}
+                label={"Subscribe to Event"}
-              color="primary"
+                icon={<AddIcon />}
-              variant={"contained"}
+                variant={"callAction"}
-            />
+              />
+            </TooltipWrapper>
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx

@@ -39,10 +39,11 @@ import {
   SecureComponent,
 } from "../../../../common/SecureComponent";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
-import RBIconButton from "./SummaryItems/RBIconButton";
 import DeleteBucketLifecycleRule from "./DeleteBucketLifecycleRule";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useParams } from "react-router-dom";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import { Button } from "mds";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -282,16 +283,17 @@ const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
             matchAll
             errorProps={{ disabled: true }}
           >
-            <RBIconButton
+            <TooltipWrapper tooltip={"Add Lifecycle Rule"}>
-              tooltip={"Add Lifecycle Rule"}
+              <Button
-              onClick={() => {
+                id={"add-bucket-lifecycle-rule"}
-                setAddLifecycleOpen(true);
+                onClick={() => {
-              }}
+                  setAddLifecycleOpen(true);
-              text={"Add Lifecycle Rule"}
+                }}
-              icon={<AddIcon />}
+                label={"Add Lifecycle Rule"}
-              color="primary"
+                icon={<AddIcon />}
-              variant={"contained"}
+                variant={"callAction"}
-            />
+              />
+            </TooltipWrapper>
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx

@@ -17,6 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
@@ -42,12 +43,12 @@ import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import HelpBox from "../../../../common/HelpBox";
 import PanelTitle from "../../Common/PanelTitle/PanelTitle";
 import withSuspense from "../../Common/Components/withSuspense";
-import RBIconButton from "./SummaryItems/RBIconButton";
 import EditReplicationModal from "./EditReplicationModal";
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useParams } from "react-router-dom";
 import { useAppDispatch } from "../../../../store";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 const AddReplicationModal = withSuspense(
   React.lazy(() => import("./AddReplicationModal"))
@@ -250,24 +251,26 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
       <Grid container>
         <Grid item xs={12} className={classes.actionsTray}>
           <PanelTitle>Replication</PanelTitle>
-          <div>
+          <div style={{ display: "flex" }}>
             <SecureComponent
               scopes={[IAM_SCOPES.S3_PUT_REPLICATION_CONFIGURATION]}
               resource={bucketName}
               matchAll
               errorProps={{ disabled: true }}
             >
-              <RBIconButton
+              <TooltipWrapper tooltip={"Remove Selected Replication Rules"}>
-                tooltip={"Remove Selected Replication Rules"}
+                <Button
-                onClick={() => {
+                  id={"remove-bucket-replication-rule"}
-                  confirmDeleteSelectedReplicationRules();
+                  onClick={() => {
-                }}
+                    confirmDeleteSelectedReplicationRules();
-                text={"Remove Selected Rules"}
+                  }}
-                icon={<TrashIcon />}
+                  label={"Remove Selected Rules"}
-                color={"secondary"}
+                  icon={<TrashIcon />}
-                variant={"outlined"}
+                  color={"secondary"}
-                disabled={selectedRepRules.length === 0}
+                  disabled={selectedRepRules.length === 0}
-              />
+                  variant={"secondary"}
+                />
+              </TooltipWrapper>
             </SecureComponent>
             <SecureComponent
               scopes={[IAM_SCOPES.S3_PUT_REPLICATION_CONFIGURATION]}
@@ -275,16 +278,17 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
               matchAll
               errorProps={{ disabled: true }}
             >
-              <RBIconButton
+              <TooltipWrapper tooltip={"Add Replication Rule"}>
-                tooltip={"Add Replication Rule"}
+                <Button
-                onClick={() => {
+                  id={"add-bucket-replication-rule"}
-                  setOpenReplicationOpen(true);
+                  onClick={() => {
-                }}
+                    setOpenReplicationOpen(true);
-                text={"Add Replication Rule"}
+                  }}
-                icon={<AddIcon />}
+                  label={"Add Replication Rule"}
-                color="primary"
+                  icon={<AddIcon />}
-                variant={"contained"}
+                  variant={"callAction"}
-              />
+                />
+              </TooltipWrapper>
             </SecureComponent>
           </div>
         </Grid>

portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx

@@ -16,8 +16,9 @@
 
 import React, { useState } from "react";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import { Button, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
@@ -107,21 +108,19 @@ const EditAccessRule = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"clear"}
               type="button"
-              color="primary"
+              variant="regular"
-              variant="outlined"
               onClick={resetForm}
-            >
+              label={"Clear"}
-              Clear
+            />
-            </Button>
             <Button
+              id={"save"}
               type="submit"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               onClick={createProcess}
-            >
+              label={"Save"}
-              Save
+            />
-            </Button>
           </Grid>
         </Grid>
       </ModalWrapper>

portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx

@@ -19,12 +19,12 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Button,
   LinearProgress,
   SelectChangeEvent,
   Typography,
 } from "@mui/material";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
 import createStyles from "@mui/styles/createStyles";
@@ -542,24 +542,23 @@ const EditLifecycleConfiguration = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"cancel"}
               type="button"
-              variant="outlined"
+              variant="regular"
-              color="primary"
               disabled={addLoading}
               onClick={() => {
                 closeModalAndRefresh(false);
               }}
-            >
+              label={"Cancel"}
-              Cancel
+            />
-            </Button>
             <Button
+              id={"save"}
               type="submit"
-              variant="contained"
+              variant="callAction"
               color="primary"
               disabled={addLoading || !isFormValid}
-            >
+              label={"Save"}
-              Save
+            />
-            </Button>
           </Grid>
           {addLoading && (
             <Grid item xs={12}>

portal-ui/src/screens/Console/Buckets/BucketDetails/EditReplicationModal.tsx

@@ -17,7 +17,7 @@
 import React, { useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
-import { Button } from "@mui/material";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -321,24 +321,22 @@ const EditReplicationModal = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"cancel-edit-replication"}
               type="button"
-              variant="outlined"
+              variant="regular"
-              color="primary"
               disabled={editLoading || saveEdit}
               onClick={() => {
                 closeModalAndRefresh(false);
               }}
-            >
+              label={"Cancel"}
-              Cancel
+            />
-            </Button>
             <Button
+              id={"save-replication"}
               type="submit"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               disabled={editLoading || saveEdit}
-            >
+              label={"Save"}
-              Save
+            />
-            </Button>
           </Grid>
         </Grid>
       </form>

portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx

@@ -16,7 +16,8 @@
 
 import React, { useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
+import { LinearProgress, SelectChangeEvent } from "@mui/material";
+import { Button } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -166,24 +167,22 @@ const EnableBucketEncryption = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"cancel"}
               type="submit"
-              variant="outlined"
+              variant="regular"
-              color="primary"
               onClick={() => {
                 closeModalAndRefresh();
               }}
               disabled={loading}
-            >
+              label={"Cancel"}
-              Cancel
+            />
-            </Button>
             <Button
+              id={"save"}
               type="submit"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               disabled={loading}
-            >
+              label={"Save"}
-              Save
+            />
-            </Button>
           </Grid>
           {loading && (
             <Grid item xs={12}>

portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx

@@ -15,8 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
@@ -190,25 +191,23 @@ const EnableQuota = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"cancel"}
               type="button"
-              variant="outlined"
+              variant="regular"
-              color="primary"
               disabled={loading}
               onClick={() => {
                 closeModalAndRefresh();
               }}
-            >
+              label={"Cancel"}
-              Cancel
+            />
-            </Button>
 
             <Button
+              id={"save"}
               type="submit"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               disabled={loading || !validInput}
-            >
+              label={"Save"}
-              Save
+            />
-            </Button>
           </Grid>
           {loading && (
             <Grid item xs={12}>

portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx

@@ -70,8 +70,7 @@ const EnableVersioningModal = ({
       titleIcon={<ConfirmModalIcon />}
       onConfirm={enableVersioning}
       confirmButtonProps={{
-        color: "primary",
+        variant: "callAction",
-        variant: "contained",
       }}
       onClose={() => {
         closeVersioningModalAndRefresh(false);

portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx

@@ -15,8 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import { Button, SelectChangeEvent } from "@mui/material";
+import { SelectChangeEvent } from "@mui/material";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
@@ -157,26 +158,24 @@ const SetAccessPolicy = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"cancel"}
               type="button"
-              variant="outlined"
+              variant="regular"
-              color="primary"
               onClick={() => {
                 closeModalAndRefresh();
               }}
               disabled={addLoading}
-            >
+              label={"Cancel"}
-              Cancel
+            />
-            </Button>
             <Button
+              id={"set"}
               type="submit"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               disabled={
                 addLoading || (accessPolicy === "CUSTOM" && !policyDefinition)
               }
-            >
+              label={"Set"}
-              Set
+            />
-            </Button>
           </Grid>
         </Grid>
       </form>

portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx

@@ -15,8 +15,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-
+import { Button } from "mds";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -184,24 +184,23 @@ const SetRetentionConfig = ({
             </Grid>
             <Grid item xs={12} className={classes.modalButtonBar}>
               <Button
+                id={"cancel"}
                 type="button"
-                variant="outlined"
+                variant="regular"
-                color="primary"
                 disabled={addLoading}
                 onClick={() => {
                   closeModalAndRefresh();
                 }}
-              >
+                label={"Cancel"}
-                Cancel
+              />
-              </Button>
               <Button
+                id={"set"}
                 type="submit"
-                variant="contained"
+                variant="callAction"
                 color="primary"
                 disabled={addLoading || !valid}
-              >
+                label={"Set"}
-                Set
+              />
-              </Button>
             </Grid>
             {addLoading && (
               <Grid item xs={12}>

portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx

@@ -25,6 +25,8 @@ type ActionLinkProps = {
   label: any;
   [x: string]: any;
 };
+
+// TODO: Create an mds version of this.
 const ActionLink = ({
   isLoading,
   onClick,

portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx

@@ -1,119 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2022 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import React, { Fragment } from "react";
-import BoxIconButton from "../../../Common/BoxIconButton/BoxIconButton";
-import { IconButtonProps } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import { Theme } from "@mui/material/styles";
-
-type DeleteButtonProps = {
-  onClick: (e: any) => void;
-  text?: string;
-  disabled?: boolean;
-  size?: string;
-  tooltip?: string;
-  classes?: any;
-  icon?: React.ReactNode;
-  showLabelAlways?: boolean;
-  [x: string]: any;
-};
-
-type RBIconProps = Partial<IconButtonProps> & DeleteButtonProps;
-
-const useStyles = makeStyles((theme: Theme) => {
-  const getButtonColor = (props: RBIconProps) => {
-    const { variant, color } = props;
-
-    let tgtColor = theme.palette.primary.main;
-
-    if (color === "primary" && variant === "contained") {
-      tgtColor = theme.palette.primary.contrastText;
-    } else if (color === "primary" && variant === "outlined") {
-      tgtColor = theme.palette.primary.main;
-    } else if (color === "secondary") {
-      tgtColor = theme.palette.secondary.main;
-    }
-
-    return tgtColor;
-  };
-
-  return {
-    root: {
-      padding: "7px",
-      color: (props: RBIconProps) => getButtonColor(props),
-      borderColor: (props: RBIconProps) =>
-        props.color === "secondary"
-          ? theme.palette.secondary.main
-          : theme.palette.primary.main,
-      "& svg.min-icon": {
-        width: 12,
-        marginLeft: (props: RBIconProps) => (props.text ? "5px" : "0px"),
-        "@media (max-width: 900px)": {
-          width: 16,
-          marginLeft: "0px !important",
-        },
-      },
-    },
-  };
-});
-
-const RBIconButton = (props: RBIconProps) => {
-  const classes = useStyles(props);
-
-  const {
-    onClick,
-    text = "",
-    disabled = false,
-    tooltip,
-    icon = null,
-    className = "",
-    showLabelAlways = false,
-    ...restProps
-  } = props;
-
-  return (
-    <BoxIconButton
-      className={className}
-      classes={classes}
-      tooltip={tooltip || text}
-      variant="outlined"
-      onClick={onClick}
-      disabled={disabled}
-      size="medium"
-      sx={{
-        "& span": {
-          fontSize: 14,
-          "@media (max-width: 900px)": {
-            "&:not(.MuiBadge-root, .MuiBadge-badge)": {
-              display: showLabelAlways ? "inline" : "none",
-              marginRight: showLabelAlways ? "7px" : "",
-            },
-          },
-        },
-      }}
-      {...restProps}
-    >
-      {text !== "" && (
-        <Fragment>
-          <span>{text}</span>
-        </Fragment>
-      )}
-      {icon}
-    </BoxIconButton>
-  );
-};
-export default RBIconButton;

portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx

@@ -16,9 +16,10 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { containerForHeader } from "../../../Common/FormComponents/common/styleLibrary";
@@ -63,8 +64,9 @@ const styles = (theme: Theme) =>
   createStyles({
     buttonContainer: {
       marginTop: 24,
-      textAlign: "right",
+      display: "flex",
-      "& .MuiButton-root": {
+      justifyContent: "flex-end",
+      "& button": {
         marginLeft: 8,
       },
     },
@@ -461,21 +463,21 @@ const AddBucket = ({ classes }: IsetProps) => {
             </Grid>
             <Grid item xs={12} className={classes.buttonContainer}>
               <Button
+                id={"clear"}
                 type="button"
-                variant={"outlined"}
+                variant={"regular"}
                 className={classes.clearButton}
                 onClick={resForm}
-              >
+                label={"Clear"}
-                Clear
+              />
-              </Button>
               <Button
+                id={"create-bucket"}
                 type="submit"
-                variant="contained"
+                variant="callAction"
                 color="primary"
                 disabled={addLoading || invalidFields.length > 0 || hasErrors}
-              >
+                label={"Create Bucket"}
-                Create Bucket
+              />
-              </Button>
             </Grid>
             {addLoading && (
               <Grid item xs={12}>

portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx

@@ -16,6 +16,7 @@
 import React, { Fragment } from "react";
 import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
@@ -39,8 +40,8 @@ import {
   IAM_ROLES,
 } from "../../../../common/SecureComponent/permissions";
 import { SecureComponent } from "../../../../common/SecureComponent";
-import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
 import clsx from "clsx";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -53,7 +54,6 @@ const styles = (theme: Theme) =>
       "& .min-icon": {
         height: 14,
         width: 14,
-        marginRight: 4,
       },
       "& .MuiTypography-body2": {
         fontSize: 14,
@@ -151,6 +151,10 @@ const styles = (theme: Theme) =>
       alignItems: "center",
       justifyContent: "flex-end",
 
+      "& button": {
+        marginLeft: 8,
+      },
+
       "@media (max-width: 900px)": {
         marginTop: "-33px",
       },
@@ -245,26 +249,28 @@ const BucketListItem = ({
                 scopes={IAM_PERMISSIONS[IAM_ROLES.BUCKET_ADMIN]}
                 resource={bucket.name}
               >
-                <RBIconButton
+                <TooltipWrapper tooltip={"Manage"}>
-                  tooltip={"Manage"}
+                  <Button
-                  onClick={() => navigate(`/buckets/${bucket.name}/admin`)}
+                    onClick={() => navigate(`/buckets/${bucket.name}/admin`)}
-                  text={"Manage"}
+                    label={"Manage"}
-                  icon={<SettingsIcon />}
+                    icon={<SettingsIcon />}
-                  color={"primary"}
+                    color={"primary"}
-                  variant={"outlined"}
+                    variant={"regular"}
-                  id={`manage-${bucket.name}`}
+                    id={`manage-${bucket.name}`}
-                />
+                  />
+                </TooltipWrapper>
               </SecureComponent>
             )}
-            <RBIconButton
+            <TooltipWrapper tooltip={"Browse"}>
-              tooltip={"Browse"}
+              <Button
-              onClick={() => navigate(`/buckets/${bucket.name}/browse`)}
+                onClick={() => navigate(`/buckets/${bucket.name}/browse`)}
-              text={"Browse"}
+                label={"Browse"}
-              icon={<ArrowRightIcon />}
+                icon={<ArrowRightIcon />}
-              color={"primary"}
+                color={"primary"}
-              variant={"contained"}
+                variant={"callAction"}
-              id={`browse-${bucket.name}`}
+                id={`browse-${bucket.name}`}
-            />
+              />
+            </TooltipWrapper>
             <Box display={{ xs: "none", sm: "block" }}>
               <div style={{ marginBottom: 10 }} />
             </Box>

portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx

@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
 
 import { useNavigate } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { LinearProgress } from "@mui/material";
@@ -40,7 +41,6 @@ import BucketListItem from "./BucketListItem";
 import BulkReplicationModal from "./BulkReplicationModal";
 import HelpBox from "../../../../common/HelpBox";
 import RefreshIcon from "../../../../icons/RefreshIcon";
-import AButton from "../../Common/AButton/AButton";
 import MultipleBucketsIcon from "../../../../icons/MultipleBucketsIcon";
 import SelectMultipleIcon from "../../../../icons/SelectMultipleIcon";
 import { SecureComponent } from "../../../../common/SecureComponent";
@@ -52,7 +52,6 @@ import {
 import PageLayout from "../../Common/Layout/PageLayout";
 import SearchBox from "../../Common/SearchBox";
 import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
-import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
 import BulkLifecycleModal from "./BulkLifecycleModal";
 import hasPermission from "../../../../common/SecureComponent/accessControl";
 import { setErrorSnackMessage } from "../../../../systemSlice";
@@ -60,6 +59,8 @@ import { useAppDispatch } from "../../../../store";
 import { useSelector } from "react-redux";
 import { selFeatures } from "../../consoleSlice";
 import AutoColorIcon from "../../Common/Components/AutoColorIcon";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import AButton from "../../Common/AButton/AButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -239,87 +240,97 @@ const ListBuckets = ({ classes }: IListBucketsProps) => {
             display={"flex"}
             alignItems={"center"}
             justifyContent={"flex-end"}
+            sx={{
+              "& button": {
+                marginLeft: "8px",
+              },
+            }}
           >
             {!obOnly && (
               <Fragment>
-                <RBIconButton
+                <TooltipWrapper
                   tooltip={
                     bulkSelect ? "Unselect Buckets" : "Select Multiple Buckets"
                   }
-                  onClick={() => {
+                >
-                    setBulkSelect(!bulkSelect);
+                  <Button
-                    setSelectedBuckets([]);
+                    id={"multiple-bucket-seection"}
-                  }}
+                    onClick={() => {
-                  text={""}
+                      setBulkSelect(!bulkSelect);
-                  icon={<SelectMultipleIcon />}
+                      setSelectedBuckets([]);
-                  color={"primary"}
+                    }}
-                  variant={bulkSelect ? "contained" : "outlined"}
+                    icon={<SelectMultipleIcon />}
-                />
+                    variant={bulkSelect ? "callAction" : "regular"}
+                  />
+                </TooltipWrapper>
 
                 {bulkSelect && (
-                  <RBIconButton
+                  <TooltipWrapper
                     tooltip={
                       selectedBuckets.length === filteredRecords.length
                         ? "Unselect All Buckets"
                         : "Select All Buckets"
                     }
-                    onClick={selectAllBuckets}
+                  >
-                    text={""}
+                    <Button
-                    icon={<SelectAllIcon />}
+                      id={"select-all-buckets"}
-                    color={"primary"}
+                      onClick={selectAllBuckets}
-                    variant={"outlined"}
+                      icon={<SelectAllIcon />}
-                  />
+                      variant={"regular"}
+                    />
+                  </TooltipWrapper>
                 )}
 
-                <RBIconButton
+                <TooltipWrapper tooltip={"Set Lifecycle"}>
-                  tooltip={"Set Lifecycle"}
+                  <Button
-                  onClick={() => {
+                    id={"set-lifecycle"}
-                    setLifecycleModalOpen(true);
+                    onClick={() => {
-                  }}
+                      setLifecycleModalOpen(true);
-                  text={""}
+                    }}
-                  icon={<LifecycleConfigIcon />}
+                    icon={<LifecycleConfigIcon />}
-                  disabled={selectedBuckets.length === 0}
+                    variant={"regular"}
-                  color={"primary"}
+                    disabled={selectedBuckets.length === 0}
-                  variant={"outlined"}
+                  />
-                />
+                </TooltipWrapper>
 
-                <RBIconButton
+                <TooltipWrapper tooltip={"Set Replication"}>
-                  tooltip={"Set Replication"}
+                  <Button
-                  onClick={() => {
+                    id={"set-replication"}
-                    setReplicationModalOpen(true);
+                    onClick={() => {
-                  }}
+                      setReplicationModalOpen(true);
-                  text={""}
+                    }}
-                  icon={<MultipleBucketsIcon />}
+                    icon={<MultipleBucketsIcon />}
-                  disabled={selectedBuckets.length === 0}
+                    variant={"regular"}
-                  color={"primary"}
+                    disabled={selectedBuckets.length === 0}
-                  variant={"outlined"}
+                  />
-                />
+                </TooltipWrapper>
               </Fragment>
             )}
 
-            <RBIconButton
+            <TooltipWrapper tooltip={"Refresh"}>
-              tooltip={"Refresh"}
+              <Button
-              onClick={() => {
+                id={"refresh-buckets"}
-                setLoading(true);
+                onClick={() => {
-              }}
+                  setLoading(true);
-              text={""}
+                }}
-              icon={<RefreshIcon />}
+                icon={<RefreshIcon />}
-              color={"primary"}
+                variant={"regular"}
-              variant={"outlined"}
+              />
-            />
+            </TooltipWrapper>
 
             {!obOnly && (
-              <RBIconButton
+              <TooltipWrapper tooltip={"Create Bucket"}>
-                tooltip={"Create Bucket"}
+                <Button
-                onClick={() => {
+                  id={"create-bucket"}
-                  navigate(IAM_PAGES.ADD_BUCKETS);
+                  onClick={() => {
-                }}
+                    navigate(IAM_PAGES.ADD_BUCKETS);
-                text={"Create Bucket"}
+                  }}
-                icon={<AddIcon />}
+                  icon={<AddIcon />}
-                color={"primary"}
+                  variant={"callAction"}
-                variant={"contained"}
+                  disabled={!canCreateBucket}
-                disabled={!canCreateBucket}
+                  label={"Create Bucket"}
-              />
+                />
+              </TooltipWrapper>
             )}
           </Grid>
         </Grid>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreatePathModal.tsx

@@ -16,8 +16,9 @@
 
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { Button } from "mds";
 import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
-import { Button, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -168,22 +169,21 @@ const CreatePathModal = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"clear"}
               type="button"
               color="primary"
-              variant="outlined"
+              variant="regular"
               onClick={resetForm}
-            >
+              label={"Clear"}
-              Clear
+            />
-            </Button>
             <Button
+              id={"create"}
               type="submit"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               disabled={!isFormValid}
               onClick={createProcess}
-            >
+              label={"Create"}
-              Create
+            />
-            </Button>
           </Grid>
         </Grid>
       </ModalWrapper>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/InspectObject.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-
+import { Button } from "mds";
 import withStyles from "@mui/styles/withStyles";
 import {
   decodeURLString,
@@ -27,7 +27,6 @@ import {
 import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
 import { InspectMenuIcon } from "../../../../../../icons/SidebarMenus";
-import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -156,13 +155,13 @@ const InspectObject = ({
             />
             <Grid item xs={12} className={classes.modalButtonBar}>
               <Button
+                id={"inspect"}
                 type="submit"
-                variant="contained"
+                variant="callAction"
                 color="primary"
                 onClick={performInspect}
-              >
+                label={"Inspect"}
-                Inspect
+              />
-              </Button>
             </Grid>
           </form>
         </ModalWrapper>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -26,6 +26,7 @@ import { useSelector } from "react-redux";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useDropzone } from "react-dropzone";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import Grid from "@mui/material/Grid";
 import get from "lodash/get";
@@ -86,7 +87,6 @@ import {
 import UploadFilesButton from "../../UploadFilesButton";
 import DetailsListPanel from "./DetailsListPanel";
 import ObjectDetailPanel from "./ObjectDetailPanel";
-import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
 import ActionsListSection from "./ActionsListSection";
 import { listModeColumns, rewindModeColumns } from "./ListObjectsHelpers";
 import VersionsNavigator from "../ObjectDetails/VersionsNavigator";
@@ -128,6 +128,7 @@ import {
 } from "../../../BucketDetails/bucketDetailsSlice";
 import RenameLongFileName from "../../../../ObjectBrowser/RenameLongFilename";
 import { selFeatures } from "../../../../consoleSlice";
+import TooltipWrapper from "../../../../Common/TooltipWrapper/TooltipWrapper";
 
 const HistoryIcon = React.lazy(
   () => import("../../../../../../icons/HistoryIcon")
@@ -1396,58 +1397,60 @@ const ListObjects = () => {
             actions={
               <Fragment>
                 <div className={classes.actionsSection}>
-                  <RBIconButton
+                  <TooltipWrapper tooltip={"Rewind Bucket"}>
-                    id={"rewind-objects-list"}
+                    <Button
-                    tooltip={"Rewind Bucket"}
+                      id={"rewind-objects-list"}
-                    text={"Rewind"}
+                      label={"Rewind"}
-                    icon={
+                      icon={
-                      <Badge
+                        <Badge
-                        badgeContent=" "
+                          badgeContent=" "
-                        color="secondary"
+                          color="secondary"
-                        variant="dot"
+                          variant="dot"
-                        invisible={!rewindEnabled}
+                          invisible={!rewindEnabled}
-                        className={classes.badgeOverlap}
+                          className={classes.badgeOverlap}
-                        sx={{ height: 16 }}
+                          sx={{ height: 16 }}
-                      >
+                        >
-                        <HistoryIcon
+                          <HistoryIcon
-                          style={{
+                            style={{
-                            minWidth: 16,
+                              minWidth: 16,
-                            minHeight: 16,
+                              minHeight: 16,
-                            width: 16,
+                              width: 16,
-                            height: 16,
+                              height: 16,
-                          }}
+                              marginTop: -3,
-                        />
+                            }}
-                      </Badge>
+                          />
-                    }
+                        </Badge>
-                    color="primary"
-                    variant={"outlined"}
-                    onClick={() => {
-                      setRewindSelect(true);
-                    }}
-                    disabled={
-                      !isVersioned ||
-                      !hasPermission(bucketName, [IAM_SCOPES.S3_GET_OBJECT])
-                    }
-                  />
-                  <RBIconButton
-                    id={"refresh-objects-list"}
-                    tooltip={"Reload List"}
-                    text={"Refresh"}
-                    icon={<RefreshIcon />}
-                    color="primary"
-                    variant={"outlined"}
-                    onClick={() => {
-                      if (versionsMode) {
-                        dispatch(setLoadingVersions(true));
-                      } else {
-                        dispatch(setLoadingObjectsList(true));
                       }
-                    }}
+                      variant={"regular"}
-                    disabled={
+                      onClick={() => {
-                      !hasPermission(bucketName, [IAM_SCOPES.S3_LIST_BUCKET]) ||
+                        setRewindSelect(true);
-                      rewindEnabled
+                      }}
-                    }
+                      disabled={
-                  />
+                        !isVersioned ||
+                        !hasPermission(bucketName, [IAM_SCOPES.S3_GET_OBJECT])
+                      }
+                    />
+                  </TooltipWrapper>
+                  <TooltipWrapper tooltip={"Reload List"}>
+                    <Button
+                      id={"refresh-objects-list"}
+                      label={"Refresh"}
+                      icon={<RefreshIcon />}
+                      variant={"regular"}
+                      onClick={() => {
+                        if (versionsMode) {
+                          dispatch(setLoadingVersions(true));
+                        } else {
+                          dispatch(setLoadingObjectsList(true));
+                        }
+                      }}
+                      disabled={
+                        !hasPermission(bucketName, [
+                          IAM_SCOPES.S3_LIST_BUCKET,
+                        ]) || rewindEnabled
+                      }
+                    />
+                  </TooltipWrapper>
                   <input
                     type="file"
                     multiple

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectActionButton.tsx

@@ -55,6 +55,7 @@ const styles = (theme: Theme) =>
     },
   });
 
+// TODO: Create an mds version of this.
 const ObjectActionButton = ({
   disabled,
   onClick,

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx

@@ -16,8 +16,9 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
 import { withStyles } from "@mui/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
@@ -620,7 +621,7 @@ const ObjectDetailPanel = ({
             items={multiActionButtons}
           />
 
-          <Grid item xs={12} sx={{ textAlign: "center" }}>
+          <Grid item xs={12} sx={{ justifyContent: "center", display: "flex" }}>
             <SecureComponent
               resource={[
                 bucketName,
@@ -631,24 +632,21 @@ const ObjectDetailPanel = ({
               errorProps={{ disabled: true }}
             >
               <Button
-                startIcon={<DeleteIcon />}
+                id={"delete-element-click"}
-                color="secondary"
+                icon={<DeleteIcon />}
-                variant={"outlined"}
+                iconLocation={"start"}
+                fullWidth
+                variant={"secondary"}
                 onClick={() => {
                   setDeleteOpen(true);
                 }}
                 disabled={selectedVersion === "" && actualInfo.is_delete_marker}
-                sx={{
+                style={{
                   width: "calc(100% - 44px)",
                   margin: "8px 0",
-                  "& svg.min-icon": {
-                    width: 14,
-                    height: 14,
-                  },
                 }}
-              >
+                label={`Delete${selectedVersion !== "" ? " version" : ""}`}
-                Delete{selectedVersion !== "" ? " version" : ""}
+              />
-              </Button>
             </SecureComponent>
           </Grid>
           <Grid item xs={12} className={classes.headerForSection}>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.tsx

@@ -16,7 +16,8 @@
 
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
+import { Button } from "mds";
 import Grid from "@mui/material/Grid";
 import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
 import DateTimePickerWrapper from "../../../../Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper";
@@ -96,7 +97,7 @@ const RewindEnable = ({
       </Grid>
       <Grid container>
         {rewindEnabled && (
-          <Grid item xs={12}>
+          <Grid item xs={12} sx={{ marginBottom: "10px" }}>
             <FormSwitchWrapper
               value="status"
               id="status"
@@ -110,19 +111,23 @@ const RewindEnable = ({
             />
           </Grid>
         )}
-        <Grid item xs={12} style={{ textAlign: "right" }}>
+        <Grid
+          item
+          xs={12}
+          style={{ justifyContent: "flex-end", display: "flex" }}
+        >
           <Button
             type="button"
-            variant="contained"
+            variant="callAction"
-            color="primary"
             disabled={rewindEnabling || (!dateSelected && rewindEnableButton)}
             onClick={rewindApply}
             id={"rewind-apply-button"}
-          >
+            label={
-            {!rewindEnableButton && rewindEnabled
+              !rewindEnableButton && rewindEnabled
-              ? "Show Current Data"
+                ? "Show Current Data"
-              : "Show Rewind Data"}
+                : "Show Rewind Data"
-          </Button>
+            }
+          />
         </Grid>
         {rewindEnabling && (
           <Grid item xs={12}>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/RestoreFileVersion.tsx

@@ -84,8 +84,7 @@ const RestoreFileVersion = ({
       titleIcon={<RecoverIcon />}
       onConfirm={restoreVersion}
       confirmButtonProps={{
-        color: "secondary",
+        variant: "secondary",
-        variant: "outlined",
         disabled: restoreLoading,
       }}
       onClose={() => {

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx

@@ -20,7 +20,7 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
+import { Button } from "mds";
 import {
   formFieldStyles,
   modalStyleUtils,
@@ -135,21 +135,19 @@ const SetLegalHoldModal = ({
         </Grid>
         <Grid item xs={12} className={classes.modalButtonBar}>
           <Button
+            id={"clear"}
             type="button"
-            color="primary"
+            variant="regular"
-            variant="outlined"
             onClick={resetForm}
-          >
+            label={"Clear"}
-            Clear
+          />
-          </Button>
           <Button
+            id={"save"}
             type="submit"
-            variant="contained"
+            variant="callAction"
-            color="primary"
             disabled={isSaving}
-          >
+            label={" Save"}
-            Save
+          />
-          </Button>
         </Grid>
       </form>
     </ModalWrapper>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx

@@ -20,7 +20,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
+import { Button } from "mds";
 import {
   formFieldStyles,
   modalStyleUtils,
@@ -265,26 +265,24 @@ const SetRetention = ({
         </Grid>
         <Grid item xs={12} className={classes.modalButtonBar}>
           <Button
+            id={"reset"}
             type="button"
-            variant="outlined"
+            variant="regular"
-            color="primary"
             onClick={resetForm}
-          >
+            label={"Reset"}
-            Reset
+          />
-          </Button>
           <Button
+            id={"save"}
             type="submit"
-            variant="contained"
+            variant="callAction"
-            color="primary"
             disabled={
               (statusEnabled && type === "") ||
               (statusEnabled && !isDateValid) ||
               isSaving
             }
             onClick={saveNewRetentionPolicy}
-          >
+            label={"Save"}
-            Save
+          />
-          </Button>
         </Grid>
       </form>
     </ModalWrapper>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx

@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
 import { useSelector } from "react-redux";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import CopyToClipboard from "react-copy-to-clipboard";
@@ -36,7 +37,6 @@ import PredefinedList from "../../../../Common/FormComponents/PredefinedList/Pre
 import DaysSelector from "../../../../Common/FormComponents/DaysSelector/DaysSelector";
 import { encodeURLString } from "../../../../../../common/utils";
 import { ShareIcon } from "../../../../../../icons";
-import BoxIconButton from "../../../../Common/BoxIconButton/BoxIconButton";
 import {
   selDistSet,
   setModalErrorSnackMessage,
@@ -248,8 +248,9 @@ const ShareFile = ({
                   content={shareURL}
                   actionButton={
                     <CopyToClipboard text={shareURL}>
-                      <BoxIconButton
+                      <Button
-                        variant="outlined"
+                        id={"copy-path"}
+                        variant="regular"
                         onClick={() => {
                           dispatch(
                             setModalSnackMessage(
@@ -258,15 +259,14 @@ const ShareFile = ({
                           );
                         }}
                         disabled={shareURL === "" || isLoadingFile}
-                        sx={{
+                        style={{
                           marginRight: "5px",
                           width: "28px",
                           height: "28px",
                           padding: "0px",
                         }}
-                      >
+                        icon={<CopyIcon />}
-                        <CopyIcon />
+                      />
-                      </BoxIconButton>
                     </CopyToClipboard>
                   }
                 />

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/TagsModal.tsx

@@ -17,7 +17,8 @@
 import React, { Fragment, useState } from "react";
 import get from "lodash/get";
 import { useSelector } from "react-redux";
-import { Box, Button, Grid } from "@mui/material";
+import { Box, Grid } from "@mui/material";
+import { Button } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -219,22 +220,19 @@ const AddTagModal = ({
               ?
               <Grid item xs={12} className={classes.modalButtonBar}>
                 <Button
+                  id={"cancel"}
                   type="button"
-                  variant="outlined"
+                  variant="regular"
-                  color="primary"
                   onClick={cancelDelete}
-                >
+                  label={"Cancel"}
-                  Cancel
+                />
-                </Button>
                 <Button
                   type="submit"
-                  variant="outlined"
+                  variant="secondary"
-                  color="secondary"
                   onClick={deleteTagProcess}
                   id={"deleteTag"}
-                >
+                  label={"Delete Tag"}
-                  Delete Tag
+                />
-                </Button>
               </Grid>
             </Grid>
           </Fragment>
@@ -335,17 +333,16 @@ const AddTagModal = ({
                 </Grid>
                 <Grid item xs={12} className={classes.modalButtonBar}>
                   <Button
+                    id={"clear"}
                     type="button"
-                    variant="outlined"
+                    variant="regular"
                     color="primary"
                     onClick={resetForm}
-                  >
+                    label={"Clear"}
-                    Clear
+                  />
-                  </Button>
                   <Button
                     type="submit"
-                    variant="contained"
+                    variant="callAction"
-                    color="primary"
                     disabled={
                       newLabel.trim() === "" ||
                       newKey.trim() === "" ||
@@ -353,9 +350,8 @@ const AddTagModal = ({
                     }
                     onClick={addTagProcess}
                     id="saveTag"
-                  >
+                    label={"Save"}
-                    Save
+                  />
-                  </Button>
                 </Grid>
               </Grid>
             </SecureComponent>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx

@@ -57,7 +57,6 @@ import {
 import FileVersionItem from "./FileVersionItem";
 import SelectWrapper from "../../../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import PreviewFileModal from "../Preview/PreviewFileModal";
-import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
 import DeleteNonCurrent from "../ListObjects/DeleteNonCurrent";
 import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";
 import DeleteSelectedVersions from "./DeleteSelectedVersions";
@@ -80,6 +79,8 @@ import {
   updateProgress,
 } from "../../../../ObjectBrowser/objectBrowserSlice";
 import { List, ListRowProps } from "react-virtualized";
+import { Button } from "mds";
+import TooltipWrapper from "../../../../Common/TooltipWrapper/TooltipWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -548,44 +549,43 @@ const VersionsNavigator = ({
                 }
                 actions={
                   <Fragment>
-                    <RBIconButton
+                    <TooltipWrapper tooltip={"Select Multiple Versions"}>
-                      id={"select-multiple-versions"}
+                      <Button
-                      tooltip={"Select Multiple Versions"}
+                        id={"select-multiple-versions"}
-                      onClick={() => {
-                        setSelectEnabled(!selectEnabled);
-                      }}
-                      text={""}
-                      icon={<SelectMultipleIcon />}
-                      color="primary"
-                      variant={selectEnabled ? "contained" : "outlined"}
-                      style={{ marginRight: 8 }}
-                    />
-                    {selectEnabled && (
-                      <RBIconButton
-                        id={"delete-multiple-versions"}
-                        tooltip={"Delete Selected Versions"}
                         onClick={() => {
-                          setDelSelectedVOpen(true);
+                          setSelectEnabled(!selectEnabled);
                         }}
-                        text={""}
+                        icon={<SelectMultipleIcon />}
-                        icon={<DeleteIcon />}
+                        variant={selectEnabled ? "callAction" : "regular"}
-                        color="secondary"
                         style={{ marginRight: 8 }}
-                        disabled={selectedItems.length === 0}
                       />
+                    </TooltipWrapper>
+                    {selectEnabled && (
+                      <TooltipWrapper tooltip={"Delete Selected Versions"}>
+                        <Button
+                          id={"delete-multiple-versions"}
+                          onClick={() => {
+                            setDelSelectedVOpen(true);
+                          }}
+                          icon={<DeleteIcon />}
+                          variant={"secondary"}
+                          style={{ marginRight: 8 }}
+                          disabled={selectedItems.length === 0}
+                        />
+                      </TooltipWrapper>
                     )}
-                    <RBIconButton
+                    <TooltipWrapper tooltip={"Delete Non Current Versions"}>
-                      id={"delete-non-current"}
+                      <Button
-                      tooltip={"Delete Non Current Versions"}
+                        id={"delete-non-current"}
-                      onClick={() => {
+                        onClick={() => {
-                        setDeleteNonCurrentOpen(true);
+                          setDeleteNonCurrentOpen(true);
-                      }}
+                        }}
-                      text={""}
+                        icon={<DeleteNonCurrentIcon />}
-                      icon={<DeleteNonCurrentIcon />}
+                        variant={"secondary"}
-                      color="secondary"
+                        style={{ marginRight: 15 }}
-                      style={{ marginRight: 15 }}
+                        disabled={versions.length <= 1}
-                      disabled={versions.length <= 1}
+                      />
-                    />
+                    </TooltipWrapper>
                     <span className={classes.sortByLabel}>Sort by</span>
                     <SelectWrapper
                       id={"sort-by"}

portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx

@@ -22,9 +22,10 @@ import withStyles from "@mui/styles/withStyles";
 import ListItemText from "@mui/material/ListItemText";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import { UploadFolderIcon, UploadIcon } from "../../../../icons";
-import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 import { hasPermission } from "../../../../common/SecureComponent";
+import { Button } from "mds";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 interface IUploadFilesButton {
   uploadPath: string;
@@ -77,19 +78,19 @@ const UploadFilesButton = ({
 
   return (
     <Fragment>
-      <RBIconButton
+      <TooltipWrapper tooltip={"Upload Files"}>
-        id={"upload-main"}
+        <Button
-        tooltip={"Upload Files"}
+          id={"upload-main"}
-        aria-controls={`upload-main-menu`}
+          aria-controls={`upload-main-menu`}
-        aria-haspopup="true"
+          aria-haspopup="true"
-        aria-expanded={openUploadMenu ? "true" : undefined}
+          aria-expanded={openUploadMenu ? "true" : undefined}
-        onClick={handleClick}
+          onClick={handleClick}
-        text={"Upload"}
+          label={"Upload"}
-        icon={<UploadIcon />}
+          icon={<UploadIcon />}
-        color="primary"
+          variant={"callAction"}
-        variant={"contained"}
+          disabled={forceDisable || !uploadEnabled}
-        disabled={forceDisable || !uploadEnabled}
+        />
-      />
+      </TooltipWrapper>
       <Menu
         id={`upload-main-menu`}
         aria-labelledby={`upload-main`}

portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx

@@ -1,43 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import React, { Fragment } from "react";
-import { Box, Button, ButtonProps, IconButtonProps } from "@mui/material";
-import BoxIconButton from "../BoxIconButton/BoxIconButton";
-
-interface IBoxButton extends ButtonProps {
-  label?: string;
-}
-
-const BoxButton = ({ classes, children, label = "", ...rest }: IBoxButton) => {
-  const altRest = rest as IconButtonProps;
-  return (
-    <Fragment>
-      <Box sx={{ display: { xs: "none", sm: "none", md: "block" } }}>
-        <Button {...rest} endIcon={children}>
-          {label}
-        </Button>
-      </Box>
-      <Box sx={{ display: { xs: "block", sm: "block", md: "none" } }}>
-        <BoxIconButton {...altRest} tooltip={label}>
-          {children}
-        </BoxIconButton>
-      </Box>
-    </Fragment>
-  );
-};
-
-export default BoxButton;

portal-ui/src/screens/Console/Common/BoxIconButton/BoxIconButton.tsx

@@ -1,101 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import React from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { IconButton, IconButtonProps, Tooltip } from "@mui/material";
-import clsx from "clsx";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      padding: 8,
-      marginLeft: 8,
-      borderWidth: 1,
-      borderStyle: "solid",
-      borderRadius: 3,
-      "& .min-icon": {
-        // height: 20,
-        width: 20,
-      },
-      "& .MuiTouchRipple-root span": {
-        backgroundColor: theme.palette.primary.main,
-        borderRadius: 3,
-        opacity: 0.3,
-      },
-      "&:disabled": {
-        color: "#EBEBEB",
-        borderColor: "#EBEBEB",
-      },
-      "& > span:not(.BaseBadge-root)": {
-        paddingRight: 8,
-      },
-    },
-    contained: {
-      borderColor: theme.palette.primary.main,
-      background: theme.palette.primary.main,
-      color: "white",
-      "& .MuiTouchRipple-root span": {
-        backgroundColor: theme.palette.primary.dark,
-        borderRadius: 3,
-        opacity: 0.3,
-      },
-      "&:hover": {
-        backgroundColor: theme.palette.primary.light,
-        color: "#FFF",
-      },
-    },
-  });
-
-interface IBoxIconButton extends IconButtonProps {
-  classes: any;
-  children: any;
-  variant?: "outlined" | "contained";
-  tooltip?: string;
-}
-
-const BoxIconButton = ({
-  classes,
-  children,
-  variant = "outlined",
-  tooltip,
-  ...rest
-}: IBoxIconButton) => {
-  const button = (
-    <IconButton
-      {...rest}
-      className={clsx(classes.root, {
-        [classes.contained]: variant === "contained",
-      })}
-    >
-      {children}
-    </IconButton>
-  );
-
-  if (tooltip && tooltip !== "") {
-    return (
-      <Tooltip title={tooltip}>
-        <span>{button}</span>
-      </Tooltip>
-    );
-  }
-
-  return button;
-};
-
-export default withStyles(styles)(BoxIconButton);

portal-ui/src/screens/Console/Common/ComponentsScreen.tsx

@@ -19,17 +19,12 @@ import { containerForHeader } from "../Common/FormComponents/common/styleLibrary
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, DialogContentText, Grid } from "@mui/material";
+import { DialogContentText, Grid } from "@mui/material";
 import PageHeader from "./PageHeader/PageHeader";
 import PageLayout from "./Layout/PageLayout";
 import SectionTitle from "./SectionTitle";
-import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
+import { Button } from "mds";
-import {
+import { ConfirmDeleteIcon } from "../../../icons";
-  ArrowIcon,
-  ConfirmDeleteIcon,
-  EditIcon,
-  TrashIcon,
-} from "../../../icons";
 import ConfirmDialog from "./ModalWrapper/ConfirmDialog";
 
 interface IComponentsScreen {
@@ -62,157 +57,6 @@ const ComponentsScreen = ({ classes }: IComponentsScreen) => {
       <PageHeader label={"Components"} />
       <PageLayout>
         <Grid container spacing={1}>
-          <Grid item xs={12}>
-            <SectionTitle>Buttons</SectionTitle>
-          </Grid>
-          <Grid item xs={12}>
-            <p>Buttons should always be of one of the following four types:</p>
-          </Grid>
-          <Grid item xs={12}>
-            <Grid container spacing={1}>
-              <Grid item>
-                <Button
-                  type="button"
-                  variant={"contained"}
-                  className={classes.clearButton}
-                  onClick={() => {}}
-                >
-                  Primary
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button
-                  type="submit"
-                  variant="contained"
-                  color="primary"
-                  onClick={() => {}}
-                  disabled={true}
-                >
-                  Primary Disabled
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button type="button" variant={"outlined"} onClick={() => {}}>
-                  Generic
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button
-                  type="button"
-                  variant={"outlined"}
-                  onClick={() => {}}
-                  disabled={true}
-                >
-                  Generic Disabled
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button
-                  type="button"
-                  variant={"outlined"}
-                  color={"secondary"}
-                  onClick={() => {}}
-                >
-                  Dangerous
-                </Button>
-              </Grid>
-              <Grid item>
-                <Button
-                  type="button"
-                  variant={"outlined"}
-                  color={"secondary"}
-                  onClick={() => {}}
-                  disabled={true}
-                >
-                  Dangerous Disabled
-                </Button>
-              </Grid>
-            </Grid>
-          </Grid>
-          <Grid item xs={12}>
-            <ul>
-              <li>
-                <b>Primary:</b> A call to action.
-              </li>
-              <li>
-                <b>Generic:</b> An optional action.
-              </li>
-              <li>
-                <b>Dangerous:</b> An irreversible action.
-              </li>
-            </ul>
-          </Grid>
-          <Grid item xs={12}>
-            <SectionTitle>Icon Buttons</SectionTitle>
-          </Grid>
-          <Grid item xs={12}>
-            <p>Icon Buttons should always be of one of the following types:</p>
-          </Grid>
-          <Grid item xs={12}>
-            <Grid container spacing={1}>
-              <Grid item>
-                <RBIconButton
-                  tooltip={"Primary"}
-                  onClick={() => {}}
-                  text={"Primary"}
-                  icon={<ArrowIcon />}
-                  color={"primary"}
-                  variant={"outlined"}
-                />
-              </Grid>
-              <Grid item>
-                <RBIconButton
-                  tooltip={"Primary Disabled"}
-                  onClick={() => {}}
-                  text={"Primary Disabled"}
-                  icon={<ArrowIcon />}
-                  color={"primary"}
-                  variant={"outlined"}
-                  disabled={true}
-                />
-              </Grid>
-              <Grid item>
-                <RBIconButton
-                  tooltip={"Delete Bucket"}
-                  onClick={() => {}}
-                  text={"Generic"}
-                  icon={<EditIcon />}
-                  variant={"outlined"}
-                />
-              </Grid>
-              <Grid item>
-                <RBIconButton
-                  tooltip={"Delete Bucket"}
-                  onClick={() => {}}
-                  text={"Generic Disabled"}
-                  icon={<EditIcon />}
-                  variant={"outlined"}
-                  disabled={true}
-                />
-              </Grid>
-              <Grid item>
-                <RBIconButton
-                  tooltip={"Dangerous"}
-                  onClick={() => {}}
-                  text={"Dangerous"}
-                  icon={<TrashIcon />}
-                  color={"secondary"}
-                  variant={"outlined"}
-                />
-              </Grid>
-              <Grid item>
-                <RBIconButton
-                  tooltip={"Dangerous"}
-                  onClick={() => {}}
-                  text={"Dangerous Disabled"}
-                  icon={<TrashIcon />}
-                  color={"secondary"}
-                  variant={"outlined"}
-                  disabled={true}
-                />
-              </Grid>
-            </Grid>
-          </Grid>
           <Grid item xs={12}>
             <SectionTitle>Confirm Dialogs</SectionTitle>
           </Grid>
@@ -221,14 +65,14 @@ const ComponentsScreen = ({ classes }: IComponentsScreen) => {
           </Grid>
           <Grid item xs={12}>
             <Button
+              id={"open-dialog-test"}
               type="button"
-              variant={"outlined"}
+              variant={"regular"}
               onClick={() => {
                 setDialogOpen(true);
               }}
-            >
+              label={"Open Dialog"}
-              Open Dialog
+            />
-            </Button>
             <ConfirmDialog
               title={`Delete Bucket`}
               confirmText={"Delete"}

portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx

@@ -16,13 +16,14 @@
 
 import React from "react";
 import { InputAdornment, OutlinedInput } from "@mui/material";
-import BoxIconButton from "../BoxIconButton/BoxIconButton";
 import withStyles from "@mui/styles/withStyles";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { CopyIcon } from "../../../../icons";
 import { fieldBasic } from "../FormComponents/common/styleLibrary";
+import TooltipWrapper from "../TooltipWrapper/TooltipWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -74,17 +75,22 @@ const CredentialItem = ({
           readOnly
           endAdornment={
             <InputAdornment position="end">
-              <CopyToClipboard text={value}>
+              <TooltipWrapper tooltip={"Copy"}>
-                <BoxIconButton
+                <CopyToClipboard text={value}>
-                  aria-label="copy"
+                  <Button
-                  tooltip={"Copy"}
+                    id={"copy-clipboard"}
-                  onClick={() => {}}
+                    aria-label="copy"
-                  onMouseDown={() => {}}
+                    onClick={() => {}}
-                  edge="end"
+                    onMouseDown={() => {}}
-                >
+                    style={{
-                  <CopyIcon />
+                      width: "28px",
-                </BoxIconButton>
+                      height: "28px",
-              </CopyToClipboard>
+                      padding: "0px",
+                    }}
+                    icon={<CopyIcon />}
+                  />
+                </CopyToClipboard>
+              </TooltipWrapper>
             </InputAdornment>
           }
         />

portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx

@@ -17,6 +17,7 @@
 import React from "react";
 import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { NewServiceAccount } from "./types";
@@ -25,8 +26,7 @@ import Grid from "@mui/material/Grid";
 import CredentialItem from "./CredentialItem";
 import WarnIcon from "../../../../icons/WarnIcon";
 import { DownloadIcon, ServiceAccountCredentialsIcon } from "../../../../icons";
-
+import TooltipWrapper from "../TooltipWrapper/TooltipWrapper";
-import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -48,7 +48,8 @@ const styles = (theme: Theme) =>
       fontSize: ".9rem",
     },
     buttonContainer: {
-      textAlign: "right",
+      display: "flex",
+      justifyContent: "flex-end",
       marginTop: "1rem",
     },
     credentialsPanel: {
@@ -97,6 +98,71 @@ const CredentialsPrompt = ({
   const consoleCreds = get(newServiceAccount, "console", null);
   const idp = get(newServiceAccount, "idp", false);
 
+  const downloadImport = () => {
+    let consoleExtras = {};
+
+    if (consoleCreds) {
+      if (!Array.isArray(consoleCreds)) {
+        consoleExtras = {
+          url: consoleCreds.url,
+          accessKey: consoleCreds.accessKey,
+          secretKey: consoleCreds.secretKey,
+          api: "s3v4",
+          path: "auto",
+        };
+      } else {
+        const cCreds = consoleCreds.map((itemMap) => {
+          return {
+            url: itemMap.url,
+            accessKey: itemMap.accessKey,
+            secretKey: itemMap.secretKey,
+            api: "s3v4",
+            path: "auto",
+          };
+        });
+        consoleExtras = cCreds[0];
+      }
+    } else {
+      consoleExtras = {
+        url: newServiceAccount.url,
+        accessKey: newServiceAccount.accessKey,
+        secretKey: newServiceAccount.secretKey,
+        api: "s3v4",
+        path: "auto",
+      };
+    }
+
+    download(
+      "credentials.json",
+      JSON.stringify({
+        ...consoleExtras,
+      })
+    );
+  };
+
+  const downloaddAllCredentials = () => {
+    let allCredentials = {};
+    if (
+      consoleCreds &&
+      Array.isArray(consoleCreds) &&
+      consoleCreds.length > 1
+    ) {
+      const cCreds = consoleCreds.map((itemMap) => {
+        return {
+          accessKey: itemMap.accessKey,
+          secretKey: itemMap.secretKey,
+        };
+      });
+      allCredentials = cCreds;
+    }
+    download(
+      "all_credentials.json",
+      JSON.stringify({
+        ...allCredentials,
+      })
+    );
+  };
+
   return (
     <ModalWrapper
       modalOpen={open}
@@ -178,89 +244,37 @@ const CredentialsPrompt = ({
         <Grid item xs={12} className={classes.buttonContainer}>
           {!idp && (
             <>
-              <RBIconButton
+              <TooltipWrapper
-                id={"download-button"}
                 tooltip={
                   "Download credentials in a JSON file formatted for import using mc alias import. This will only include the default login credentials."
                 }
-                text={"Download for import"}
+              >
-                className={classes.buttonSpacer}
+                <Button
-                onClick={() => {
+                  id={"download-button"}
-                  let consoleExtras = {};
+                  label={"Download for import"}
-
+                  className={classes.buttonSpacer}
-                  if (consoleCreds) {
+                  onClick={downloadImport}
-                    if (!Array.isArray(consoleCreds)) {
+                  icon={<DownloadIcon />}
-                      consoleExtras = {
+                  variant="callAction"
-                        url: consoleCreds.url,
+                />
-                        accessKey: consoleCreds.accessKey,
+              </TooltipWrapper>
-                        secretKey: consoleCreds.secretKey,
-                        api: "s3v4",
-                        path: "auto",
-                      };
-                    } else {
-                      const cCreds = consoleCreds.map((itemMap) => {
-                        return {
-                          url: itemMap.url,
-                          accessKey: itemMap.accessKey,
-                          secretKey: itemMap.secretKey,
-                          api: "s3v4",
-                          path: "auto",
-                        };
-                      });
-                      consoleExtras = cCreds[0];
-                    }
-                  } else {
-                    consoleExtras = {
-                      url: newServiceAccount.url,
-                      accessKey: newServiceAccount.accessKey,
-                      secretKey: newServiceAccount.secretKey,
-                      api: "s3v4",
-                      path: "auto",
-                    };
-                  }
-
-                  download(
-                    "credentials.json",
-                    JSON.stringify({
-                      ...consoleExtras,
-                    })
-                  );
-                }}
-                icon={<DownloadIcon />}
-                variant="contained"
-                color="primary"
-              />
 
               {Array.isArray(consoleCreds) && consoleCreds.length > 1 && (
-                <RBIconButton
+                <TooltipWrapper
-                  id={"download-all-button"}
                   tooltip={
                     "Download all access credentials to a JSON file. NOTE: This file is not formatted for import using mc alias import. If you plan to import this alias from the file, please use the Download for Import button. "
                   }
-                  text={"Download all access credentials"}
+                >
-                  className={classes.buttonSpacer}
+                  <Button
-                  onClick={() => {
+                    id={"download-all-button"}
-                    let allCredentials = {};
+                    label={"Download all access credentials"}
-                    if (consoleCreds) {
+                    className={classes.buttonSpacer}
-                      const cCreds = consoleCreds.map((itemMap) => {
+                    onClick={downloaddAllCredentials}
-                        return {
+                    icon={<DownloadIcon />}
-                          accessKey: itemMap.accessKey,
+                    variant="callAction"
-                          secretKey: itemMap.secretKey,
+                    color="primary"
-                        };
+                  />
-                      });
+                </TooltipWrapper>
-                      allCredentials = cCreds;
-                    }
-                    download(
-                      "all_credentials.json",
-                      JSON.stringify({
-                        ...allCredentials,
-                      })
-                    );
-                  }}
-                  icon={<DownloadIcon />}
-                  variant="contained"
-                  color="primary"
-                />
               )}
             </>
           )}

portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx

@@ -23,9 +23,10 @@ import withStyles from "@mui/styles/withStyles";
 import HelpIcon from "../../../../../icons/HelpIcon";
 import { fieldBasic } from "../common/styleLibrary";
 import { CopyIcon } from "../../../../../icons";
-import RBIconButton from "../../../Buckets/BucketDetails/SummaryItems/RBIconButton";
+import { Button } from "mds";
 import CopyToClipboard from "react-copy-to-clipboard";
 import CodeEditor from "@uiw/react-textarea-code-editor";
+import TooltipWrapper from "../../TooltipWrapper/TooltipWrapper";
 
 interface ICodeWrapper {
   value: string;
@@ -124,16 +125,17 @@ const CodeMirrorWrapper = ({
             },
           }}
         >
-          <CopyToClipboard text={value}>
+          <TooltipWrapper tooltip={"Copy to Clipboard"}>
-            <RBIconButton
+            <CopyToClipboard text={value}>
-              tooltip={"Copy to Clipboard"}
+              <Button
-              onClick={() => {}}
+                type={"button"}
-              text={""}
+                id={"copy-code-mirror"}
-              icon={<CopyIcon />}
+                icon={<CopyIcon />}
-              color={"primary"}
+                color={"primary"}
-              variant={"outlined"}
+                variant={"regular"}
-            />
+              />
-          </CopyToClipboard>
+            </CopyToClipboard>
+          </TooltipWrapper>
         </Box>
       </Grid>
     </React.Fragment>

portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx

@@ -16,9 +16,10 @@
 
 import React from "react";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
+import { Box, Grid } from "@mui/material";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Box, Button, Grid } from "@mui/material";
 import ScheduleIcon from "@mui/icons-material/Schedule";
 import WatchLaterIcon from "@mui/icons-material/WatchLater";
 import { actionsTray, widgetContainerCommon } from "../common/styleLibrary";
@@ -42,11 +43,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...actionsTray,
     ...widgetContainerCommon,
-    syncButton: {
-      "&.MuiButton-root .MuiButton-iconSizeMedium > *:first-of-type": {
-        fontSize: 18,
-      },
-    },
     schedulerIcon: {
       opacity: 0.4,
       fontSize: 10,
@@ -272,15 +268,13 @@ const DateRangeSelector = ({
             }}
           >
             <Button
+              id={"sync"}
               type="button"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               onClick={triggerSync}
-              endIcon={<SyncIcon />}
+              icon={<SyncIcon />}
-              className={classes.syncButton}
+              label={"Sync"}
-            >
+            />
-              Sync
-            </Button>
           </Box>
         )}
       </Box>

portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx

@@ -16,9 +16,9 @@
 
 import React, { Fragment } from "react";
 import { Grid, InputLabel, TextField, Tooltip } from "@mui/material";
-import DateTimePicker from "@mui/lab/DateTimePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers";
-import AdapterMoment from "@mui/lab/AdapterMoment";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
-import LocalizationProvider from "@mui/lab/LocalizationProvider";
+import { DateTimePicker } from "@mui/x-date-pickers";
 import InputAdornment from "@mui/material/InputAdornment";
 import ScheduleIcon from "@mui/icons-material/Schedule";
 import { Theme } from "@mui/material/styles";
@@ -293,7 +293,7 @@ const DateTimePickerWrapper = ({
         label=""
         className={clsName}
         disabled={disabled}
-        renderInput={(props) => (
+        renderInput={(props: any) => (
           <TextField id={id} variant="standard" {...props} disabled />
         )}
         ampm={false}

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -493,7 +493,8 @@ export const settingsCommon: any = {
   },
   settingsButtonContainer: {
     padding: "15px 38px",
-    textAlign: "right" as const,
+    display: "flex",
+    justifyContent: "flex-end",
   },
   innerSettingsButtonContainer: {
     maxWidth: 840,
@@ -882,7 +883,8 @@ export const hrClass = {
 
 export const tenantDetailsStyles = {
   buttonContainer: {
-    textAlign: "right" as const,
+    display: "flex",
+    justifyContent: "flex-end",
   },
   multiContainer: {
     display: "flex" as const,
@@ -1133,7 +1135,8 @@ export const serviceAccountStyles: any = {
     width: "100%",
   },
   buttonContainer: {
-    textAlign: "right",
+    display: "flex",
+    justifyContent: "flex-end",
   },
   infoDetails: {
     color: "#393939",

portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx

@@ -16,10 +16,11 @@
 
 import React from "react";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { IWizardButton, IWizardPage } from "./types";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -56,7 +57,8 @@ const styles = (theme: Theme) =>
     },
     buttonInnerContainer: {
       width: "100%",
-      textAlign: "right" as const,
+      display: "flex",
+      justifyContent: "flex-end",
       marginRight: 15,
     },
   });
@@ -109,17 +111,14 @@ const WizardPage = ({
             return (
               <Button
                 id={"wizard-button-" + btn.label}
-                variant="contained"
+                variant="regular"
-                color="primary"
-                size="small"
                 onClick={() => {
                   buttonAction(btn);
                 }}
                 disabled={!btn.enabled}
                 key={`button-${page.label}-${btn.label}`}
-              >
+                label={btn.label}
-                {btn.label}
+              />
-              </Button>
             );
           })}
         </div>

portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx

@@ -1,19 +1,18 @@
 import React from "react";
 import {
-  Button,
-  ButtonProps,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
 } from "@mui/material";
-import { LoadingButton } from "@mui/lab";
+import { Button } from "mds";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { deleteDialogStyles } from "../FormComponents/common/styleLibrary";
+import { ButtonProps } from "../../types";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -31,8 +30,10 @@ type ConfirmDialogProps = {
   confirmationContent: React.ReactNode | React.ReactNode[];
   cancelText?: string;
   confirmText?: string;
-  confirmButtonProps?: Partial<ButtonProps>;
+  confirmButtonProps?: ButtonProps &
-  cancelButtonProps?: Partial<ButtonProps>;
+    React.ButtonHTMLAttributes<HTMLButtonElement>;
+  cancelButtonProps?: ButtonProps &
+    React.ButtonHTMLAttributes<HTMLButtonElement>;
   titleIcon?: React.ReactNode;
 };
 
@@ -47,8 +48,8 @@ const ConfirmDialog = ({
   confirmationContent,
   cancelText = "Cancel",
   confirmText = "Confirm",
-  confirmButtonProps = {},
+  confirmButtonProps = undefined,
-  cancelButtonProps = {},
+  cancelButtonProps = undefined,
   titleIcon = null,
 }: ConfirmDialogProps) => {
   return (
@@ -88,34 +89,22 @@ const ConfirmDialog = ({
       </DialogContent>
       <DialogActions className={classes.actions}>
         <Button
-          className={classes.cancelButton}
           onClick={onCancel || onClose}
           disabled={isLoading}
           type="button"
           {...cancelButtonProps}
-          variant="outlined"
+          variant="regular"
-          color="primary"
           id={"confirm-cancel"}
-        >
+          label={cancelText}
-          {cancelText}
+        />
-        </Button>
+        <Button
-
-        <LoadingButton
-          className={classes.confirmButton}
-          type="button"
-          onClick={onConfirm}
-          loading={isLoading}
-          disabled={isLoading}
-          variant="outlined"
-          color="secondary"
-          loadingPosition="start"
-          startIcon={<React.Fragment />}
-          autoFocus
           id={"confirm-ok"}
+          onClick={onConfirm}
+          label={confirmText}
+          disabled={isLoading}
+          variant={"secondary"}
           {...confirmButtonProps}
-        >
+        />
-          {confirmText}
-        </LoadingButton>
       </DialogActions>
     </Dialog>
   );

portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx

@@ -20,7 +20,6 @@ import { useSelector } from "react-redux";
 import Grid from "@mui/material/Grid";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import IconButton from "@mui/material/IconButton";
 import { AppState, useAppDispatch } from "../../../../store";
 import OperatorLogo from "../../../../icons/OperatorLogo";
 import ConsoleLogo from "../../../../icons/ConsoleLogo";
@@ -31,6 +30,7 @@ import { Box } from "@mui/material";
 import { toggleList } from "../../ObjectBrowser/objectBrowserSlice";
 import { selFeatures } from "../../consoleSlice";
 import { selDirectPVMode, selOpMode } from "../../../../systemSlice";
+import { Button } from "mds";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -48,7 +48,12 @@ const styles = (theme: Theme) =>
       alignItems: "center",
     },
     rightMenu: {
-      textAlign: "right",
+      display: "flex",
+      justifyContent: "flex-end",
+      paddingRight: 20,
+      "& button": {
+        marginLeft: 8,
+      },
     },
     logo: {
       marginLeft: 34,
@@ -68,8 +73,8 @@ const styles = (theme: Theme) =>
       width: 15,
       height: 15,
       top: 0,
-      right: 2,
+      right: 4,
-      marginTop: -16,
+      marginTop: 4,
       transitionDuration: "0.2s",
       color: "#32C787",
       "& svg": {
@@ -195,40 +200,31 @@ const PageHeader = ({
       >
         {actions && actions}
         {managerObjects && managerObjects.length > 0 && (
-          <IconButton
+          <Button
-            color="primary"
             aria-label="Refresh List"
-            component="span"
             onClick={() => {
               dispatch(toggleList());
             }}
+            icon={
+              <Fragment>
+                <div
+                  className={`${classes.indicator} ${
+                    newObject ? "newItem" : ""
+                  }`}
+                  style={{
+                    opacity: managerObjects.length > 0 && newItems ? 1 : 0,
+                  }}
+                >
+                  <CircleIcon />
+                </div>
+                <ObjectManagerIcon
+                  style={{ width: 20, height: 20, marginTop: -2 }}
+                />
+              </Fragment>
+            }
             id="object-manager-toggle"
-            size="large"
+            style={{ position: "relative", padding: "0 10px" }}
-            sx={{
+          />
-              marginRight: "20px",
-              color: "#5E5E5E",
-              position: "relative",
-              border: "#E2E2E2 1px solid",
-              borderRadius: "3px",
-              width: "40px",
-              height: "40px",
-              backgroundColor: "#F8F8F8",
-              padding: 0,
-              "&>svg": {
-                width: "25px",
-              },
-            }}
-          >
-            <div
-              className={`${classes.indicator} ${newObject ? "newItem" : ""}`}
-              style={{
-                opacity: managerObjects.length > 0 && newItems ? 1 : 0,
-              }}
-            >
-              <CircleIcon />
-            </div>
-            <ObjectManagerIcon />
-          </IconButton>
         )}
       </Grid>
     </Grid>

portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx

@@ -81,6 +81,9 @@ const styles = (theme: Theme) =>
     rightItems: {
       display: "flex",
       alignItems: "center",
+      "& button": {
+        marginLeft: 8,
+      },
       "@media (max-width: 600px)": {
         width: "100%",
       },

portal-ui/src/screens/Console/Common/TooltipWrapper/TooltipWrapper.tsx

@@ -0,0 +1,33 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Tooltip } from "@mui/material";
+
+interface ITooltipWrapperProps {
+  tooltip: string;
+  children: any;
+}
+
+const TooltipWrapper = ({ tooltip, children }: ITooltipWrapperProps) => {
+  return (
+    <Tooltip title={tooltip}>
+      <span>{children}</span>
+    </Tooltip>
+  );
+};
+
+export default TooltipWrapper;

portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx

@@ -16,10 +16,9 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
-import { Box, Button, LinearProgress } from "@mui/material";
+import { Box, LinearProgress } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-
+import { Button } from "mds";
-import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 import useApi from "../../Common/Hooks/useApi";
 import { AddIcon, ClustersIcon, RemoveIcon } from "../../../../icons";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -34,6 +33,7 @@ import {
   setSnackBarMessage,
 } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 type SiteInputRow = {
   name: string;
@@ -415,38 +415,49 @@ const AddReplicationSites = () => {
                             },
                           }}
                         >
-                          <RBIconButton
+                          <TooltipWrapper tooltip={"Add a Row"}>
-                            tooltip={"Add a Row"}
+                            <Button
-                            text={""}
+                              id={`add-row-${index}`}
-                            variant="outlined"
+                              variant="regular"
-                            color="primary"
+                              icon={<AddIcon />}
-                            icon={<AddIcon />}
+                              onClick={(e) => {
-                            onClick={(e) => {
+                                e.preventDefault();
-                              e.preventDefault();
+                                const newRows = [...siteConfig];
-                              const newRows = [...siteConfig];
+                                //add at the next index
-                              //add at the next index
+                                newRows.splice(index + 1, 0, {
-                              newRows.splice(index + 1, 0, {
+                                  name: "",
-                                name: "",
+                                  endpoint: "",
-                                endpoint: "",
+                                });
-                              });
 
-                              setSiteConfig(newRows);
+                                setSiteConfig(newRows);
-                            }}
+                              }}
-                          />
+                              style={{
-                          <RBIconButton
+                                width: 25,
-                            tooltip={"Remove Row"}
+                                height: 25,
-                            text={""}
+                                padding: 0,
-                            variant="outlined"
+                              }}
-                            disabled={isDelDisabled}
+                            />
-                            color="primary"
+                          </TooltipWrapper>
-                            icon={<RemoveIcon />}
+                          <TooltipWrapper tooltip={"Remove Row"}>
-                            onClick={(e) => {
+                            <Button
-                              e.preventDefault();
+                              id={`remove-row-${index}`}
-                              setSiteConfig(
+                              variant="regular"
-                                siteConfig.filter((_, idx) => idx !== index)
+                              disabled={isDelDisabled}
-                              );
+                              icon={<RemoveIcon />}
-                            }}
+                              onClick={(e) => {
-                          />
+                                e.preventDefault();
+                                setSiteConfig(
+                                  siteConfig.filter((_, idx) => idx !== index)
+                                );
+                              }}
+                              style={{
+                                width: 25,
+                                height: 25,
+                                padding: 0,
+                                marginLeft: 8,
+                              }}
+                            />
+                          </TooltipWrapper>
                         </Box>
                       </Grid>
                     </Fragment>
@@ -465,28 +476,26 @@ const AddReplicationSites = () => {
                   }}
                 >
                   <Button
+                    id={"clear"}
                     type="button"
-                    variant="outlined"
+                    variant="regular"
-                    color="primary"
                     disabled={isAdding}
                     onClick={resetForm}
-                  >
+                    label={"Clear"}
-                    Clear
+                  />
-                  </Button>
 
                   <Button
+                    id={"save"}
                     type="submit"
-                    variant="contained"
+                    variant="callAction"
-                    color="primary"
                     disabled={
                       isAdding ||
                       !accessKey ||
                       !secretKey ||
                       !isAllEndpointsValid
                     }
-                  >
+                    label={"Save"}
-                    Save
+                  />
-                  </Button>
                 </Box>
               </Grid>
             </form>

portal-ui/src/screens/Console/Configurations/SiteReplication/EntityReplicationLookup.tsx

@@ -16,9 +16,9 @@
 
 import React, { useState } from "react";
 import { Box, Grid } from "@mui/material";
+import { Button } from "mds";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 import { ClustersIcon } from "../../../../icons";
 import useApi from "../../Common/Hooks/useApi";
 import { StatsResponseType } from "./SiteReplicationStatus";
@@ -27,6 +27,7 @@ import Loader from "../../Common/Loader/Loader";
 import PolicyEntityStatus from "./LookupStatus/PolicyEntityStatus";
 import GroupEntityStatus from "./LookupStatus/GroupEntityStatus";
 import UserEntityStatus from "./LookupStatus/UserEntityStatus";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 const EntityReplicationLookup = () => {
   const [entityType, setEntityType] = useState<string>("bucket");
@@ -140,18 +141,19 @@ const EntityReplicationLookup = () => {
             maxWidth: "80px",
           }}
         >
-          <RBIconButton
+          <TooltipWrapper tooltip={"View across sites"}>
-            type={"button"}
+            <Button
-            onClick={() => {
+              id={"view-across-sites"}
-              getStats(entityType, entityValue);
+              type={"button"}
-            }}
+              onClick={() => {
-            text={`View `}
+                getStats(entityType, entityValue);
-            tooltip={"View across sites"}
+              }}
-            icon={<ClustersIcon />}
+              label={`View`}
-            color={"primary"}
+              icon={<ClustersIcon />}
-            showLabelAlways
+              collapseOnSmall={false}
-            disabled={!entityValue || !entityType}
+              disabled={!entityValue || !entityType}
-          />
+            />
+          </TooltipWrapper>
         </Box>
       </Box>
 

portal-ui/src/screens/Console/Configurations/SiteReplication/ReplicationSites.tsx

@@ -17,9 +17,9 @@
 import React, { useState } from "react";
 import List from "@mui/material/List";
 import ListItemButton from "@mui/material/ListItemButton";
-import { Box, Button, DialogContentText, Tooltip } from "@mui/material";
+import { Box, DialogContentText, Tooltip } from "@mui/material";
+import { Button } from "mds";
 import { ReplicationSite } from "./SiteReplication";
-import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 import TrashIcon from "../../../../icons/TrashIcon";
 import { CircleIcon, ConfirmDeleteIcon, EditIcon } from "../../../../icons";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
@@ -41,6 +41,7 @@ import {
   setSnackBarMessage,
 } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -228,33 +229,46 @@ const ReplicationSites = ({
                     },
                   }}
                 >
-                  <RBIconButton
+                  <TooltipWrapper
                     tooltip={
                       sites.length <= 2
                         ? "Minimum two sites are required for replication"
                         : "Delete Site"
                     }
-                    text={""}
+                  >
-                    variant="outlined"
+                    <Button
-                    color="secondary"
+                      id={`delete-site-${key}-${index}`}
-                    disabled={sites.length <= 2}
+                      variant="secondary"
-                    icon={<TrashIcon />}
+                      disabled={sites.length <= 2}
-                    onClick={(e) => {
+                      icon={<TrashIcon />}
-                      e.preventDefault();
+                      onClick={(e) => {
-                      setIsDeleteSiteKey(key);
+                        e.preventDefault();
-                    }}
+                        setIsDeleteSiteKey(key);
-                  />
+                      }}
-                  <RBIconButton
+                      style={{
-                    tooltip={"Edit Endpoint"}
+                        width: "25px",
-                    text={""}
+                        height: "25px",
-                    variant="contained"
+                        padding: "0",
-                    color="primary"
+                      }}
-                    icon={<EditIcon />}
+                    />
-                    onClick={(e) => {
+                  </TooltipWrapper>
-                      e.preventDefault();
+                  <TooltipWrapper tooltip={"Edit Endpoint"}>
-                      setEditSite(siteInfo);
+                    <Button
-                    }}
+                      id={`edit-icon-${key}-${index}`}
-                  />
+                      variant="regular"
+                      icon={<EditIcon />}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setEditSite(siteInfo);
+                      }}
+                      style={{
+                        width: "25px",
+                        height: "25px",
+                        padding: "0",
+                        marginLeft: "8px",
+                      }}
+                    />
+                  </TooltipWrapper>
                 </Box>
               </ListItemButton>
 
@@ -326,26 +340,24 @@ const ReplicationSites = ({
 
                   <Grid item xs={12} className={classes.modalButtonBar}>
                     <Button
+                      id={"close"}
                       type="button"
-                      variant="outlined"
+                      variant="regular"
-                      color="primary"
                       onClick={() => {
                         setEditSite(null);
                       }}
-                    >
+                      label={"Close"}
-                      Close
+                    />
-                    </Button>
                     <Button
+                      id={"update"}
                       type="button"
-                      variant="contained"
+                      variant="callAction"
-                      color="primary"
                       disabled={isEditing || !isValidEndPointUrl}
                       onClick={() => {
                         updatePeerSite();
                       }}
-                    >
+                      label={"Update"}
-                      Update
+                    />
-                    </Button>
                   </Grid>
                 </ModalWrapper>
               ) : null}

portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplication.tsx

@@ -23,7 +23,7 @@ import PageLayout from "../../Common/Layout/PageLayout";
 import useApi from "../../Common/Hooks/useApi";
 import ReplicationSites from "./ReplicationSites";
 import TrashIcon from "../../../../icons/TrashIcon";
-import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
+import { Button } from "mds";
 import Loader from "../../Common/Loader/Loader";
 import {
   AddIcon,
@@ -41,6 +41,7 @@ import {
 } from "../../../../systemSlice";
 import AButton from "../../Common/AButton/AButton";
 import { useAppDispatch } from "../../../../store";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 export type ReplicationSite = {
   deploymentID: string;
@@ -118,45 +119,51 @@ const SiteReplication = () => {
             display: "flex",
             alignItems: "center",
             justifyContent: "flex-end",
+            "& button": {
+              marginLeft: "8px",
+            },
           }}
         >
           {hasSites ? (
-            <Box>
+            <Fragment>
-              <RBIconButton
+              <TooltipWrapper tooltip={"Delete All"}>
-                tooltip={"Delete All"}
+                <Button
-                text={"Delete All"}
+                  id={"delete-all"}
-                variant="outlined"
+                  label={"Delete All"}
-                color="secondary"
+                  variant="secondary"
-                disabled={isRemoving}
+                  disabled={isRemoving}
-                icon={<TrashIcon />}
+                  icon={<TrashIcon />}
-                onClick={() => {
+                  onClick={() => {
-                  setIsDeleteAll(true);
+                    setIsDeleteAll(true);
-                }}
+                  }}
-              />
+                />
-              <RBIconButton
+              </TooltipWrapper>
-                tooltip={"Replication Status"}
+              <TooltipWrapper tooltip={"Replication Status"}>
-                text={"Replication Status"}
+                <Button
-                variant="outlined"
+                  id={"replication-status"}
-                color="primary"
+                  label={"Replication Status"}
-                icon={<RecoverIcon />}
+                  variant="regular"
-                onClick={(e) => {
+                  icon={<RecoverIcon />}
-                  e.preventDefault();
+                  onClick={(e) => {
-                  navigate(IAM_PAGES.SITE_REPLICATION_STATUS);
+                    e.preventDefault();
-                }}
+                    navigate(IAM_PAGES.SITE_REPLICATION_STATUS);
-              />
+                  }}
-            </Box>
+                />
+              </TooltipWrapper>
+            </Fragment>
           ) : null}
-          <RBIconButton
+          <TooltipWrapper tooltip={"Add Replication Sites"}>
-            tooltip={"Add Replication Sites"}
+            <Button
-            text={"Add Sites"}
+              id={"add-replication-site"}
-            variant="contained"
+              label={"Add Sites"}
-            color="primary"
+              variant="callAction"
-            disabled={isRemoving}
+              disabled={isRemoving}
-            icon={<AddIcon />}
+              icon={<AddIcon />}
-            onClick={() => {
+              onClick={() => {
-              navigate(IAM_PAGES.SITE_REPLICATION_ADD);
+                navigate(IAM_PAGES.SITE_REPLICATION_ADD);
-            }}
+              }}
-          />
+            />
+          </TooltipWrapper>
         </Box>
         {hasSites ? (
           <ReplicationSites

portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplicationStatus.tsx

@@ -15,9 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
+import { Box, Grid } from "@mui/material";
+import { Button } from "mds";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import PageLayout from "../../Common/Layout/PageLayout";
-import { Box, Grid } from "@mui/material";
 import useApi from "../../Common/Hooks/useApi";
 import BackLink from "../../../../common/BackLink";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
@@ -30,9 +31,9 @@ import {
   RefreshIcon,
   UsersIcon,
 } from "../../../../icons";
-import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 import EntityReplicationLookup from "./EntityReplicationLookup";
 import Loader from "../../Common/Loader/Loader";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 export type StatsResponseType = {
   maxBuckets?: number;
@@ -128,17 +129,18 @@ const SiteReplicationStatus = () => {
           title={"Replication status from all Sites"}
           actions={
             <Fragment>
-              <RBIconButton
+              <TooltipWrapper tooltip={"Refresh"}>
-                onClick={() => {
+                <Button
-                  getStats();
+                  id={"refresh"}
-                }}
+                  onClick={() => {
-                tooltip={"Refresh"}
+                    getStats();
-                text={"Refresh"}
+                  }}
-                showLabelAlways
+                  label={"Refresh"}
-                icon={<RefreshIcon />}
+                  icon={<RefreshIcon />}
-                color="primary"
+                  variant={"regular"}
-                variant={"contained"}
+                  collapseOnSmall={false}
-              />
+                />
+              </TooltipWrapper>
             </Fragment>
           }
         />

portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx

@@ -20,9 +20,10 @@ import { useNavigate, useParams } from "react-router-dom";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
 import {
   fileInputStyles,
   formFieldStyles,
@@ -516,13 +517,12 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
             </Grid>
             <Grid item xs={12} className={classes.settingsButtonContainer}>
               <Button
+                id={"save-tier-configuration"}
                 type="submit"
-                variant="contained"
+                variant="callAction"
-                color="primary"
                 disabled={saving || !isFormValid}
-              >
+                label={"Save Tier Configuration"}
-                Save Tier Configuration
+              />
-              </Button>
             </Grid>
           </form>
         </Grid>

portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx

@@ -21,6 +21,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Box, LinearProgress } from "@mui/material";
+import { Button } from "mds";
 import Grid from "@mui/material/Grid";
 import {
   actionsTray,
@@ -53,7 +54,7 @@ import {
 } from "../../../../common/SecureComponent/permissions";
 import { SecureComponent } from "../../../../common/SecureComponent";
 import { tierTypes } from "./utils";
-import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
+
 import { selDistSet, setErrorSnackMessage } from "../../../../systemSlice";
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../../store";
@@ -276,10 +277,10 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
                 value={filter}
               />
               <div className={classes.rightActionButtons}>
-                <RBIconButton
+                <Button
+                  id={"refresh-list"}
                   icon={<RefreshIcon />}
-                  color="primary"
+                  label={`Refresh List`}
-                  text={`Refresh List`}
                   onClick={() => {
                     setIsLoading(true);
                   }}
@@ -290,12 +291,12 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
                   resource={CONSOLE_UI_RESOURCE}
                   errorProps={{ disabled: true }}
                 >
-                  <RBIconButton
+                  <Button
+                    id={"add-tier"}
                     icon={<AddIcon />}
-                    color="primary"
+                    label={`Create Tier`}
-                    text={`Create Tier`}
                     onClick={addTier}
-                    variant="contained"
+                    variant="callAction"
                   />
                 </SecureComponent>
               </div>

portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx

@@ -16,11 +16,11 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
-
+import { Button } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import {
   formFieldStyles,
@@ -47,7 +47,8 @@ interface ITierCredentialsModal {
 const styles = (theme: Theme) =>
   createStyles({
     buttonContainer: {
-      textAlign: "right",
+      display: "flex",
+      justifyContent: "flex-end",
     },
     ...modalBasic,
     ...formFieldStyles,
@@ -217,13 +218,12 @@ const UpdateTierCredentialsModal = ({
           </Grid>
           <Grid item xs={12} className={classes.buttonContainer}>
             <Button
+              id={"save-credentials"}
               type="submit"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               disabled={savingTiers || !isFormValid}
-            >
+              label={"Save"}
-              Save
+            />
-            </Button>
           </Grid>
           {savingTiers && (
             <Grid item xs={12}>

portal-ui/src/screens/Console/Console.tsx

@@ -22,10 +22,11 @@ import React, {
   useState,
 } from "react";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import debounce from "lodash/debounce";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import Snackbar from "@mui/material/Snackbar";
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
@@ -33,10 +34,8 @@ import { useSelector } from "react-redux";
 import { AppState, useAppDispatch } from "../../store";
 import { snackBarCommon } from "./Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../common/types";
-
 import Menu from "./Menu/Menu";
 import api from "../../common/api";
-
 import MainError from "./Common/MainError/MainError";
 import {
   CONSOLE_UI_RESOURCE,
@@ -174,7 +173,12 @@ const styles = (theme: Theme) =>
       heigh: "60px",
       widht: "100%",
       lineHeight: "60px",
-      textAlign: "center",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      "& button": {
+        marginLeft: 8,
+      },
     },
     progress: {
       height: "3px",
@@ -564,14 +568,13 @@ const Console = ({ classes }: IConsoleProps) => {
                     The instance needs to be restarted for configuration changes
                     to take effect.{" "}
                     <Button
-                      color="secondary"
+                      id={"restart-server"}
-                      size="small"
+                      variant="secondary"
                       onClick={() => {
                         restartServer();
                       }}
-                    >
+                      label={"Restart"}
-                      Restart
+                    />
-                    </Button>
                   </Fragment>
                 )}
               </div>

portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx

@@ -35,10 +35,11 @@ import ServersList from "./ServersList";
 import CounterCard from "./CounterCard";
 import ReportedUsage from "./ReportedUsage";
 import { DiagnosticsMenuIcon } from "../../../../icons/SidebarMenus";
-import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
+import { Button } from "mds";
 import { Link } from "react-router-dom";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 import TimeStatItem from "../TimeStatItem";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
 const BoxItem = ({ children }: { children: any }) => {
   return (
@@ -228,14 +229,15 @@ const BasicDashboard = ({ usage }: IDashboardProps) => {
                       marginRight: "75px",
                     }}
                   >
-                    <RBIconButton
+                    <TooltipWrapper tooltip={"Browse"}>
-                      tooltip={"Browse"}
+                      <Button
-                      onClick={() => {}}
+                        id={"browse-dashboard"}
-                      text={"Browse"}
+                        onClick={() => {}}
-                      icon={<ArrowRightIcon />}
+                        label={"Browse"}
-                      color={"primary"}
+                        icon={<ArrowRightIcon />}
-                      variant={"outlined"}
+                        variant={"regular"}
-                    />
+                      />
+                    </TooltipWrapper>
                   </Link>
                 }
               />

portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx

@@ -16,6 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Grid, InputAdornment, TextField } from "@mui/material";
@@ -38,9 +39,7 @@ import api from "../../../common/api";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import RefreshIcon from "../../../icons/RefreshIcon";
 import SearchIcon from "../../../icons/SearchIcon";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import HelpBox from "../../../common/HelpBox";
-import BoxButton from "../Common/BoxButton/BoxButton";
 
 import withSuspense from "../Common/Components/withSuspense";
 import PageHeader from "../Common/PageHeader/PageHeader";
@@ -243,35 +242,32 @@ const DirectPVMain = ({ classes }: IDirectPVMain) => {
             disabled={notAvailable}
             variant="standard"
           />
-          <BoxIconButton
+          <Button
+            id={"refresh-directpv-list"}
             color="primary"
-            aria-label="Refresh Tenant List"
+            aria-label="Refresh DirectPV List"
             onClick={() => {
               setLoading(true);
             }}
             disabled={notAvailable}
-            size="large"
+            icon={<RefreshIcon />}
-          >
+          />
-            <RefreshIcon />
+          <Button
-          </BoxIconButton>
+            id={"format-selected-drives"}
-          <BoxButton
+            variant="callAction"
-            variant="contained"
-            color="primary"
             disabled={checkedDrives.length <= 0 || notAvailable}
             onClick={formatSelectedDrives}
             label={"Format Selected Drives"}
-          >
+            icon={<GroupIcon />}
-            <GroupIcon />
+          />
-          </BoxButton>
+          <Button
-          <BoxButton
+            id={"format-all-drives"}
-            variant="contained"
+            variant="callAction"
-            color="primary"
             label={"Format All Drives"}
             onClick={formatAllDrives}
             disabled={notAvailable}
-          >
+            icon={<AddIcon />}
-            <AddIcon />
+          />
-          </BoxButton>
         </Grid>
 
         <Grid item xs={12}>

portal-ui/src/screens/Console/DirectPV/FormatErrorsResult.tsx

@@ -14,10 +14,11 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { Button, Grid, Theme } from "@mui/material";
+import React from "react";
+import { Grid, Theme } from "@mui/material";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import React from "react";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import { IDirectPVFormatResItem } from "./types";
@@ -97,22 +98,19 @@ const FormatErrorsResult = ({
         </Grid>
         <Grid item xs={12} className={classes.modalButtonBar}>
           <Button
-            color="primary"
+            id={"download-results"}
-            variant="outlined"
+            variant="regular"
             onClick={() => {
               download("csiFormatErrors.json", JSON.stringify([...errorsList]));
             }}
-          >
+            label={"Download"}
-            Download
+          />
-          </Button>
           <Button
+            id={"finish"}
             onClick={onCloseFormatErrorsList}
-            color="primary"
+            variant="callAction"
-            variant="contained"
+            label={"Donw"}
-            autoFocus
+          />
-          >
-            Done
-          </Button>
         </Grid>
       </Grid>
     </ModalWrapper>

portal-ui/src/screens/Console/Groups/AddGroupMember.tsx

@@ -3,7 +3,7 @@ import UsersSelectors from "./UsersSelectors";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
 import Grid from "@mui/material/Grid";
-import { Button } from "@mui/material";
+import { Button } from "mds";
 import api from "../../../common/api";
 import { ErrorResponseHandler } from "../../../common/types";
 
@@ -95,26 +95,24 @@ const AddGroupMember = ({
       </Grid>
       <Grid item xs={12} className={classes.modalButtonBar}>
         <Button
+          id={"reset-add-group-member"}
           type="button"
-          variant="outlined"
+          variant="regular"
-          color="primary"
           onClick={() => {
             setSelectedUsers(preSelectedUsers);
           }}
-        >
+          label={"Reset"}
-          Reset
+        />
-        </Button>
 
         <Button
+          id={"save-add-group-member"}
           type="button"
-          variant="contained"
+          variant="callAction"
-          color="primary"
           onClick={() => {
             addMembersToGroup();
           }}
-        >
+          label={"Save"}
-          Save
+        />
-        </Button>
       </Grid>
     </ModalWrapper>
   );

portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx

@@ -24,7 +24,8 @@ import {
   modalStyleUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
+import { Button } from "mds";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -146,23 +147,21 @@ const AddGroupScreen = ({ classes }: IAddGroupProps) => {
               </Grid>
               <Grid item xs={12} className={classes.modalButtonBar}>
                 <Button
+                  id={"clear-group"}
                   type="button"
-                  variant="outlined"
+                  variant="regular"
-                  color="primary"
+                  style={classes.spacerRight}
-                  className={classes.spacerRight}
                   onClick={resetForm}
-                >
+                  label={"Clear"}
-                  Clear
+                />
-                </Button>
 
                 <Button
+                  id={"save-group"}
                   type="submit"
-                  variant="contained"
+                  variant="callAction"
-                  color="primary"
                   disabled={saving || !validGroup}
-                >
+                  label={"Save"}
-                  Save
+                />
-                </Button>
               </Grid>
               {saving && (
                 <Grid item xs={12}>

portal-ui/src/screens/Console/Groups/Groups.tsx

@@ -17,6 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
@@ -56,11 +57,12 @@ import {
 } from "../../../common/SecureComponent";
 
 import withSuspense from "../Common/Components/withSuspense";
-import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
+
 import { encodeURLString } from "../../../common/utils";
 
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 
 const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
 const SetPolicy = withSuspense(
@@ -236,17 +238,18 @@ const Groups = ({ classes }: IGroupsProps) => {
               matchAll
               errorProps={{ disabled: true }}
             >
-              <RBIconButton
+              <TooltipWrapper tooltip={"Select Policy"}>
-                tooltip={"Select Policy"}
+                <Button
-                onClick={() => {
+                  id={"assign-policy"}
-                  setPolicyOpen(true);
+                  onClick={() => {
-                }}
+                    setPolicyOpen(true);
-                text={"Assign Policy"}
+                  }}
-                icon={<IAMPoliciesIcon />}
+                  label={"Assign Policy"}
-                color="primary"
+                  icon={<IAMPoliciesIcon />}
-                disabled={checkedGroups.length < 1}
+                  disabled={checkedGroups.length < 1}
-                variant={"outlined"}
+                  variant={"regular"}
-              />
+                />
+              </TooltipWrapper>
             </SecureComponent>
             <SecureComponent
               resource={CONSOLE_UI_RESOURCE}
@@ -254,17 +257,18 @@ const Groups = ({ classes }: IGroupsProps) => {
               matchAll
               errorProps={{ disabled: true }}
             >
-              <RBIconButton
+              <TooltipWrapper tooltip={"Delete Selected"}>
-                tooltip={"Delete Selected"}
+                <Button
-                onClick={() => {
+                  id="delete-selected-groups"
-                  setDeleteOpen(true);
+                  onClick={() => {
-                }}
+                    setDeleteOpen(true);
-                text={"Delete Selected"}
+                  }}
-                icon={<DeleteIcon />}
+                  label={"Delete Selected"}
-                color="secondary"
+                  icon={<DeleteIcon />}
-                disabled={checkedGroups.length === 0}
+                  variant="secondary"
-                variant={"outlined"}
+                  disabled={checkedGroups.length === 0}
-              />
+                />
+              </TooltipWrapper>
             </SecureComponent>
             <SecureComponent
               resource={CONSOLE_UI_RESOURCE}
@@ -275,16 +279,17 @@ const Groups = ({ classes }: IGroupsProps) => {
               matchAll
               errorProps={{ disabled: true }}
             >
-              <RBIconButton
+              <TooltipWrapper tooltip={"Create Group"}>
-                tooltip={"Create Group"}
+                <Button
-                text={"Create Group"}
+                  id={"create-group"}
-                variant="contained"
+                  label={"Create Group"}
-                color="primary"
+                  variant="callAction"
-                icon={<AddIcon />}
+                  icon={<AddIcon />}
-                onClick={() => {
+                  onClick={() => {
-                  navigate(`${IAM_PAGES.GROUPS_ADD}`);
+                    navigate(`${IAM_PAGES.GROUPS_ADD}`);
-                }}
+                  }}
-              />
+                />
+              </TooltipWrapper>
             </SecureComponent>
           </Box>
         </Grid>

portal-ui/src/screens/Console/Groups/GroupsDetails.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
 import { useNavigate, useParams } from "react-router-dom";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import {
   actionsTray,
@@ -40,11 +41,12 @@ import {
   SecureComponent,
 } from "../../../common/SecureComponent";
 import GroupDetailsHeader from "./GroupDetailsHeader";
-import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
+
 import { decodeURLString, encodeURLString } from "../../../common/utils";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import { setSelectedPolicies } from "../Users/AddUsersSlice";
+import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -189,16 +191,17 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
           scopes={[IAM_SCOPES.ADMIN_ADD_USER_TO_GROUP]}
           errorProps={{ disabled: true }}
         >
-          <RBIconButton
+          <TooltipWrapper tooltip={memberActionText}>
-            tooltip={memberActionText}
+            <Button
-            text={memberActionText}
+              id={"add-user-group"}
-            variant="contained"
+              label={memberActionText}
-            color="primary"
+              variant="callAction"
-            icon={<AddIcon />}
+              icon={<AddIcon />}
-            onClick={() => {
+              onClick={() => {
-              setUsersOpen(true);
+                setUsersOpen(true);
-            }}
+              }}
-          />
+            />
+          </TooltipWrapper>
         </SecureComponent>
       </div>
 
@@ -233,17 +236,17 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
     <React.Fragment>
       <div className={classes.actionsTray}>
         <PanelTitle>Policies</PanelTitle>
-
+        <TooltipWrapper tooltip={"Set Policies"}>
-        <RBIconButton
+          <Button
-          tooltip={`Set Policies`}
+            id={"set-policies"}
-          text={`Set Policies`}
+            label={`Set Policies`}
-          variant="contained"
+            variant="callAction"
-          color="primary"
+            icon={<IAMPoliciesIcon />}
-          icon={<IAMPoliciesIcon />}
+            onClick={() => {
-          onClick={() => {
+              setPolicyOpen(true);
-            setPolicyOpen(true);
+            }}
-          }}
+          />
-        />
+        </TooltipWrapper>
       </div>
       <div className={classes.tableBlock}>
         <TableWrapper
@@ -312,16 +315,16 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
                   errorProps={{ disabled: true }}
                 >
                   <div className={classes.spacerLeft}>
-                    <RBIconButton
+                    <TooltipWrapper tooltip={"Delete Group"}>
-                      tooltip={`Delete Group`}
+                      <Button
-                      text={``}
+                        id={"delete-user-group"}
-                      variant="outlined"
+                        variant="secondary"
-                      color="secondary"
+                        icon={<TrashIcon />}
-                      icon={<TrashIcon />}
+                        onClick={() => {
-                      onClick={() => {
+                          setDeleteOpen(true);
-                        setDeleteOpen(true);
+                        }}
-                      }}
+                      />
-                    />
+                    </TooltipWrapper>
                   </div>
                 </SecureComponent>
               </Fragment>

portal-ui/src/screens/Console/Heal/Heal.tsx

@@ -18,7 +18,6 @@ import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { HorizontalBar } from "react-chartjs-2";
 import {
-  Button,
   FormControl,
   Grid,
   InputBase,
@@ -28,6 +27,7 @@ import {
 } from "@mui/material";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { wsProtocol } from "../../../utils/wsUtils";
@@ -342,14 +342,14 @@ const Heal = () => {
               </Grid>
               <Grid item xs={12} className={classes.buttonBar}>
                 <Button
+                  id={"start-heal"}
                   type="submit"
-                  variant="contained"
+                  variant="callAction"
                   color="primary"
                   disabled={start}
                   onClick={() => setStart(true)}
-                >
+                  label={"Start"}
-                  Start
+                />
-                </Button>
               </Grid>
             </Grid>
             <Grid item xs={12} className={classes.graphContainer}>

portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx

@@ -22,6 +22,7 @@ import {
 } from "websocket";
 import { AppState, useAppDispatch } from "../../../store";
 import { useSelector } from "react-redux";
+import { Button } from "mds";
 import {
   DiagStatError,
   DiagStatInProgress,
@@ -42,7 +43,7 @@ import {
   actionsTray,
   containerForHeader,
 } from "../Common/FormComponents/common/styleLibrary";
-import { Button, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import PageHeader from "../Common/PageHeader/PageHeader";
 
 import TestWrapper from "../Common/TestWrapper/TestWrapper";
@@ -78,7 +79,8 @@ const styles = (theme: Theme) =>
       marginBottom: 25,
     },
     startDiagnostic: {
-      textAlign: "right",
+      display: "flex",
+      justifyContent: "flex-end",
       margin: 25,
       marginBottom: 0,
     },
@@ -270,14 +272,13 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
                     {serverDiagnosticStatus !== DiagStatError &&
                       !downloadDisabled && (
                         <Button
+                          id={"download"}
                           type="submit"
-                          variant="contained"
+                          variant="callAction"
-                          color="primary"
                           onClick={() => download()}
                           disabled={downloadDisabled}
-                        >
+                          label={"Download"}
-                          Download
+                        />
-                        </Button>
                       )}
                     <Grid
                       item
@@ -289,13 +290,11 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
                       <Button
                         id="start-new-diagnostic"
                         type="submit"
-                        variant="contained"
+                        variant="callAction"
-                        color="primary"
                         disabled={startDiagnostic}
                         onClick={() => setStartDiagnostic(true)}
-                      >
+                        label={buttonStartText}
-                        {buttonStartText}
+                      />
-                      </Button>
                     </Grid>
                   </Fragment>
                 )}

portal-ui/src/screens/Console/License/ActivationModal.tsx

@@ -1,478 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-import React, { Fragment, useState } from "react";
-
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { LinearProgress } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import {
-  containerForHeader,
-  formFieldStyles,
-} from "../Common/FormComponents/common/styleLibrary";
-import {
-  SubnetLoginRequest,
-  SubnetLoginResponse,
-  SubnetLoginWithMFARequest,
-  SubnetOrganization,
-  SubnetRegisterRequest,
-  SubnetRegTokenResponse,
-} from "./types";
-
-import { ErrorResponseHandler } from "../../../common/types";
-import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import api from "../../../common/api";
-import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
-import RadioGroupSelector from "../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
-import Link from "@mui/material/Link";
-import { setModalErrorSnackMessage } from "../../../systemSlice";
-import { useAppDispatch } from "../../../store";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    subnetLicenseKey: {},
-    subnetLoginForm: {},
-    licenseKeyField: {},
-    pageTitle: {
-      marginBottom: 20,
-    },
-    registrationMode: {
-      cursor: "pointer",
-    },
-    button: {
-      textTransform: "none",
-      fontSize: 15,
-      fontWeight: 700,
-      background:
-        "transparent linear-gradient(90deg, #073052 0%, #081c42 100%) 0% 0% no-repeat padding-box",
-      color: "#fff",
-    },
-    buttonSignup: {
-      textTransform: "none",
-      fontSize: 15,
-      fontWeight: 700,
-      marginLeft: 15,
-    },
-    ...formFieldStyles,
-    ...containerForHeader(theme.spacing(4)),
-  });
-
-interface IActivationModal {
-  classes: any;
-  open: boolean;
-  closeModal: () => void;
-}
-
-const ActivationModal = ({ classes, open, closeModal }: IActivationModal) => {
-  const dispatch = useAppDispatch();
-  const [license, setLicense] = useState<string>("");
-  const [subnetPassword, setSubnetPassword] = useState<string>("");
-  const [subnetEmail, setSubnetEmail] = useState<string>("");
-  const [subnetMFAToken, setSubnetMFAToken] = useState<string>("");
-  const [subnetOTP, setSubnetOTP] = useState<string>("");
-  const [subnetAccessToken, setSubnetAccessToken] = useState<string>("");
-  const [selectedSubnetOrganisation, setSelectedSubnetOrganisation] =
-    useState<string>("");
-  const [subnetRegToken, setSubnetRegToken] = useState<string>("");
-  const [subnetOrganizations, setSubnetOrganizations] = useState<
-    SubnetOrganization[]
-  >([]);
-  const [onlineActivation, setOnlineActivation] = useState<boolean>(true);
-
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const clearForm = () => {
-    setLicense("");
-    setSubnetPassword("");
-    setSubnetEmail("");
-    setSubnetMFAToken("");
-    setSubnetOTP("");
-  };
-
-  const fetchSubnetRegToken = () => {
-    if (loading || subnetRegToken) {
-      return;
-    }
-    setLoading(true);
-    api
-      .invoke("GET", "/api/v1/subnet/registration-token")
-      .then((resp: SubnetRegTokenResponse) => {
-        setLoading(false);
-        if (resp && resp.regToken) {
-          setSubnetRegToken(resp.regToken);
-        }
-      })
-      .catch((err: ErrorResponseHandler) => {
-        setLoading(false);
-        dispatch(setModalErrorSnackMessage(err));
-      });
-  };
-
-  const subnetRegister = () => {
-    if (loading) {
-      return;
-    }
-    setLoading(true);
-    if (subnetAccessToken && selectedSubnetOrganisation) {
-      const request: SubnetRegisterRequest = {
-        token: subnetAccessToken,
-        account_id: selectedSubnetOrganisation,
-      };
-      api
-        .invoke("POST", "/api/v1/subnet/register", request)
-        .then(() => {
-          setLoading(false);
-          clearForm();
-          closeModal();
-        })
-        .catch((err: ErrorResponseHandler) => {
-          setLoading(false);
-          dispatch(setModalErrorSnackMessage(err));
-        });
-    }
-  };
-
-  const subnetLoginWithMFA = () => {
-    if (loading) {
-      return;
-    }
-    setLoading(true);
-    const request: SubnetLoginWithMFARequest = {
-      username: subnetEmail,
-      otp: subnetOTP,
-      mfa_token: subnetMFAToken,
-    };
-    api
-      .invoke("POST", "/api/v1/subnet/login/mfa", request)
-      .then((resp: SubnetLoginResponse) => {
-        setLoading(false);
-        if (resp && resp.access_token && resp.organizations.length > 0) {
-          setSubnetAccessToken(resp.access_token);
-          setSubnetOrganizations(resp.organizations);
-          setSelectedSubnetOrganisation(
-            resp.organizations[0].accountId.toString()
-          );
-        }
-      })
-      .catch((err: ErrorResponseHandler) => {
-        setLoading(false);
-        setSubnetOTP("");
-        dispatch(setModalErrorSnackMessage(err));
-      });
-  };
-
-  const subnetLogin = () => {
-    if (loading) {
-      return;
-    }
-    setLoading(true);
-    let request: SubnetLoginRequest = {
-      username: subnetEmail,
-      password: subnetPassword,
-      apiKey: license,
-    };
-    api
-      .invoke("POST", "/api/v1/subnet/login", request)
-      .then((resp: SubnetLoginResponse) => {
-        setLoading(false);
-        if (resp && resp.registered) {
-          clearForm();
-          closeModal();
-        } else if (resp && resp.mfa_token) {
-          setSubnetMFAToken(resp.mfa_token);
-        } else if (resp && resp.access_token && resp.organizations.length > 0) {
-          setSubnetAccessToken(resp.access_token);
-          setSubnetOrganizations(resp.organizations);
-          setSelectedSubnetOrganisation(
-            resp.organizations[0].accountId.toString()
-          );
-        }
-      })
-      .catch((err: ErrorResponseHandler) => {
-        setLoading(false);
-        clearForm();
-        dispatch(setModalErrorSnackMessage(err));
-      });
-  };
-
-  let clusterRegistrationForm: JSX.Element;
-  if (subnetAccessToken && subnetOrganizations.length > 0) {
-    clusterRegistrationForm = (
-      <Fragment>
-        <Grid item xs={12}>
-          <Typography variant="subtitle2" gutterBottom component="div">
-            Register MinIO cluster
-          </Typography>
-        </Grid>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <RadioGroupSelector
-            tooltip={"Please choose the organization for this cluster."}
-            currentSelection={selectedSubnetOrganisation}
-            id="subnet-organisation"
-            name="subnet-organisation"
-            label="Select an Organisation"
-            onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-              setSelectedSubnetOrganisation(e.target.value as string);
-            }}
-            selectorOptions={subnetOrganizations.map((organisation) => ({
-              value: organisation.accountId.toString(),
-              label: organisation.company,
-            }))}
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <Button
-            className={classes.button}
-            color="primary"
-            onClick={() => subnetRegister()}
-            disabled={loading || subnetAccessToken.trim().length === 0}
-            variant="contained"
-          >
-            Register
-          </Button>
-        </Grid>
-      </Fragment>
-    );
-  } else if (subnetMFAToken) {
-    clusterRegistrationForm = (
-      <Fragment>
-        <Grid item xs={12}>
-          <Typography variant="subtitle2" gutterBottom component="div">
-            Two-Factor Authentication
-          </Typography>
-          <Typography variant="caption" display="block" gutterBottom>
-            Please enter the 6-digit verification code that was sent to your
-            email address. This code will be valid for 5 minutes.
-          </Typography>
-        </Grid>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <InputBoxWrapper
-            overlayIcon={<LockOutlinedIcon />}
-            id="subnet-otp"
-            name="subnet-otp"
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              setSubnetOTP(event.target.value);
-            }}
-            placeholder=""
-            label=""
-            type="text"
-            value={subnetOTP}
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <Button
-            color="primary"
-            onClick={() => subnetLoginWithMFA()}
-            disabled={
-              loading ||
-              subnetOTP.trim().length === 0 ||
-              subnetMFAToken.trim().length === 0
-            }
-            variant="contained"
-          >
-            Verify
-          </Button>
-        </Grid>
-      </Fragment>
-    );
-  } else {
-    clusterRegistrationForm = (
-      <Fragment>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <InputBoxWrapper
-            overlayIcon={<PersonOutlineOutlinedIcon />}
-            id="subnet-email"
-            name="subnet-email"
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              setSubnetEmail(event.target.value);
-            }}
-            placeholder="email"
-            label=""
-            type="text"
-            value={subnetEmail}
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <InputBoxWrapper
-            overlayIcon={<LockOutlinedIcon />}
-            id="subnet-password"
-            name="subnet-password"
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              setSubnetPassword(event.target.value);
-            }}
-            placeholder="password"
-            label=""
-            type="password"
-            value={subnetPassword}
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <Button
-            color="primary"
-            onClick={() => subnetLogin()}
-            disabled={
-              loading ||
-              subnetEmail.trim().length === 0 ||
-              subnetPassword.trim().length === 0
-            }
-            variant="contained"
-          >
-            Login
-          </Button>
-          <Button
-            className={classes.buttonSignup}
-            color="primary"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="#"
-            onClick={(e) => {
-              e.preventDefault();
-              window.open("https://min.io/pricing", "_blank");
-            }}
-            variant="outlined"
-          >
-            Sign Up
-          </Button>
-        </Grid>
-        <Typography variant="caption" display="block" gutterBottom>
-          <Link
-            className={classes.registrationMode}
-            color="inherit"
-            onClick={() => {
-              fetchSubnetRegToken();
-              setOnlineActivation(false);
-            }}
-          >
-            Offline Activation
-          </Link>
-        </Typography>
-      </Fragment>
-    );
-  }
-
-  return open ? (
-    <ModalWrapper
-      title=""
-      modalOpen={open}
-      onClose={() => {
-        setLicense("");
-        setSubnetPassword("");
-        setSubnetEmail("");
-        closeModal();
-      }}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-    >
-      <Grid container alignItems="center" item xs={12}>
-        <Grid item xs={12}>
-          <Typography component="h2" variant="h6" className={classes.pageTitle}>
-            Activate SUBNET License
-          </Typography>
-        </Grid>
-        {onlineActivation ? (
-          <Grid item className={classes.subnetLoginForm} xs={12}>
-            <Grid container>{clusterRegistrationForm}</Grid>
-          </Grid>
-        ) : (
-          <Grid item className={classes.subnetLicenseKey} xs={12}>
-            <Typography variant="caption" display="block" gutterBottom>
-              Step 1: Copy the following registration token
-            </Typography>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                onChange={() => {}}
-                id="registration-token"
-                name="registration-token"
-                placeholder=""
-                label=""
-                type="text"
-                value={subnetRegToken}
-                disabled
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => navigator.clipboard.writeText(subnetRegToken)}
-              >
-                Copy
-              </Button>
-            </Grid>
-            <Typography variant="caption" display="block" gutterBottom>
-              Step 2: Use the previous token to register your cluster at:{" "}
-              <Link
-                color="inherit"
-                href="https://subnet.min.io/cluster/register"
-                target="_blank"
-              >
-                https://subnet.min.io/cluster/register
-              </Link>
-            </Typography>
-            <Typography variant="caption" display="block" gutterBottom>
-              Step 3: Enter the API key generated by SUBNET
-            </Typography>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                value={license}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                  setLicense(event.target.value)
-                }
-                id="api-key"
-                name="api-key"
-                placeholder=""
-                label=""
-                type="text"
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => subnetLogin()}
-                disabled={loading || license.trim().length === 0}
-              >
-                Activate
-              </Button>
-            </Grid>
-            <Typography variant="caption" display="block" gutterBottom>
-              <Link
-                className={classes.registrationMode}
-                color="inherit"
-                onClick={() => setOnlineActivation(true)}
-              >
-                Online Activation
-              </Link>
-            </Typography>
-          </Grid>
-        )}
-      </Grid>
-      {loading && (
-        <Grid item xs={12}>
-          <LinearProgress />
-        </Grid>
-      )}
-    </ModalWrapper>
-  ) : null;
-};
-
-export default withStyles(styles)(ActivationModal);

portal-ui/src/screens/Console/License/LicenseConsentModal.tsx

@@ -16,7 +16,8 @@
 
 import React from "react";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
+import { Button } from "mds";
 import { AGPLV3DarkLogo } from "../../../icons";
 import { setLicenseConsent } from "./utils";
 
@@ -109,13 +110,12 @@ const LicenseConsentModal = ({
           }}
         >
           <Button
+            id={"confirm"}
             type="button"
-            variant="contained"
+            variant="callAction"
-            color="primary"
             onClick={recordAgplConsent}
-          >
+            label={"Acknowledge"}
-            Acknowledge
+          />
-          </Button>
         </Box>
       </Box>
     </ModalWrapper>

portal-ui/src/screens/Console/License/LicensePlans.tsx

@@ -17,7 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import clsx from "clsx";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import Button from "@mui/material/Button";
+import { Button } from "mds";
 import { Theme, useTheme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import { SubnetInfo } from "./types";
@@ -296,20 +296,12 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
       currentPlan !== "community" ? "https://subnet.min.io" : link;
     return (
       <Button
+        id={`license-action-${link}`}
         variant={variant}
-        color="primary"
+        style={{
-        target="_blank"
-        rel="noopener noreferrer"
-        sx={{
           marginTop: "12px",
           width: "80%",
-          "&.MuiButton-contained": {
-            padding: 0,
-            paddingLeft: "8px",
-            paddingRight: "8px",
-          },
         }}
-        href={linkToNav}
         disabled={
           currentPlan !== LICENSE_PLANS.COMMUNITY && currentPlan !== plan
         }
@@ -321,9 +313,8 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
             "_blank"
           );
         }}
-      >
+        label={btnText}
-        {btnText}
+      />
-      </Button>
     );
   };
 
@@ -621,7 +612,7 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
                 {getButton(
                   `https://slack.min.io${linkTracker}`,
                   "Join Slack",
-                  "outlined",
+                  "regular",
                   LICENSE_PLANS.COMMUNITY
                 )}
               </Box>
@@ -663,7 +654,7 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
                 !PAID_PLANS.includes(currentPlan)
                   ? "Subscribe"
                   : "Login to SUBNET",
-                "contained",
+                "callAction",
                 LICENSE_PLANS.STANDARD
               )}
             </Box>
@@ -715,7 +706,7 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => {
                 !PAID_PLANS.includes(currentPlan)
                   ? "Subscribe"
                   : "Login to SUBNET",
-                "contained",
+                "callAction",
                 LICENSE_PLANS.ENTERPRISE
               )}
             </Box>

portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx

@@ -16,17 +16,11 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { useSelector } from "react-redux";
-import {
+import { FormControl, Grid, InputBase, MenuItem, Select } from "@mui/material";
-  Button,
-  FormControl,
-  Grid,
-  InputBase,
-  MenuItem,
-  Select,
-} from "@mui/material";
 
 import moment from "moment/moment";
 import { ErrorResponseHandler } from "../../../../../src/common/types";
@@ -330,27 +324,29 @@ const ErrorLogs = () => {
               </FormControl>
             )}
           </Grid>
-          <Grid item xs={2} textAlign={"right"}>
+          <Grid
+            item
+            xs={2}
+            sx={{ display: "flex", justifyContent: "flex-end" }}
+          >
             {!logsStarted && (
               <Button
+                id={"start-logs"}
                 type="submit"
-                variant="contained"
+                variant="callAction"
-                color="primary"
                 disabled={false}
                 onClick={startLogs}
-              >
+                label={"Start Logs"}
-                Start Logs
+              />
-              </Button>
             )}
             {logsStarted && (
               <Button
+                id={"stop-logs"}
                 type="button"
-                variant="contained"
+                variant="callAction"
-                color="primary"
                 onClick={stopLogs}
-              >
+                label={"Stop Logs"}
-                Stop Logs
+              />
-              </Button>
             )}
           </Grid>
           <Grid item xs={12} className={classes.actionsTray}>

portal-ui/src/screens/Console/Logs/LogSearch/LogSearchFullModal.tsx

@@ -15,9 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import get from "lodash/get";
+import { Grid } from "@mui/material";
-import { Button, Grid } from "@mui/material";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
+import get from "lodash/get";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -79,13 +80,12 @@ const LogSearchFullModal = ({
           </Grid>
           <Grid item xs={12} className={classes.buttonContainer}>
             <Button
-              type="button"
+              id={"close-log-search"}
-              variant="contained"
+              variant="callAction"
               color="primary"
               onClick={onClose}
-            >
+              label={"Close"}
-              Close
+            />
-            </Button>
           </Grid>
         </Grid>
       </ModalWrapper>

portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx

@@ -16,11 +16,12 @@
 
 import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import get from "lodash/get";
+import { Button } from "mds";
 import { Theme } from "@mui/material/styles";
+import { Grid } from "@mui/material";
+import get from "lodash/get";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Grid } from "@mui/material";
 import {
   advancedFilterToggleStyles,
   containerForHeader,
@@ -400,13 +401,12 @@ const LogsSearchMain = ({ classes }: ILogSearchProps) => {
               </Grid>
               <Grid item xs={12} className={classes.endLineAction}>
                 <Button
+                  id={"get-information"}
                   type="button"
-                  variant="contained"
+                  variant="callAction"
-                  color="primary"
                   onClick={triggerLoad}
-                >
+                  label={"Get Information"}
-                  Get Information
+                />
-                </Button>
               </Grid>
             </Grid>
             <Grid item xs={12} className={classes.tableBlock}>

portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx

@@ -21,7 +21,7 @@ import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button } from "@mui/material";
+import { Button } from "mds";
 
 import api from "../../../common/api";
 import {
@@ -227,13 +227,12 @@ const AddNotificationEndpoint = ({
                 </Grid>
                 <Grid item xs={12} className={classes.settingsButtonContainer}>
                   <Button
+                    id={"save-notification-target"}
                     type="submit"
-                    variant="contained"
+                    variant="callAction"
-                    color="primary"
                     disabled={saving}
-                  >
+                    label={"Save Notification Target"}
-                    Save Notification Target
+                  />
-                  </Button>
                 </Grid>
               </div>
             </Fragment>

portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx

@@ -15,13 +15,13 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useCallback, useEffect, useState } from "react";
-
+import { Button } from "mds";
 import { useLocation, useNavigate } from "react-router-dom";
 import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import api from "../../../../common/api";
 import ConfTargetGeneric from "../ConfTargetGeneric";
@@ -220,30 +220,21 @@ const EditConfiguration = ({
               }}
             >
               <Button
-                type="button"
+                id={"restore-defaults"}
-                variant="outlined"
+                variant="secondary"
-                color="secondary"
-                sx={{
-                  padding: {
-                    xs: "3px", //avoid wrapping on smaller screens
-                    md: "20px",
-                  },
-                }}
                 onClick={() => {
                   setResetConfigurationOpen(true);
                 }}
-              >
+                label={"Restore Defaults"}
-                Restore Defaults
+              />
-              </Button>
               &nbsp; &nbsp;
               <Button
+                id={"save"}
                 type="submit"
-                variant="contained"
+                variant="callAction"
-                color="primary"
                 disabled={saving}
-              >
+                label={"Save"}
-                Save
+              />
-              </Button>
             </Grid>
           </form>
         </Box>

portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-
+import { Button } from "mds";
 import { useNavigate } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -47,7 +47,7 @@ import HelpBox from "../../../common/HelpBox";
 import AButton from "../Common/AButton/AButton";
 import PageLayout from "../Common/Layout/PageLayout";
 import SearchBox from "../Common/SearchBox";
-import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
+
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import {
   setErrorSnackMessage,
@@ -55,6 +55,7 @@ import {
 } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import ConfirmDeleteTargetModal from "./ConfirmDeleteTargetModal";
+import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 
 interface IListNotificationEndpoints {
   classes: any;
@@ -191,27 +192,28 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
             value={filter}
           />
           <div className={classes.rightActionItems}>
-            <RBIconButton
+            <TooltipWrapper tooltip={"Refresh List"}>
-              tooltip={"Refresh List"}
+              <Button
-              text={"Refresh"}
+                id={"reload-notification-endpoints"}
-              variant="outlined"
+                label={"Refresh"}
-              color="primary"
+                variant="regular"
-              icon={<RefreshIcon />}
+                icon={<RefreshIcon />}
-              onClick={() => {
+                onClick={() => {
-                setIsLoading(true);
+                  setIsLoading(true);
-              }}
+                }}
-            />
+              />
-
+            </TooltipWrapper>
-            <RBIconButton
+            <TooltipWrapper tooltip={"Add Notification Target"}>
-              tooltip={"Add Notification Target"}
+              <Button
-              text={" Add Notification Target"}
+                id={"add-notification-target"}
-              variant="contained"
+                label={" Add Notification Target"}
-              color="primary"
+                variant="callAction"
-              icon={<AddIcon />}
+                icon={<AddIcon />}
-              onClick={() => {
+                onClick={() => {
-                navigate(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD);
+                  navigate(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD);
-              }}
+                }}
-            />
+              />
+            </TooltipWrapper>
           </div>
         </Grid>
         {isLoading && <LinearProgress />}

portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx

@@ -22,7 +22,7 @@ import withStyles from "@mui/styles/withStyles";
 import createStyles from "@mui/styles/createStyles";
 import { Theme } from "@mui/material/styles";
 import { Link, useNavigate } from "react-router-dom";
-import { Button, IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { objectBrowserCommon } from "../Common/FormComponents/common/styleLibrary";
 import { encodeURLString } from "../../../common/utils";
 import { BackCaretIcon, CopyIcon, NewPathIcon } from "../../../icons";
@@ -33,7 +33,7 @@ import withSuspense from "../Common/Components/withSuspense";
 import { setSnackBarMessage } from "../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../store";
 import { setVersionsModeEnabled } from "./objectBrowserSlice";
-import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
+import { Button } from "mds";
 
 const CreatePathModal = withSuspense(
   React.lazy(
@@ -192,31 +192,28 @@ const BrowserBreadcrumbs = ({
             {listBreadcrumbs}
           </div>
           <CopyToClipboard text={`${bucketName}/${splitPaths.join("/")}`}>
-            <RBIconButton
+            <Button
               id={"copy-path"}
-              icon={<CopyIcon />}
+              icon={
-              disableTouchRipple
+                <CopyIcon
-              disableRipple
+                  style={{
-              focusRipple={false}
+                    width: "12px",
-              variant={"outlined"}
+                    height: "12px",
+                    fill: "#969FA8",
+                    marginTop: -1,
+                  }}
+                />
+              }
+              variant={"regular"}
               onClick={() => {
                 dispatch(setSnackBarMessage("Path copied to clipboard"));
               }}
-              sx={{
+              style={{
-                marginRight: "3px",
-                padding: "0",
-                color: "#969FA8",
-                border: "#969FA8 1px solid",
                 width: "28px",
                 height: "28px",
-
+                color: "#969FA8",
-                "& .MuiButton-root": {
+                border: "#969FA8 1px solid",
-                  height: "28px",
+                marginRight: 5,
-                },
-                "& .min-icon": {
-                  width: "12px",
-                  height: "12px",
-                },
               }}
             />
           </CopyToClipboard>
@@ -233,25 +230,15 @@ const BrowserBreadcrumbs = ({
                 rewindEnabled ||
                 !hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT])
               }
-              endIcon={<NewPathIcon />}
+              icon={<NewPathIcon style={{ fill: "#969FA8" }} />}
-              disableTouchRipple
+              style={{
-              disableRipple
+                whiteSpace: "nowrap",
-              focusRipple={false}
-              sx={{
                 color: "#969FA8",
                 border: "#969FA8 1px solid",
-                whiteSpace: "nowrap",
-                minWidth: "160px",
-                "@media (max-width: 1060px)": {
-                  fontSize: 0,
-                  minWidth: 40,
-                  padding: "0 10px 0 0",
-                },
               }}
-              variant={"outlined"}
+              variant={"regular"}
-            >
+              label={"Create new path"}
-              Create new path
+            />
-            </Button>
           </Tooltip>
         )}
       </div>

portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx

@@ -17,7 +17,7 @@
 import React, { useState } from "react";
 import Grid from "@mui/material/Grid";
 import createStyles from "@mui/styles/createStyles";
-import { Button } from "@mui/material";
+import { Button } from "mds";
 import makeStyles from "@mui/styles/makeStyles";
 import { Theme } from "@mui/material/styles";
 import { EditIcon } from "../../../icons";
@@ -189,13 +189,13 @@ const RenameLongFileName = ({
           </Grid>
           <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
+              id={"download-file"}
               type="submit"
-              variant="contained"
+              variant="callAction"
               color="primary"
               disabled={newFileName.length > 200 && !acceptLongName}
-            >
+              label={"Download File"}
-              Download File
+            />
-            </Button>
           </Grid>
         </Grid>
       </form>

portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx

@@ -16,7 +16,8 @@
 
 import React, { Fragment, useState } from "react";
 import Grid from "@mui/material/Grid";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
+import { Button } from "mds";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -132,22 +133,21 @@ const AddPolicyScreen = () => {
                     }}
                   >
                     <Button
+                      id={"clear"}
                       type="button"
-                      variant="outlined"
+                      variant="regular"
-                      color="primary"
                       onClick={resetForm}
-                    >
+                      label={"Clear"}
-                      Clear
+                    />
-                    </Button>
 
                     <Button
+                      id={"save-policy"}
                       type="submit"
-                      variant="contained"
+                      variant="callAction"
                       color="primary"
                       disabled={addLoading || !validSave}
-                    >
+                      label={"Save"}
-                      Save
+                    />
-                    </Button>
                   </Box>
                 </Grid>
               </Grid>

portal-ui/src/screens/Console/Policies/ListPolicies.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-
+import { Button } from "mds";
 import { useNavigate } from "react-router-dom";
 import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
@@ -49,10 +49,11 @@ import {
 import SearchBox from "../Common/SearchBox";
 
 import withSuspense from "../Common/Components/withSuspense";
-import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
+
 import { encodeURLString } from "../../../common/utils";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
@@ -193,16 +194,17 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
               resource={CONSOLE_UI_RESOURCE}
               errorProps={{ disabled: true }}
             >
-              <RBIconButton
+              <TooltipWrapper tooltip={"Create Policy"}>
-                tooltip={"Create Policy"}
+                <Button
-                text={"Create Policy"}
+                  id={"create-policy"}
-                variant="contained"
+                  label={"Create Policy"}
-                color="primary"
+                  variant="callAction"
-                icon={<AddIcon />}
+                  icon={<AddIcon />}
-                onClick={() => {
+                  onClick={() => {
-                  navigate(`${IAM_PAGES.POLICY_ADD}`);
+                    navigate(`${IAM_PAGES.POLICY_ADD}`);
-                }}
+                  }}
-              />
+                />
+              </TooltipWrapper>
             </SecureComponent>
           </Grid>
           <Grid item xs={12} className={classes.tableBlock}>

portal-ui/src/screens/Console/Policies/PolicyDetails.tsx

@@ -17,6 +17,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import { IAMPolicy, IAMStatement, Policy } from "./types";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
+import { Button } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -28,7 +29,7 @@ import {
 } from "../Common/FormComponents/common/styleLibrary";
 import Paper from "@mui/material/Paper";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import api from "../../../common/api";
 import PageHeader from "../Common/PageHeader/PageHeader";
@@ -56,20 +57,25 @@ import {
 } from "../../../common/SecureComponent";
 
 import withSuspense from "../Common/Components/withSuspense";
-import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
+
 import PolicyView from "./PolicyView";
 import { decodeURLString, encodeURLString } from "../../../common/utils";
 import { setErrorSnackMessage, setSnackBarMessage } from "../../../systemSlice";
 import { selFeatures } from "../consoleSlice";
 import { useAppDispatch } from "../../../store";
+import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
 
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
 const styles = (theme: Theme) =>
   createStyles({
     buttonContainer: {
-      textAlign: "right",
+      display: "flex",
+      justifyContent: "flex-end",
       paddingTop: 16,
+      "& button": {
+        marginLeft: 8,
+      },
     },
     pageContainer: {
       border: "1px solid #EAEAEA",
@@ -349,28 +355,30 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
                   resource={CONSOLE_UI_RESOURCE}
                   errorProps={{ disabled: true }}
                 >
-                  <RBIconButton
+                  <TooltipWrapper tooltip={"Delete Policy"}>
-                    tooltip={"Delete Policy"}
+                    <Button
-                    text={"Delete Policy"}
+                      id={"delete-policy"}
-                    variant="outlined"
+                      label={"Delete Policy"}
-                    color="secondary"
+                      variant="secondary"
-                    icon={<TrashIcon />}
+                      icon={<TrashIcon />}
-                    onClick={deletePolicy}
+                      onClick={deletePolicy}
-                  />
+                    />
+                  </TooltipWrapper>
                 </SecureComponent>
 
-                <RBIconButton
+                <TooltipWrapper tooltip={"Refresh"}>
-                  tooltip={"Refresh"}
+                  <Button
-                  text={"Refresh"}
+                    id={"refresh-policy"}
-                  variant="outlined"
+                    label={"Refresh"}
-                  color="primary"
+                    variant="regular"
-                  icon={<RefreshIcon />}
+                    icon={<RefreshIcon />}
-                  onClick={() => {
+                    onClick={() => {
-                    setLoadingUsers(true);
+                      setLoadingUsers(true);
-                    setLoadingGroups(true);
+                      setLoadingGroups(true);
-                    setLoadingPolicy(true);
+                      setLoadingPolicy(true);
-                  }}
+                    }}
-                />
+                  />
+                </TooltipWrapper>
               </Fragment>
             }
           />
@@ -513,13 +521,13 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
                         errorProps={{ disabled: true }}
                       >
                         <Button
+                          id={"save"}
                           type="submit"
-                          variant="contained"
+                          variant="callAction"
                           color="primary"
                           disabled={addLoading || !validSave}
-                        >
+                          label={"Save"}
-                          Save
+                        />
-                        </Button>
                       </SecureComponent>
                     </Grid>
                     {addLoading && (

portal-ui/src/screens/Console/Policies/SetPolicy.tsx

@@ -15,12 +15,12 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState, Fragment } from "react";
-
 import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import {
   modalBasic,
@@ -58,8 +58,12 @@ const styles = (theme: Theme) =>
       marginTop: 15,
     },
     buttonContainer: {
-      textAlign: "right",
+      display: "flex",
+      justifyContent: "flex-end",
       marginTop: ".9rem",
+      "& button": {
+        marginLeft: 8,
+      },
     },
   });
 
@@ -185,23 +189,22 @@ const SetPolicy = ({
       </Grid>
       <Grid item xs={12} className={classes.buttonContainer}>
         <Button
+          id={"reset"}
           type="button"
-          variant="outlined"
+          variant="regular"
-          color="primary"
           className={classes.spacerRight}
           onClick={resetSelection}
-        >
+          label={"Reset"}
-          Reset
+        />
-        </Button>
         <Button
+          id={"save"}
           type="button"
-          variant="contained"
+          variant="callAction"
           color="primary"
           disabled={loading}
           onClick={setPolicyAction}
-        >
+          label={"Save"}
-          Save
+        />
-        </Button>
       </Grid>
       {loading && (
         <Grid item xs={12}>

portal-ui/src/screens/Console/Speedtest/STResults.tsx

@@ -17,6 +17,7 @@
 import React, { Fragment, useState } from "react";
 import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Grid } from "@mui/material";
@@ -31,7 +32,6 @@ import {
   UploadStatIcon,
   VersionIcon,
 } from "../../../icons";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
 import { cleanMetrics } from "./utils";
@@ -311,21 +311,19 @@ const STResults = ({ classes, results, start }: ISTResults) => {
             <Grid item xs={12} md={6} className={classes.actionButtons}>
               {!start && (
                 <Fragment>
-                  <BoxIconButton
+                  <Button
-                    aria-label="Download"
+                    id={"download-results"}
+                    aria-label="Download Results"
                     onClick={downloadResults}
-                    size="large"
+                    icon={<DownloadIcon />}
-                  >
+                  />
-                    <DownloadIcon />
-                  </BoxIconButton>
                   &nbsp;
-                  <BoxIconButton
+                  <Button
-                    aria-label="Download"
+                    id={"toggle-json"}
+                    aria-label="Toogle JSON"
                     onClick={toggleJSONView}
-                    size="large"
+                    icon={<JSONIcon />}
-                  >
+                  />
-                    <JSONIcon />
-                  </BoxIconButton>
                 </Fragment>
               )}
             </Grid>

portal-ui/src/screens/Console/Speedtest/Speedtest.tsx

@@ -17,8 +17,9 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
-import { Button, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import moment from "moment/moment";
 import PageHeader from "../Common/PageHeader/PageHeader";
@@ -182,6 +183,10 @@ const Speedtest = () => {
     setSpeedometerValue(percToDisplay);
   }, [start, currentValue, topDate, totalSeconds]);
 
+  const stoppedLabel = currStatus !== null ? "Retest" : "Start";
+
+  const buttonLabel = start ? "Start" : stoppedLabel;
+
   return (
     <Fragment>
       <PageHeader label="Performance" />
@@ -289,20 +294,14 @@ const Speedtest = () => {
                     type="button"
                     id={"start-speed-test"}
                     variant={
-                      currStatus !== null && !start ? "contained" : "outlined"
+                      currStatus !== null && !start ? "callAction" : "regular"
                     }
                     className={`${classes.buttonBackground} ${classes.speedStart}`}
                     disabled={
                       duration.trim() === "" || size.trim() === "" || start
                     }
-                  >
+                    label={buttonLabel}
-                    {!start && (
+                  />
-                      <Fragment>
-                        {currStatus !== null ? "Retest" : "Start"}
-                      </Fragment>
-                    )}
-                    {start ? "Start" : ""}
-                  </Button>
                 </Grid>
               </Grid>
               <Grid container className={classes.multiModule}>

portal-ui/src/screens/Console/Support/ApiKeyRegister.tsx

@@ -15,7 +15,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
+import { Button } from "mds";
 import { OnlineRegistrationIcon } from "../../../icons";
 import { FormTitle } from "./utils";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -157,25 +158,27 @@ const ApiKeyRegister = ({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "flex-end",
+                "& button": {
+                  marginLeft: "8px",
+                },
               }}
             >
               <Button
-                variant="outlined"
+                id={"get-from-subnet"}
+                variant="regular"
                 className={classes.spacerRight}
                 disabled={loading}
                 onClick={() => setShowApiKeyModal(true)}
-              >
+                label={"Get from SUBNET"}
-                Get from SUBNET
+              />
-              </Button>
               <Button
+                id={"register"}
                 type="submit"
-                variant="contained"
+                variant="callAction"
-                color="primary"
                 disabled={loading || apiKey.trim().length === 0}
                 onClick={() => onRegister()}
-              >
+                label={"Register"}
-                Register
+              />
-              </Button>
               <GetApiKeyModal
                 open={showApiKeyModal}
                 closeModal={() => setShowApiKeyModal(false)}

portal-ui/src/screens/Console/Support/GetApiKeyModal.tsx

@@ -214,8 +214,7 @@ const GetApiKeyModal = ({
       onConfirm={onConfirm}
       onClose={closeModal}
       confirmButtonProps={{
-        color: "primary",
+        variant: "callAction",
-        variant: "contained",
         disabled: !email || !password || isLoading,
         hidden: true,
       }}

portal-ui/src/screens/Console/Support/Profile.tsx

@@ -1,9 +1,10 @@
 import React, { Fragment, useState } from "react";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import PageLayout from "../Common/Layout/PageLayout";
 import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
@@ -17,9 +18,10 @@ import {
 const styles = (theme: Theme) =>
   createStyles({
     buttonContainer: {
+      display: "flex",
+      justifyContent: "flex-end",
       marginTop: 24,
-      textAlign: "right",
+      "& button": {
-      "& .MuiButton-root": {
         marginLeft: 8,
       },
     },
@@ -166,27 +168,26 @@ const Profile = ({ classes }: IProfileProps) => {
           </Grid>
           <Grid item xs={12} className={classes.buttonContainer}>
             <Button
+              id={"start-profiling"}
               type="submit"
-              variant="contained"
+              variant="callAction"
-              color="primary"
               disabled={profilingStarted || types.length < 1}
               onClick={() => {
                 startProfiling();
               }}
-            >
+              label={"Start Profiling"}
-              Start Profiling
+            />
-            </Button>
             <Button
+              id={"stop-profiling"}
               type="submit"
-              variant="contained"
+              variant="callAction"
               color="primary"
               disabled={!profilingStarted}
               onClick={() => {
                 stopProfiling();
               }}
-            >
+              label={"Stop Profiling"}
-              Stop Profiling
+            />
-            </Button>
           </Grid>
         </Grid>
       </PageLayout>

portal-ui/src/screens/Console/Support/Register.tsx

@@ -16,6 +16,7 @@
 
 import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import {
   actionsTray,
@@ -24,7 +25,7 @@ import {
   spacingUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import withStyles from "@mui/styles/withStyles";
-import { Box, Button, Link } from "@mui/material";
+import { Box, Link } from "@mui/material";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import PageLayout from "../Common/Layout/PageLayout";
 import { CopyIcon, UsersIcon } from "../../../icons";
@@ -378,14 +379,12 @@ const Register = ({ classes }: IRegister) => {
               }}
             >
               <Button
-                className={classes.button}
+                id={"register-cluster"}
-                color="primary"
                 onClick={() => subnetRegister()}
                 disabled={loading || subnetAccessToken.trim().length === 0}
-                variant="contained"
+                variant="callAction"
-              >
+                label={"Register"}
-                Register
+              />
-              </Button>
             </Box>
           </Box>
         </Box>
@@ -449,17 +448,16 @@ const Register = ({ classes }: IRegister) => {
             }}
           >
             <Button
-              color="primary"
+              id={"verify"}
               onClick={() => subnetLoginWithMFA()}
               disabled={
                 loading ||
                 subnetOTP.trim().length === 0 ||
                 subnetMFAToken.trim().length === 0
               }
-              variant="contained"
+              variant="callAction"
-            >
+              label={"Verify"}
-              Verify
+            />
-            </Button>
           </Box>
         </Box>
 
@@ -553,12 +551,16 @@ const Register = ({ classes }: IRegister) => {
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "flex-end",
+                  "& button": {
+                    marginLeft: "8px",
+                  },
                 }}
               >
                 <Button
+                  id={"sign-up"}
                   type="submit"
                   className={classes.spacerRight}
-                  variant="outlined"
+                  variant="regular"
                   onClick={(e) => {
                     e.preventDefault();
                     window.open(
@@ -568,22 +570,20 @@ const Register = ({ classes }: IRegister) => {
                       "_blank"
                     );
                   }}
-                >
+                  label={"Sign up"}
-                  Sign up
+                />
-                </Button>
                 <Button
+                  id={"register-credentials"}
                   type="submit"
-                  variant="contained"
+                  variant="callAction"
-                  color="primary"
                   disabled={
                     loading ||
                     subnetEmail.trim().length === 0 ||
                     subnetPassword.trim().length === 0
                   }
                   onClick={() => subnetLogin()}
-                >
+                  label={"Register"}
-                  Register
+                />
-                </Button>
               </Box>
             </Box>
           </Box>
@@ -789,13 +789,13 @@ const Register = ({ classes }: IRegister) => {
               }}
             >
               <Button
-                variant="contained"
+                id={"register-subnet"}
+                variant="callAction"
                 color="primary"
                 onClick={() => subnetLogin()}
                 disabled={loading || license.trim().length === 0}
-              >
+                label={"Register"}
-                Register
+              />
-              </Button>
             </Box>
           </Box>
           <RegisterHelpBox />

portal-ui/src/screens/Console/Tenants/AddTenant/CreateTenantButton.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { Button } from "@mui/material";
+import { Button } from "mds";
 import React from "react";
 import { useSelector } from "react-redux";
 import { AppState, useAppDispatch } from "../../../../store";
@@ -45,17 +45,15 @@ const CreateTenantButton = () => {
   return (
     <Button
       id={"wizard-button-Create"}
-      variant="contained"
+      variant="callAction"
       color="primary"
-      size="small"
       onClick={() => {
         dispatch(createTenantAsync());
       }}
       disabled={!enabled}
       key={`button-AddTenant-Create`}
-    >
+      label={"Create"}
-      Create
+    />
-    </Button>
   );
 };
 

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx

@@ -50,6 +50,7 @@ const styles = (theme: Theme) =>
       background: "#FFFFFF",
       border: "1px solid #EAEAEA",
       padding: 2,
+      marginTop: 20,
     },
     ...formFieldStyles,
     ...modalBasic,
@@ -124,7 +125,7 @@ const NameTenantMain = ({ classes, formToRender }: INameTenantMainScreen) => {
   return (
     <Fragment>
       <Grid container>
-        <Grid item xs={8} md={9}>
+        <Grid item sx={{ width: "calc(100% - 300px)" }}>
           <Paper className={classes.paperWrapper} sx={{ minHeight: 550 }}>
             <Grid container>
               <Grid item xs={12}>
@@ -197,7 +198,7 @@ const NameTenantMain = ({ classes, formToRender }: INameTenantMainScreen) => {
             </Grid>
           </Paper>
         </Grid>
-        <Grid item xs={4} md={3}>
+        <Grid item>
           <div className={classes.sizePreview}>
             <SizePreview />
           </div>

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx

@@ -61,8 +61,7 @@ const AddNamespaceModal = () => {
       title={`New namespace`}
       confirmText={"Create"}
       confirmButtonProps={{
-        color: "primary",
+        variant: "callAction",
-        variant: "contained",
       }}
       isOpen={addNamespaceOpen}
       titleIcon={<ConfirmModalIcon />}