From fbc3a733d5660b8b86ec84e796fb17c35744b26d Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 10 Jun 2021 14:34:01 -0700
Subject: [PATCH] Updated buttons throughout app

---
 ui/src/app/admin/component/AccessRequest.js   |  7 +++---
 ui/src/app/admin/component/UserMaintenance.js |  5 ++--
 ui/src/app/admin/container/UserManagement.js  |  9 +++----
 ui/src/app/dashboard/component/Search.js      |  2 +-
 .../component/fields/FilterTargetField.js     | 24 ++++++++++++-------
 .../widgets/AttributeReleaseWidget.js         |  9 +++----
 .../form/component/widgets/OptionWidget.js    |  8 ++++---
 .../metadata/component/DeleteConfirmation.js  |  9 +++----
 .../app/metadata/component/MetadataSection.js |  6 ++---
 .../component/properties/ArrayProperty.js     | 10 ++++----
 .../contention/component/ContentionModal.js   | 17 ++++++-------
 ui/src/app/metadata/copy/CopySource.js        | 17 ++++++-------
 ui/src/app/metadata/copy/SaveCopy.js          |  9 +++----
 .../MetadataFilterConfigurationListItem.js    | 19 ++++++++-------
 .../component/MetadataFilterEditorList.js     | 13 +++++-----
 .../component/MetadataFilterVersionList.js    | 11 +++++----
 .../MetadataFilterVersionListItem.js          |  5 ++--
 .../domain/provider/component/ProviderList.js | 15 +++++++-----
 .../component/DeleteSourceConfirmation.js     |  9 +++----
 .../domain/source/component/SourceList.js     | 11 ++++-----
 ui/src/app/metadata/editor/MetadataEditor.js  | 10 ++++----
 .../app/metadata/editor/MetadataEditorNav.js  | 14 ++++++-----
 ui/src/app/metadata/new/NewAttribute.js       | 12 ++++++----
 ui/src/app/metadata/new/NewFilter.js          | 22 ++++++++++++-----
 ui/src/app/metadata/view/EditFilter.js        | 12 ++++++----
 .../metadata/view/MetadataAttributeEdit.js    | 12 ++++++----
 .../metadata/view/MetadataAttributeList.js    |  8 ++++---
 ui/src/app/metadata/view/MetadataHistory.js   |  6 ++---
 ui/src/app/metadata/view/MetadataOptions.js   | 14 +++++------
 ui/src/app/metadata/view/MetadataUpload.js    | 10 ++++----
 ui/src/app/metadata/view/MetadataVersion.js   |  6 ++---
 ui/src/app/metadata/view/MetadataXml.js       |  7 +++---
 .../wizard/MetadataProviderTypeSelector.js    |  8 ++++---
 ui/src/app/metadata/wizard/WizardNav.js       | 14 +++++------
 34 files changed, 209 insertions(+), 161 deletions(-)

diff --git a/ui/src/app/admin/component/AccessRequest.js b/ui/src/app/admin/component/AccessRequest.js
index 682c5b1d8..0dd644d54 100644
--- a/ui/src/app/admin/component/AccessRequest.js
+++ b/ui/src/app/admin/component/AccessRequest.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Button from 'react-bootstrap/Button';
 import Translate from '../../i18n/components/translate';
 
 export function AccessRequest({ users, roles, onDeleteUser, onChangeUserRole }) {
@@ -49,13 +50,13 @@ export function AccessRequest({ users, roles, onDeleteUser, onChangeUserRole })
                         </div>
                     </div>
                     <div className="col-2 text-right">
-                        <button className="btn btn-danger btn-sm" onClick={() => onDeleteUser(user.username)}>
+                        <Button variant="danger" size="sm" onClick={() => onDeleteUser(user.username)}>
                             <i className="fa fa-trash fa-lg"></i>
                             &nbsp;
-                            <span >
+                            <span>
                                 <Translate value="label.delete-request">Delete Request</Translate>
                             </span>
-                        </button>
+                        </Button>
                     </div>
                 </div>
             </div>
diff --git a/ui/src/app/admin/component/UserMaintenance.js b/ui/src/app/admin/component/UserMaintenance.js
index efce47acb..72847104d 100644
--- a/ui/src/app/admin/component/UserMaintenance.js
+++ b/ui/src/app/admin/component/UserMaintenance.js
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import Button from 'react-bootstrap/Button';
 
 import Translate from '../../i18n/components/translate';
 import { useCurrentUser } from '../../core/user/UserContext';
@@ -46,12 +47,12 @@ export default function UserMaintenance({ users, roles, onDeleteUser, onChangeUs
                             </td>
                             <td>
                                 {currentUser.username !== user.username &&
-                                    <button className="btn btn-link text-danger" onClick={() => onDeleteUser(user.username)}>
+                                    <Button className="text-danger" variant="link" onClick={() => onDeleteUser(user.username)}>
                                         <span className="sr-only">
                                             <Translate value="label.delete-user">Delete User</Translate>
                                         </span>
                                         <FontAwesomeIcon icon={faTrash} />
-                                    </button>
+                                    </Button>
                                 }
                             </td>
                         </tr>
diff --git a/ui/src/app/admin/container/UserManagement.js b/ui/src/app/admin/container/UserManagement.js
index 6172d6525..e4e1140ef 100644
--- a/ui/src/app/admin/container/UserManagement.js
+++ b/ui/src/app/admin/container/UserManagement.js
@@ -4,6 +4,7 @@ import useFetch from 'use-http';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import Button from 'react-bootstrap/Button';
 
 import Translate from '../../i18n/components/translate';
 import API_BASE_PATH from '../../App.constant';
@@ -75,12 +76,12 @@ export default function UserManagement({ users, children, reload }) {
                     </p>
                 </Modal.Body>
                 <Modal.Footer>
-                    <button className="btn btn-danger" type="button" onClick={() => deleteUser(deleting)}>
+                    <Button variant="danger"type="button" onClick={() => deleteUser(deleting)}>
                         <Translate value="action.delete">Delete</Translate>
-                    </button>{' '}
-                    <button className="btn btn-secondary" type="button" onClick={() => setDeleting(null)}>
+                    </Button>{' '}
+                    <Button variant="secondary" type="button" onClick={() => setDeleting(null)}>
                         <Translate value="action.cancel">Cancel</Translate>
-                    </button>
+                    </Button>
                 </Modal.Footer>
             </Modal>
         </div>
diff --git a/ui/src/app/dashboard/component/Search.js b/ui/src/app/dashboard/component/Search.js
index 745f816d0..40d92348d 100644
--- a/ui/src/app/dashboard/component/Search.js
+++ b/ui/src/app/dashboard/component/Search.js
@@ -40,7 +40,7 @@ export function Search ({ entities, searchable, children }) {
                             placeholder="Search Files" onChange={ (event) => search(event.target.value) }
                             value={query} />
                         <InputGroup.Append>
-                            <Button variant="text" className="px-3" onClick={ () => search('') }>Clear</Button>
+                            <Button variant="outline-primary" className="px-3" onClick={ () => search('') }>Clear</Button>
                         </InputGroup.Append>
                     </InputGroup>
                 </Form.Group>
diff --git a/ui/src/app/form/component/fields/FilterTargetField.js b/ui/src/app/form/component/fields/FilterTargetField.js
index 750792d8e..bad90052e 100644
--- a/ui/src/app/form/component/fields/FilterTargetField.js
+++ b/ui/src/app/form/component/fields/FilterTargetField.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
 import Translate from '../../../i18n/components/translate';
+import Button from 'react-bootstrap/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAsterisk, faCaretDown, faCaretUp, faEye, faEyeSlash, faPlus, faSpinner, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { useTranslator } from '../../../i18n/hooks';
@@ -15,9 +16,10 @@ import isNil from 'lodash/isNil';
 import { FilterTargetPreview } from '../../../metadata/hoc/FilterTargetPreview';
 
 const ToggleButton = ({ isOpen, onClick, disabled }) => (
-    <button
+    <Button
         type="button"
-        className="btn btn-outline-secondary toggle-button"
+        variant="outline-secondary"
+        className="toggle-button"
         onClick={onClick}
         disabled={disabled}
         onMouseDown={e => {
@@ -25,7 +27,7 @@ const ToggleButton = ({ isOpen, onClick, disabled }) => (
             e.preventDefault();
         }}>
         <FontAwesomeIcon icon={isOpen ? faCaretUp : faCaretDown} />
-    </button>
+    </Button>
 );
 
 const FilterTargetField = ({
@@ -225,13 +227,13 @@ const FilterTargetField = ({
                             </div>
                             {targetType === 'ENTITY' &&
                                 <div className="ml-2">
-                                    <button className="btn btn-success"
+                                    <Button variant="success"
                                         type="button"
                                         disabled={!term}
                                         onClick={() => onSelectValue(term)}>
                                         <Translate value="action.add-entity-id">Add Entity ID</Translate>&nbsp;&nbsp;
                                         <FontAwesomeIcon icon={faPlus} />
-                                    </button>
+                                    </Button>
                                 </div>
                             }
                         </div>
@@ -250,15 +252,19 @@ const FilterTargetField = ({
                                             {id}
                                             <span>
                                                 {preview &&
-                                                    <button disabled={loading || !xml} type="button" className="btn btn-link text-right" onClick={() => preview(id)}>
+                                                    <Button disabled={loading || !xml} type="button" 
+                                                    variant="link"
+                                                    className="text-right" onClick={() => preview(id)}>
                                                         <FontAwesomeIcon icon={loading ? faSpinner : xml ? faEye : faEyeSlash} pulse={loading} size="lg" className="text-success sr-hidden" />
                                                         <span className="sr-only"><Translate value="action.preview">Preview</Translate></span>
-                                                    </button>
+                                                    </Button>
                                                 }
-                                                <button type="button" className="btn btn-link text-right" onClick={() => removeId(id)}>
+                                                <Button type="button" 
+                                                variant="link"
+                                                className="text-right" onClick={() => removeId(id)}>
                                                     <FontAwesomeIcon icon={faTrash} size="lg" className="text-danger sr-hidden" />
                                                     <span className="sr-only"><Translate value="action.remove">Remove</Translate></span>
-                                                </button>
+                                                </Button>
                                             </span>
                                         </React.Fragment>
                                     )}
diff --git a/ui/src/app/form/component/widgets/AttributeReleaseWidget.js b/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
index 3c68c4107..9ff995e59 100644
--- a/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
+++ b/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
@@ -3,6 +3,7 @@ import Form from "react-bootstrap/Form";
 import Translate from "../../../i18n/components/translate";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+import Button from 'react-bootstrap/Button';
 
 const selectValue = (value, selected, all) => {
     const at = all.indexOf(value);
@@ -105,19 +106,19 @@ const AttributeReleaseWidget = ({
                     <tr>
                         <td><Translate value="label.check-all-attributes">Check All Attributes</Translate></td>
                         <td className="text-right">
-                            <button type="button" className="btn btn-text text-success btn-sm px-2" onClick={() => onCheckAll()} id="attributeRelease.checkAll">
+                            <Button type="button" variant="text" size="sm" className="text-success px-2" onClick={() => onCheckAll()} id="attributeRelease.checkAll">
                                 <FontAwesomeIcon icon={faCheck} size="lg" />
                                 <span className="sr-only"><Translate value="label.check-all-attributes">Check All Attributes</Translate></span>
-                            </button>
+                            </Button>
                         </td>
                     </tr>
                     <tr>
                         <td><Translate value="label.clear-all-attributes">Clear All Attributes</Translate></td>
                         <td className="text-right">
-                            <button type="button" className="btn btn-text text-danger btn-sm px-2" onClick={() => onClearAll()} id="attributeRelease.clearAll">
+                            <Button type="button" variant="text" size="sm" className="text-danger px-2" onClick={() => onClearAll()} id="attributeRelease.clearAll">
                                 <FontAwesomeIcon icon={faTimes} size="lg" />
                                 <span className="sr-only"><Translate value="label.clear-all-attributes">Clear All Attributes</Translate></span>
-                            </button>
+                            </Button>
                         </td>
                     </tr>
                 </tbody>
diff --git a/ui/src/app/form/component/widgets/OptionWidget.js b/ui/src/app/form/component/widgets/OptionWidget.js
index d2312dee0..88648c0c5 100644
--- a/ui/src/app/form/component/widgets/OptionWidget.js
+++ b/ui/src/app/form/component/widgets/OptionWidget.js
@@ -2,6 +2,7 @@ import React, { useRef } from "react";
 
 import ListGroup from "react-bootstrap/ListGroup";
 import Form from "react-bootstrap/Form";
+import Button from 'react-bootstrap/Button';
 
 import Translate from "../../../i18n/components/translate";
 import { InfoIcon } from "../InfoIcon";
@@ -12,9 +13,10 @@ import { faAsterisk, faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-
 import { useTranslator } from "../../../i18n/hooks";
 
 const ToggleButton = ({ isOpen, onClick, disabled }) => (
-    <button
+    <Button
         type="button"
-        className="btn btn-outline-secondary toggle-button"
+        variant="outline-secondary"
+        className="toggle-button"
         onClick={onClick}
         disabled={disabled}
         onMouseDown={e => {
@@ -22,7 +24,7 @@ const ToggleButton = ({ isOpen, onClick, disabled }) => (
             e.preventDefault();
         }}>
         <FontAwesomeIcon icon={isOpen ? faCaretUp : faCaretDown} />
-    </button>
+    </Button>
 );
 
 const OptionWidget = ({
diff --git a/ui/src/app/metadata/component/DeleteConfirmation.js b/ui/src/app/metadata/component/DeleteConfirmation.js
index e441f9442..0df156370 100644
--- a/ui/src/app/metadata/component/DeleteConfirmation.js
+++ b/ui/src/app/metadata/component/DeleteConfirmation.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
@@ -46,12 +47,12 @@ export function DeleteConfirmation({ children, onConfirm, onCancel, body, title
                     </p>
                 </Modal.Body>
                 <Modal.Footer>
-                    <button className="btn btn-danger" onClick={() => onConfirmClick()}>
+                    <Button variant="danger" onClick={() => onConfirmClick()}>
                         <Translate value="action.delete">Delete</Translate>
-                    </button>{' '}
-                    <button className="btn btn-secondary" onClick={() => onCancelClick()}>
+                    </Button>{' '}
+                    <Button variant="secondary" onClick={() => onCancelClick()}>
                         <Translate value="action.cancel">Cancel</Translate>
-                    </button>
+                    </Button>
                 </Modal.Footer>
             </Modal>
         </>
diff --git a/ui/src/app/metadata/component/MetadataSection.js b/ui/src/app/metadata/component/MetadataSection.js
index 5e13d788b..7925b961c 100644
--- a/ui/src/app/metadata/component/MetadataSection.js
+++ b/ui/src/app/metadata/component/MetadataSection.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { faEdit } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
+import Button from 'react-bootstrap/Button';
 import Translate from '../../i18n/components/translate';
 
 export function MetadataSection ({ section, index = -1, onEdit, children }) {
@@ -27,10 +27,10 @@ export function MetadataSection ({ section, index = -1, onEdit, children }) {
                         </h2>
                         {onEdit &&
                         <div className="actions px-2">
-                            <button className="btn btn-link edit-link change-view" onClick={()=>onEdit(section.id)}>
+                            <Button variant="link" className="edit-link change-view" onClick={()=>onEdit(section.id)}>
                                 <FontAwesomeIcon icon={faEdit} />&nbsp;
                                 <Translate value="action.edit">Edit</Translate>
-                            </button>
+                            </Button>
                         </div>
                         }
                     </div>
diff --git a/ui/src/app/metadata/component/properties/ArrayProperty.js b/ui/src/app/metadata/component/properties/ArrayProperty.js
index edee5235a..8c5f08c44 100644
--- a/ui/src/app/metadata/component/properties/ArrayProperty.js
+++ b/ui/src/app/metadata/component/properties/ArrayProperty.js
@@ -1,6 +1,8 @@
+import React from 'react';
 import { faEye } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import Button from 'react-bootstrap/Button';
+
 import Translate from '../../../i18n/components/translate';
 import { usePropertyWidth } from './hooks';
 import { PropertyValue } from './PropertyValue';
@@ -89,10 +91,10 @@ export function ArrayProperty ({ property, columns, preview }) {
                                                     {preview && item &&
                                                         <React.Fragment>
                                                             <FilterTargetPreview entityId={item}>
-                                                                {(onPreview, loading, data) => (
-                                                                    <button className="btn btn-link" onClick={() => onPreview(item)}>
+                                                                {(onPreview) => (
+                                                                    <Button variant="link" onClick={() => onPreview(item)}>
                                                                         <FontAwesomeIcon icon={faEye} size="lg" className="text-success" />
-                                                                    </button>
+                                                                    </Button>
                                                                 )}
                                                             </FilterTargetPreview>
                                                             &nbsp;
diff --git a/ui/src/app/metadata/contention/component/ContentionModal.js b/ui/src/app/metadata/contention/component/ContentionModal.js
index 73a0efef6..50c0ec991 100644
--- a/ui/src/app/metadata/contention/component/ContentionModal.js
+++ b/ui/src/app/metadata/contention/component/ContentionModal.js
@@ -3,6 +3,7 @@ import React from 'react';
 import Modal from 'react-bootstrap/Modal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import Button from 'react-bootstrap/Button';
 
 import Translate from '../../../i18n/components/translate';
 import { useTranslator } from '../../../i18n/hooks';
@@ -83,23 +84,23 @@ export function ContentionModal ({ theirs = [], ours = [], onUseTheirs, onUseOur
             </Modal.Body>
             {theirs && theirs.length < 1 ?
             <Modal.Footer>
-                <button className="btn btn-secondary"
-                    onClick={() => onUseTheirs()}><Translate value="action.cancel">Cancel</Translate></button>
+                <Button variant="secondary"
+                    onClick={() => onUseTheirs()}><Translate value="action.cancel">Cancel</Translate></Button>
             </Modal.Footer>
             :
             ours && ours.length < 1 ?
                 <Modal.Footer>
-                    <button className="btn btn-secondary"
-                        onClick={() => onUseTheirs()}><Translate value="action.get-latest">Get latest</Translate></button>
+                    <Button variant="secondary"
+                        onClick={() => onUseTheirs()}><Translate value="action.get-latest">Get latest</Translate></Button>
                 </Modal.Footer>
             :
             <Modal.Footer>
-                <button className="btn btn-info" onClick={() => onUseOurs()} disabled={!resolutionObj}>
+                <Button variant="info" onClick={() => onUseOurs()} disabled={!resolutionObj}>
                     <Translate value="action.use-mine">Use My Changes</Translate>
-                </button>
-                <button className="btn btn-danger" onClick={() => onUseTheirs()} disabled={!rejectionObj}>
+                </Button>
+                <Button variant="danger" onClick={() => onUseTheirs()} disabled={!rejectionObj}>
                     <Translate value="action.use-theirs">Use Their Changes</Translate>
-                </button>
+                </Button>
             </Modal.Footer>
             }
         </Modal>
diff --git a/ui/src/app/metadata/copy/CopySource.js b/ui/src/app/metadata/copy/CopySource.js
index f81a5e229..65e90a5e5 100644
--- a/ui/src/app/metadata/copy/CopySource.js
+++ b/ui/src/app/metadata/copy/CopySource.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useForm } from 'react-hook-form';
 import Check from 'react-bootstrap/FormCheck';
+import Button from 'react-bootstrap/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowCircleRight, faAsterisk, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
 
@@ -70,7 +71,7 @@ export function CopySource({ copy, onNext }) {
                             </h3>
                         </li>
                         <li className="nav-item">
-                            <button className="nav-link next btn d-flex justify-content-between align-items-start"
+                            <Button className="nav-link next btn d-flex justify-content-between align-items-start"
                                 onClick={() => onNext(getValues())}
                                 disabled={!isValid}
                                 aria-label="Next: Step 2, Organization information"
@@ -84,7 +85,7 @@ export function CopySource({ copy, onNext }) {
                                     <FontAwesomeIcon icon={faArrowCircleRight} size="2x" />
                                     <Translate value="action.next">Next</Translate>
                                 </span>
-                            </button>
+                            </Button>
                         </li>
                     </ul>
                 </div>
@@ -170,25 +171,25 @@ export function CopySource({ copy, onNext }) {
                             <tr>
                                 <td><Translate value="label.check-all-attributes">Check All Attributes</Translate></td>
                                 <td>
-                                    <button className="btn btn-text text-success btn-sm" onClick={() => onSelectAll()}>
+                                    <Button variant="text" className="text-success btn-sm" onClick={() => onSelectAll()}>
                                         <FontAwesomeIcon icon={faCheck} />
                                         <span className="sr-only"><Translate value="label.check-all-attributes">Check All Attributes</Translate></span>
-                                    </button>
+                                    </Button>
                                 </td>
                             </tr>
                             <tr>
                                 <td><Translate value="label.clear-all-attributes">Clear All Attributes</Translate></td>
                                 <td>
-                                    <button className="btn btn-text text-danger btn-sm" onClick={() => onUnselectAll()}>
+                                    <Button variant="text" className="text-danger btn-sm" onClick={() => onUnselectAll()}>
                                         <FontAwesomeIcon icon={faTimes} />
                                         <span className="sr-only"><Translate value="label.clear-all-attributes">Clear All Attributes</Translate></span>
-                                    </button>
+                                    </Button>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
-                <button className="nav-link next btn d-flex justify-content-between align-items-start sr-only"
+                <Button className="nav-link next btn d-flex justify-content-between align-items-start sr-only"
                     onClick={() => onNext(getValues())}
                     disabled={!isValid}
                     aria-label="Next: Step 2, Organization information"
@@ -198,7 +199,7 @@ export function CopySource({ copy, onNext }) {
                             Finished!
                                     </Translate>
                     </span>
-                </button>
+                </Button>
             </div>
         </>
     );
diff --git a/ui/src/app/metadata/copy/SaveCopy.js b/ui/src/app/metadata/copy/SaveCopy.js
index a4b526e7d..0c48515e4 100644
--- a/ui/src/app/metadata/copy/SaveCopy.js
+++ b/ui/src/app/metadata/copy/SaveCopy.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Check from 'react-bootstrap/FormCheck';
+import Button from 'react-bootstrap/Button';
 import { faArrowCircleLeft, faCheck, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useForm } from 'react-hook-form';
@@ -62,7 +63,7 @@ export function SaveCopy ({ copy, saving, onSave, onBack }) {
                 <div className="col col-xs-12">
                     <ul className="nav nav-wizard m-3">
                         <li className="nav-item">
-                            <button type="button" className="nav-link previous btn d-flex justify-content-between align-items-start" onClick={onBack}>
+                            <Button type="button" className="nav-link previous btn d-flex justify-content-between align-items-start" onClick={onBack}>
                                 <span className="direction d-flex flex-column align-items-center">
                                     <FontAwesomeIcon icon={faArrowCircleLeft} size="2x" />
                                     <Translate value="action.back">Back</Translate>
@@ -72,7 +73,7 @@ export function SaveCopy ({ copy, saving, onSave, onBack }) {
                                     Name and Entity ID.
                                     </Translate>
                                 </span>
-                            </button>
+                            </Button>
                         </li>
                         <li className="nav-item">
                             <h3 className="tag tag-primary">
@@ -83,13 +84,13 @@ export function SaveCopy ({ copy, saving, onSave, onBack }) {
                             </h3>
                         </li>
                         <li className="nav-item">
-                            <button className="nav-link save btn d-flex justify-content-between align-items-start" aria-label="Save" onClick={() => handleSubmit(onFinish)()} type="button">
+                            <Button className="nav-link save btn d-flex justify-content-between align-items-start" aria-label="Save" onClick={() => handleSubmit(onFinish)()} type="button">
                                 <span className="label"><Translate value="action.save">Save</Translate></span>
                                 <span className="direction d-flex flex-column align-items-center">
                                     <FontAwesomeIcon icon={saving ? faSpinner : faSave} pulse={saving} size="2x" />
                                     <Translate value="action.save">Save</Translate>
                                 </span>
-                            </button>
+                            </Button>
                         </li>
                     </ul>
                 </div>
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
index ba8e1a7f0..4601db323 100644
--- a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
+++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowCircleDown, faArrowCircleUp, faChevronUp, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
+import Button from 'react-bootstrap/Button';
 
 import { Translate } from '../../../../i18n/components/translate';
 import { Link } from 'react-router-dom';
@@ -36,17 +37,17 @@ export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst,
             <span className="mr-2">{ index + 1 }</span>
             {editable &&
             <div className="d-flex justify-content-between">
-                <button className="btn btn-link btn-sm" onClick={() => onOrderUp(filter.resourceId)} disabled={isFirst}>
+                <Button variant="link" size="sm" onClick={() => onOrderUp(filter.resourceId)} disabled={isFirst}>
                     <FontAwesomeIcon icon={faArrowCircleUp} size='2x' />
                     <span className="sr-only"><Translate value="action.move-up">Move Up</Translate></span>
-                </button>
-                <button className="btn btn-link btn-sm" onClick={() => onOrderDown(filter.resourceId)} disabled={isLast}>
+                </Button>
+                <Button variant="link" size="sm" onClick={() => onOrderDown(filter.resourceId)} disabled={isLast}>
                     <FontAwesomeIcon icon={faArrowCircleDown} size='2x' />
                     <span className="sr-only"><Translate value="action.move-up">Move Down</Translate></span>
-                </button>
+                </Button>
             </div>
             }
-            <button className="btn btn-link mx-4" onClick={ () => setOpen(!open) }>{ filter.name }</button>
+            <Button variant="link" className="mx-4" onClick={ () => setOpen(!open) }>{ filter.name }</Button>
             <span className="">{ filter['@type'] }</span>
             <span className="ml-4">
                 <span className="badge badge-primary">
@@ -65,20 +66,20 @@ export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst,
                         <FontAwesomeIcon icon={faEdit} className="sr-hidden" />&nbsp;
                         <Translate value="action.edit">Edit</Translate>
                     </Link>
-                    <button className="btn btn-link"
+                    <Button variant="link"
                         onClick={() => onRemove(filter.resourceId)}>
                         <FontAwesomeIcon icon={faTrash} className="sr-hidden" />&nbsp;
                         <Translate value="action.delete">Delete</Translate>
-                    </button>
+                    </Button>
                 </div>
             </div>
             }
             {configuration &&
                 <MetadataConfiguration configuration={ configuration }/> }
-                    <button className="btn btn-link btn-sm" onClick={() => setOpen(!open)}>
+                    <Button variant="link" size="sm" onClick={() => setOpen(!open)}>
                         <FontAwesomeIcon icon={faChevronUp} />&nbsp;
                         <Translate value="action.close">Close</Translate>
-                    </button>
+                    </Button>
                 </div>
             }
     </>);
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js
index 756ed1966..f5b23aa23 100644
--- a/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js
+++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import Check from 'react-bootstrap/FormCheck';
+import Button from 'react-bootstrap/Button';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowCircleDown, faArrowCircleUp, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
@@ -30,14 +31,14 @@ export function MetadataFilterEditorList ({provider, filters, onDelete, onUpdate
                             <tr key={i}>
                                 <td className="td-sm">
                                     <div className="d-flex justify-content-center">
-                                        <button className="btn btn-link" onClick={() => onOrderUp(filter.resourceId)} disabled={first === filter.resourceId}>
+                                        <Button variant="link" onClick={() => onOrderUp(filter.resourceId)} disabled={first === filter.resourceId}>
                                             <FontAwesomeIcon icon={faArrowCircleUp} size='lg' />
                                             <span className="sr-only"><Translate value="action.move-up">Move Up</Translate></span>
-                                        </button>
-                                        <button className="btn btn-link" onClick={() => onOrderDown(filter.resourceId)} disabled={last === filter.resourceId}>
+                                        </Button>
+                                        <Button variant="link" onClick={() => onOrderDown(filter.resourceId)} disabled={last === filter.resourceId}>
                                             <FontAwesomeIcon icon={faArrowCircleDown} size='lg' />
                                             <span className="sr-only"><Translate value="action.move-up">Move Down</Translate></span>
-                                        </button>
+                                        </Button>
                                     </div>
                                 </td>
                                 <td className="td-xs">{i + 1}</td>
@@ -61,10 +62,10 @@ export function MetadataFilterEditorList ({provider, filters, onDelete, onUpdate
                                     </Link>
                                 </td>
                                 <td className="td-sm">
-                                    <button className="btn btn-link" disabled={loading} onClick={() => onDelete(filter.resourceId)}>
+                                    <Button variant="link" disabled={loading} onClick={() => onDelete(filter.resourceId)}>
                                         <FontAwesomeIcon icon={faTrash} size="lg" className="text-danger" />
                                         <span className="sr-only"><Translate value="action.edit">Delete</Translate></span>
-                                    </button>
+                                    </Button>
                                 </td>
                             </tr>
                         )}
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js
index c8639490b..0d47525a3 100644
--- a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js
+++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js
@@ -1,6 +1,7 @@
+import React from 'react';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import Button from 'react-bootstrap/Button';
 import FormattedDate from '../../../../core/components/FormattedDate';
 import Translate from '../../../../i18n/components/translate';
 import { usePropertyWidth } from '../../../component/properties/hooks';
@@ -53,14 +54,14 @@ export function MetadataFilterVersionList ({ configuration, limited, columns })
                                 :
                                 <div className="d-flex justify-content-end my-2">
                                     {comparing ? 
-                                        <button className="btn btn-success" onClick={resetFilterComparison}>
+                                        <Button variant="success" onClick={resetFilterComparison}>
                                             <FontAwesomeIcon icon={faArrowLeft} />&nbsp;
                                             <Translate value="label.filter-versions">Filter Versions</Translate>
-                                        </button>
+                                        </Button>
                                     :
-                                    <button className="btn btn-primary" disabled={!selected} onClick={() => setComparing(selected)}>
+                                    <Button variant="primary" disabled={!selected} onClick={() => setComparing(selected)}>
                                         <Translate value="label.compare-selected">Compare Selected</Translate>
-                                    </button>
+                                    </Button>
                                     }
                                 </div>
                             }
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js
index 3a69b5717..6bffc080d 100644
--- a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js
+++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Button from 'react-bootstrap/Button';
 import { MetadataConfiguration } from '../../../component/MetadataConfiguration';
 import { getDefinition } from '../../../domain/index';
 import { useMetadataConfiguration } from '../../../hooks/configuration';
@@ -47,10 +48,10 @@ export function MetadataFilterVersionListItem ({ filters, width, selected, index
                                             <p className="mb-0 text-muted">{filter['@type']}</p>
                                         </div>
                                         {filter.comparable &&
-                                            <button className="btn btn-link mx-auto" onClick={() => onSelect(filter.resourceId)}>
+                                            <Button variant="link" className="mx-auto" onClick={() => onSelect(filter.resourceId)}>
                                                 <FontAwesomeIcon icon={selected === filter.resourceId ? faCheckSquare : faSquare} size="lg" />
                                                 <span className="sr-only">Compare</span>
-                                            </button>
+                                            </Button>
                                         }
                                     </div>
                                     :
diff --git a/ui/src/app/metadata/domain/provider/component/ProviderList.js b/ui/src/app/metadata/domain/provider/component/ProviderList.js
index e9f2d9205..c2f07743a 100644
--- a/ui/src/app/metadata/domain/provider/component/ProviderList.js
+++ b/ui/src/app/metadata/domain/provider/component/ProviderList.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import Badge from 'react-bootstrap/Badge';
+import Button from 'react-bootstrap/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronCircleDown, faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
 
@@ -34,22 +35,24 @@ export default function ProviderList({ entities, reorder = true, first, last, on
                                         <div className="provider-index text-center text-primary font-weight-bold">&mdash;</div>
                                     }
                                     &nbsp;
-                                    <button 
+                                    <Button 
                                         onClick={ () => onOrderDown(provider.resourceId) }
-                                        className="btn btn-link px-1"
+                                        variant="link"
+                                        className=" px-1"
                                         disabled={provider.resourceId === last || !reorder}
                                         aria-label="Decrease reorder by 1">
                                             <FontAwesomeIcon className="text-info" icon={faChevronCircleDown} size="lg" />
                                         <i className="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
-                                    </button>
-                                    <button
+                                    </Button>
+                                    <Button
                                         onClick={ () => onOrderUp(provider.resourceId) }
-                                        className="btn btn-link px-1"
+                                        variant="link"
+                                        className="px-1"
                                         aria-label="Increase reorder by 1"
                                         disabled={provider.resourceId === first || !reorder}>
                                         <FontAwesomeIcon className="text-info" icon={faChevronCircleUp} size="lg" />
                                         <i className="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
-                                    </button>
+                                    </Button>
                                 </div>
                             </td>
                             <td className="align-middle">
diff --git a/ui/src/app/metadata/domain/source/component/DeleteSourceConfirmation.js b/ui/src/app/metadata/domain/source/component/DeleteSourceConfirmation.js
index 482e92937..848e97c63 100644
--- a/ui/src/app/metadata/domain/source/component/DeleteSourceConfirmation.js
+++ b/ui/src/app/metadata/domain/source/component/DeleteSourceConfirmation.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
@@ -50,12 +51,12 @@ export function DeleteSourceConfirmation ({children}) {
                     </p>
                 </Modal.Body>
                 <Modal.Footer>
-                    <button className="btn btn-danger" onClick={() => onConfirm(deleting)}>
+                    <Button variant="danger" onClick={() => onConfirm(deleting)}>
                         <Translate value="action.delete">Delete</Translate>
-                    </button>{' '}
-                    <button className="btn btn-secondary" onClick={() => setDeleting(null)}>
+                    </Button>{' '}
+                    <Button variant="secondary" onClick={() => setDeleting(null)}>
                         <Translate value="action.cancel">Cancel</Translate>
-                    </button>
+                    </Button>
                 </Modal.Footer>
             </Modal>
         </>
diff --git a/ui/src/app/metadata/domain/source/component/SourceList.js b/ui/src/app/metadata/domain/source/component/SourceList.js
index 94d05828a..41e2c7adb 100644
--- a/ui/src/app/metadata/domain/source/component/SourceList.js
+++ b/ui/src/app/metadata/domain/source/component/SourceList.js
@@ -8,15 +8,11 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash, faCheck } from '@fortawesome/free-solid-svg-icons';
 
-
-
 import FormattedDate from '../../../../core/components/FormattedDate';
 import Translate from '../../../../i18n/components/translate';
 import { Scroller } from '../../../../dashboard/component/Scroller';
 import { DeleteSourceConfirmation } from './DeleteSourceConfirmation';
 
-
-
 export default function SourceList({ entities, onDelete, onEnable }) {
     return (
         <DeleteSourceConfirmation>
@@ -51,13 +47,14 @@ export default function SourceList({ entities, onDelete, onEnable }) {
                                     <td><FormattedDate date={source.createdDate} /></td>
                                     <td className="text-center">
                                         {onEnable ?
-                                            <button
-                                                className="btn btn-success btn-sm"
+                                            <Button
+                                                variant="success"
+                                                size="sm"
                                                 onClick={() => onEnable(source)}
                                                 aria-label="Enable this service provider">
                                                 <Translate value={ source.enabled ? 'label.disable' : 'label.enable' }>Disable</Translate>
                                                 {!source.enabled && <>&nbsp;<FontAwesomeIcon icon={faCheck} size="lg" /></> }
-                                            </button>
+                                            </Button>
                                             :
                                             <Badge variant={source.serviceEnabled ? 'success' : 'danger'}>
                                                 <Translate value={source.serviceEnabled ? 'value.enabled' : 'value.disabled'}></Translate>
diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
index 03f68b6fd..d2ee2e56d 100644
--- a/ui/src/app/metadata/editor/MetadataEditor.js
+++ b/ui/src/app/metadata/editor/MetadataEditor.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { faCogs, faExclamationTriangle, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useHistory, useParams, Prompt } from 'react-router';
+import Button from 'react-bootstrap/Button';
 import Alert from 'react-bootstrap/Alert';
 
 import Translate from '../../i18n/components/translate';
@@ -116,20 +117,21 @@ export function MetadataEditor ({ current }) {
                             </MetadataEditorNav>
                         </div>
                         <div className="col-6 col-lg-3 order-2 text-right">
-                            <button className="btn btn-info"
+                            <Button
+                                variant="info"
                                 type="button"
                                 onClick={() => save(metadata)}
                                 disabled={errors.length > 0 || loading}
                                 aria-label="Save changes to the metadata source. You will return to the dashboard">
                                 <FontAwesomeIcon icon={loading ? faSpinner : faSave} pulse={loading } />&nbsp;
                                 <Translate value="action.save">Save</Translate>
-                            </button>
+                            </Button>
                             &nbsp;
-                            <button className="btn btn-secondary"
+                            <Button variant="secondary"
                                 type="button"
                                 onClick={() => cancel()} aria-label="Cancel changes, go back to dashboard">
                                 <Translate value="action.cancel">Cancel</Translate>
-                            </button>
+                            </Button>
                         </div>
                         <div className="col-xs-12 col-lg-9 order-lg-1 order-3 align-items-start">
                             {warnings && warnings.hasOwnProperty(section) &&
diff --git a/ui/src/app/metadata/editor/MetadataEditorNav.js b/ui/src/app/metadata/editor/MetadataEditorNav.js
index 45b19ca1c..bfae1bb73 100644
--- a/ui/src/app/metadata/editor/MetadataEditorNav.js
+++ b/ui/src/app/metadata/editor/MetadataEditorNav.js
@@ -1,7 +1,8 @@
+import React from 'react';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
+import Button from 'react-bootstrap/Button';
 
 import Translate from '../../i18n/components/translate';
 // import { usePagesWithErrors } from '../hoc/MetadataFormContext';
@@ -31,14 +32,14 @@ export function MetadataEditorNav ({ definition, current, children, format = 'ta
                     </Dropdown.Toggle>
                     <Dropdown.Menu>
                         {routes.map((route, idx) =>
-                            <button
+                            <Button
                                 type="button"
                                 className="dropdown-item"
                                 key={route.path}
                                 onClick={() => onNavigate(route.path)}
                                 aria-label={route.label}>
                                 <Translate value={route.label}></Translate>
-                            </button>
+                            </Button>
                         )}
                         {children &&
                         <React.Fragment>
@@ -52,17 +53,18 @@ export function MetadataEditorNav ({ definition, current, children, format = 'ta
             <React.Fragment>
                 <nav className="nav nav-pills flex-column" role="navigation">
                     {routes.map((route, idx) =>
-                        <button
+                        <Button
+                            variant="text"
                             type="button"
                             key={route.path}
-                            className={`btn btn-text nav-link text-left px-3 py-2 mb-1 ${route.path === current ? 'active' : 'text-primary '}`}
+                            className={`nav-link text-left px-3 py-2 mb-1 ${route.path === current ? 'active' : 'text-primary '}`}
                             onClick={() => onNavigate(route.path)}
                             aria-label={route.label}>
                             <Translate value={route.label}></Translate>
                             { /*errors.indexOf(route.path) > -1 &&
                                 <FontAwesomeIcon className={`ml-2 ${route.path === current ? '' : 'text-danger'}`} icon={ faExclamationTriangle } />
                             */}
-                        </button>
+                        </Button>
                     )}
                 </nav>
                 <hr />
diff --git a/ui/src/app/metadata/new/NewAttribute.js b/ui/src/app/metadata/new/NewAttribute.js
index 88a6537ec..41d7ace0e 100644
--- a/ui/src/app/metadata/new/NewAttribute.js
+++ b/ui/src/app/metadata/new/NewAttribute.js
@@ -1,6 +1,8 @@
+import React from 'react';
 import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import Button from 'react-bootstrap/Button';
+
 import { Prompt, useHistory } from 'react-router';
 import Translate from '../../i18n/components/translate';
 import { MetadataAttributeEditor } from '../editor/MetadataAttributeEditor';
@@ -57,19 +59,19 @@ export function NewAttribute() {
                             <MetadataAttributeEditor definition={definition}>
                                 {(filter, errors) =>
                                     <React.Fragment>
-                                        <button className="btn btn-info mr-2"
+                                        <Button variant="info" className="mr-2"
                                             type="button"
                                             onClick={() => save(filter)}
                                             disabled={errors.length > 0 || loading}
                                             aria-label="Save changes to the metadata source. You will return to the dashboard">
                                             <FontAwesomeIcon icon={loading ? faSpinner : faSave} pulse={loading} />&nbsp;
                                         <Translate value="action.save">Save</Translate>
-                                        </button>
-                                        <button className="btn btn-secondary"
+                                        </Button>
+                                        <Button variant="secondary"
                                             type="button"
                                             onClick={() => cancel()} aria-label="Cancel changes, go back to dashboard">
                                             <Translate value="action.cancel">Cancel</Translate>
-                                        </button>
+                                        </Button>
                                     </React.Fragment>
                                 }
                             </MetadataAttributeEditor>
diff --git a/ui/src/app/metadata/new/NewFilter.js b/ui/src/app/metadata/new/NewFilter.js
index 318871364..3b00cfaee 100644
--- a/ui/src/app/metadata/new/NewFilter.js
+++ b/ui/src/app/metadata/new/NewFilter.js
@@ -1,6 +1,7 @@
+import React from 'react';
 import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import Button from 'react-bootstrap/Button';
 import { Prompt, useHistory, useParams } from 'react-router';
 import Translate from '../../i18n/components/translate';
 import { MetadataFilterEditor } from '../editor/MetadataFilterEditor';
@@ -36,6 +37,15 @@ export function NewFilter() {
         history.push(`/metadata/provider/${id}`, state);
     };
 
+    const onNavigate = (path) => {
+        const resetBlock = blocking;
+        setBlocking(false);
+        setTimeout(() => {
+            history.push(path);
+            setBlocking(resetBlock);
+        });
+    };
+
     return (
         <div className="container-fluid p-3">
             <Prompt
@@ -57,22 +67,22 @@ export function NewFilter() {
                         {(type, base) =>
                             <MetadataSchema type={type}>
                                 <MetadataForm initial={base}>
-                                    <MetadataFilterEditor>
+                                    <MetadataFilterEditor onNavigate={onNavigate} block={() => setBlocking(true)}>
                                         {(filter, isInvalid) =>
                                             <div className="d-flex justify-content-end">
-                                                <button className="btn btn-info mr-2"
+                                                <Button variant="info" className="mr-2"
                                                     type="button"
                                                     onClick={() => save(filter)}
                                                     disabled={isInvalid || loading}
                                                     aria-label="Save changes to the metadata source. You will return to the dashboard">
                                                     <FontAwesomeIcon icon={loading ? faSpinner : faSave} pulse={loading} />&nbsp;
                                                     <Translate value="action.save">Save</Translate>
-                                                </button>
-                                                <button className="btn btn-secondary"
+                                                </Button>
+                                                <Button variant="secondary"
                                                     type="button"
                                                     onClick={() => cancel()} aria-label="Cancel changes, go back to dashboard">
                                                     <Translate value="action.cancel">Cancel</Translate>
-                                                </button>
+                                                </Button>
                                             </div>}
                                     </MetadataFilterEditor>
                                 </MetadataForm>
diff --git a/ui/src/app/metadata/view/EditFilter.js b/ui/src/app/metadata/view/EditFilter.js
index 27d2a594c..d3c6756e8 100644
--- a/ui/src/app/metadata/view/EditFilter.js
+++ b/ui/src/app/metadata/view/EditFilter.js
@@ -1,6 +1,8 @@
+import React from 'react';
 import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import Button from 'react-bootstrap/Button';
+
 import { Prompt, useHistory, useParams } from 'react-router';
 import Translate from '../../i18n/components/translate';
 import { MetadataFilterEditor } from '../editor/MetadataFilterEditor';
@@ -74,19 +76,19 @@ export function EditFilter() {
                                 <MetadataFilterEditor onNavigate={onNavigate } block={ () => setBlocking(true) }>
                                         {(filter, isInvalid) =>
                                             <div className="d-flex justify-content-end">
-                                                <button className="btn btn-info mr-2"
+                                                <Button variant="info" className="mr-2"
                                                     type="button"
                                                     onClick={() => save(filter)}
                                                     disabled={isInvalid || loading}
                                                     aria-label="Save changes to the metadata source. You will return to the dashboard">
                                                     <FontAwesomeIcon icon={loading ? faSpinner : faSave} pulse={loading} />&nbsp;
                                                         <Translate value="action.save">Save</Translate>
-                                                </button>
-                                                <button className="btn btn-secondary"
+                                                </Button>
+                                                <Button variant="secondary"
                                                     type="button"
                                                     onClick={() => cancel()} aria-label="Cancel changes, go back to dashboard">
                                                     <Translate value="action.cancel">Cancel</Translate>
-                                                </button>
+                                                </Button>
                                             </div>
                                         }
                                     </MetadataFilterEditor>
diff --git a/ui/src/app/metadata/view/MetadataAttributeEdit.js b/ui/src/app/metadata/view/MetadataAttributeEdit.js
index 6d035851c..58cd6d995 100644
--- a/ui/src/app/metadata/view/MetadataAttributeEdit.js
+++ b/ui/src/app/metadata/view/MetadataAttributeEdit.js
@@ -1,6 +1,8 @@
+import React from 'react';
 import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+
+import Button from 'react-bootstrap/Button';
 import { Prompt, useHistory, useParams } from 'react-router';
 import Translate from '../../i18n/components/translate';
 import { MetadataAttributeEditor } from '../editor/MetadataAttributeEditor';
@@ -75,19 +77,19 @@ export function MetadataAttributeEdit() {
                             <MetadataAttributeEditor definition={definition}>
                                 {(filter, errors) =>
                                     <React.Fragment>
-                                        <button className="btn btn-info mr-2"
+                                        <Button variant="info" className="mr-2"
                                             type="button"
                                             onClick={() => save(filter)}
                                             disabled={errors.length > 0 || loading}
                                             aria-label="Save changes to the metadata source. You will return to the dashboard">
                                             <FontAwesomeIcon icon={loading ? faSpinner : faSave} pulse={loading} />&nbsp;
                                         <Translate value="action.save">Save</Translate>
-                                        </button>
-                                        <button className="btn btn-secondary"
+                                        </Button>
+                                        <Button variant="secondary"
                                             type="button"
                                             onClick={() => cancel()} aria-label="Cancel changes, go back to dashboard">
                                             <Translate value="action.cancel">Cancel</Translate>
-                                        </button>
+                                        </Button>
                                     </React.Fragment>
                                 }
                             </MetadataAttributeEditor>
diff --git a/ui/src/app/metadata/view/MetadataAttributeList.js b/ui/src/app/metadata/view/MetadataAttributeList.js
index e91313116..b72c3c0e7 100644
--- a/ui/src/app/metadata/view/MetadataAttributeList.js
+++ b/ui/src/app/metadata/view/MetadataAttributeList.js
@@ -1,6 +1,8 @@
+import React from 'react';
 import { faEdit, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+
+import Button from 'react-bootstrap/Button';
 import { Link } from 'react-router-dom';
 
 import { Translate } from '../../i18n/components/translate';
@@ -67,12 +69,12 @@ export function MetadataAttributeList ({entities, onDelete}) {
                                                             <Translate value="action.edit">Edit</Translate>
                                                         </span>
                                                     </Link>
-                                                    <button className="btn btn-link text-danger" onClick={() => block(() => remove(attr.name))}>
+                                                    <Button variant="link" className="text-danger" onClick={() => block(() => remove(attr.name))}>
                                                         <FontAwesomeIcon icon={faTrash} size="lg" />
                                                         <span className="sr-only">
                                                             <Translate value="action.delete">Delete</Translate>
                                                         </span>
-                                                    </button>
+                                                    </Button>
                                                 </td>
                                             </tr>
                                         )}
diff --git a/ui/src/app/metadata/view/MetadataHistory.js b/ui/src/app/metadata/view/MetadataHistory.js
index 886c1e201..9921cc19e 100644
--- a/ui/src/app/metadata/view/MetadataHistory.js
+++ b/ui/src/app/metadata/view/MetadataHistory.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useHistory, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import queryString from 'query-string';
-
+import Button from 'react-bootstrap/Button';
 import FormattedDate from '../../core/components/FormattedDate';
 
 import Translate from '../../i18n/components/translate';
@@ -107,10 +107,10 @@ export function MetadataHistory () {
                         )}
                     </tbody>
                 </table>
-                <button className="btn btn-primary" onClick={ () => compare(selected) } disabled={!selected.length}>
+                <Button variant="primary" onClick={ () => compare(selected) } disabled={!selected.length}>
                     <Translate value="label.compare-selected">Compare Selected</Translate>
                     {selected.length > 0 && <span>({ selected.length })</span> }
-                </button>
+                </Button>
                 </>
             </div>}
             {loading && <div className="d-flex justify-content-center">
diff --git a/ui/src/app/metadata/view/MetadataOptions.js b/ui/src/app/metadata/view/MetadataOptions.js
index 91121c7f6..e592731e6 100644
--- a/ui/src/app/metadata/view/MetadataOptions.js
+++ b/ui/src/app/metadata/view/MetadataOptions.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { faArrowDown, faArrowUp, faHistory, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link, useHistory, useParams } from 'react-router-dom';
-
+import Button from 'react-bootstrap/Button';
 import { scroller } from 'react-scroll';
 
 import Translate from '../../i18n/components/translate';
@@ -59,12 +59,12 @@ export function MetadataOptions () {
                     enabled={type === 'source' ? metadata.serviceEnabled : metadata.enabled}
                     model={metadata}>
                     {type === 'source' && onDeleteSource &&
-                        <button className="btn btn-outline btn-sm btn-danger align-self-start"
+                        <Button className="btn btn-outline btn-sm btn-danger align-self-start"
                             disabled={metadata.serviceEnabled}
                             onClick={() => onDeleteSource(metadata.id, redirectOnDelete)}>
                             <Translate value="action.delete" />
                             <FontAwesomeIcon icon={faTrash} className="ml-2" />
-                        </button>
+                        </Button>
                     }
                 </MetadataHeader>
                 <div className="px-3 my-3 d-flex justify-content-between" id="navigation">
@@ -74,10 +74,10 @@ export function MetadataOptions () {
                             <Translate value="action.version-history">Version History</Translate>
                         </Link>
                         {type === 'provider' &&
-                            <button className="btn btn-link" onClick={() => onScrollTo('filters')}>
+                            <Button variant="link" onClick={() => onScrollTo('filters')}>
                                 <FontAwesomeIcon icon={faArrowDown} />&nbsp;
                                 <Translate value="label.filters">Filters</Translate>
-                            </button>
+                            </Button>
                         }
                     </div>
                     <MetadataViewToggle />
@@ -108,10 +108,10 @@ export function MetadataOptions () {
                         </>
                     }
                 </div>
-                <button className="btn btn-link" onClick={ () => onScrollTo('header', -60) }>
+                <Button variant="link" onClick={ () => onScrollTo('header', -60) }>
                     <FontAwesomeIcon icon={faArrowUp} className="sr-hidden" />&nbsp;
                     <Translate value="action.back-to-top">Back to Top</Translate>
-                </button>
+                </Button>
             </div>
             </>}
         </DeleteSourceConfirmation>
diff --git a/ui/src/app/metadata/view/MetadataUpload.js b/ui/src/app/metadata/view/MetadataUpload.js
index a193c46f9..b5c4fffe5 100644
--- a/ui/src/app/metadata/view/MetadataUpload.js
+++ b/ui/src/app/metadata/view/MetadataUpload.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Form from 'react-bootstrap/Form';
 import { useForm } from "react-hook-form";
 import { useHistory } from 'react-router-dom';
-
+import Button from 'react-bootstrap/Button';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import { faAsterisk, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 
@@ -85,7 +85,7 @@ export function MetadataUpload() {
                             </h3>
                         </li>
                         <li className="nav-item">
-                            <button className="nav-link next btn d-flex justify-content-between align-items-start"
+                            <Button className="nav-link next btn d-flex justify-content-between align-items-start"
                                 disabled={!isValid || saving}
                                 aria-label="Save metadata resolver">
                                 <span className="label">
@@ -97,7 +97,7 @@ export function MetadataUpload() {
                                     <FontAwesomeIcon icon={saving ? faSpinner : faSave} pulse={saving} size="2x" />
                                     <Translate value="action.save">Save</Translate>
                                 </span>
-                            </button>
+                            </Button>
                         </li>
                     </ul>
                     <fieldset className="bg-light border rounded p-4">
@@ -142,13 +142,13 @@ export function MetadataUpload() {
                             <span><Translate value="message.file-upload-alert">Note: You can only import a file with a single entityID (EntityDescriptor element) in it. Anything more in that file will result in an error.</Translate></span>
                         </div>
                     </fieldset>
-                    <button className="nav-link next btn d-flex justify-content-between align-items-start sr-only"
+                    <Button className="nav-link next btn d-flex justify-content-between align-items-start sr-only"
                         disabled={!isValid}
                         aria-label="Save metadata resolver">
                         <span className="label">
                             <Translate value="action.save">Save</Translate>
                         </span>
-                    </button>
+                    </Button>
                 </form>
             </div>
         </div>
diff --git a/ui/src/app/metadata/view/MetadataVersion.js b/ui/src/app/metadata/view/MetadataVersion.js
index 9335bf563..3bde185fa 100644
--- a/ui/src/app/metadata/view/MetadataVersion.js
+++ b/ui/src/app/metadata/view/MetadataVersion.js
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import Button from 'react-bootstrap/Button';
 import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
 import { Configuration } from '../hoc/Configuration';
 import { MetadataConfiguration } from '../component/MetadataConfiguration';
@@ -79,10 +79,10 @@ export function MetadataVersion() {
                                     </>
                                 }
                             </div>
-                            <button className="btn btn-link" onClick={() => onScrollTo('header', -60)}>
+                            <Button variant="link" onClick={() => onScrollTo('header', -60)}>
                                 <FontAwesomeIcon icon={faArrowUp} className="sr-hidden" />&nbsp;
                                 <Translate value="action.back-to-top">Back to Top</Translate>
-                            </button>
+                            </Button>
                         </div>
                         </>
                     }
diff --git a/ui/src/app/metadata/view/MetadataXml.js b/ui/src/app/metadata/view/MetadataXml.js
index c83872eea..5144b14af 100644
--- a/ui/src/app/metadata/view/MetadataXml.js
+++ b/ui/src/app/metadata/view/MetadataXml.js
@@ -1,7 +1,8 @@
+import React from 'react';
 import { faSave } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
 
+import Button from 'react-bootstrap/Button';
 import { useParams } from 'react-router';
 import Translate from '../../i18n/components/translate';
 import { MetadataObjectContext } from '../hoc/MetadataSelector';
@@ -34,10 +35,10 @@ export function MetadataXml () {
                     </figcaption>
                 </figure>
                 
-                <button type="button" className="btn btn-primary" onClick={() => download()}>
+                <Button type="button" variant="primary" onClick={() => download()}>
                     <FontAwesomeIcon icon={faSave} />&nbsp;
                     <Translate value="action.download-file">Download File</Translate>
-                </button>
+                </Button>
             </div>
         </div>
         </>
diff --git a/ui/src/app/metadata/wizard/MetadataProviderTypeSelector.js b/ui/src/app/metadata/wizard/MetadataProviderTypeSelector.js
index b90645309..1312eda20 100644
--- a/ui/src/app/metadata/wizard/MetadataProviderTypeSelector.js
+++ b/ui/src/app/metadata/wizard/MetadataProviderTypeSelector.js
@@ -1,8 +1,10 @@
+import React from 'react';
 import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+
 import { useForm } from 'react-hook-form';
 import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
 import Translate from '../../i18n/components/translate';
 import { InfoIcon } from '../../form/component/InfoIcon';
 import { useTranslator } from '../../i18n/hooks';
@@ -57,7 +59,7 @@ export function MetadataProviderTypeSelector({ type, types = [], children}) {
                         </li>
                         <li className="nav-item">
                             {isValid &&
-                            <button className="nav-link next btn d-flex justify-content-between align-items-start" onClick={() => onNext(getValues())} aria-label={() => <Translate value={`label.common-attributes`} />}
+                            <Button className="nav-link next btn d-flex justify-content-between align-items-start" onClick={() => onNext(getValues())} aria-label={() => <Translate value={`label.common-attributes`} />}
                                     type="button">
                                     <span className="label">
                                     2.&nbsp;
@@ -67,7 +69,7 @@ export function MetadataProviderTypeSelector({ type, types = [], children}) {
                                         <FontAwesomeIcon icon={faArrowCircleRight} size="2x" />
                                         <Translate value="action.next">Next</Translate>
                                     </span>
-                                </button>
+                                </Button>
                             }
                         </li>
                     </ul>
diff --git a/ui/src/app/metadata/wizard/WizardNav.js b/ui/src/app/metadata/wizard/WizardNav.js
index 5fdc91def..da4564d6f 100644
--- a/ui/src/app/metadata/wizard/WizardNav.js
+++ b/ui/src/app/metadata/wizard/WizardNav.js
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import Button from 'react-bootstrap/Button';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import { faCheck, faSpinner, faSave, faArrowCircleRight, faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons';
 
@@ -47,7 +47,7 @@ export function WizardNav ({ disabled = false, onSave, saving, onRestart }) {
         <nav>
             <ul className="nav nav-wizard">
                 {previous && <li className="nav-item">
-                    <button className="nav-link previous btn d-flex justify-content-between align-items-start" onClick={() => onPrevious(previous.id)} disabled={disabled} aria-label={() => <Translate value={previous.path} />}
+                    <Button className="nav-link previous btn d-flex justify-content-between align-items-start" onClick={() => onPrevious(previous.id)} disabled={disabled} aria-label={() => <Translate value={previous.path} />}
                         type="button">
                         <span className="direction d-flex flex-column align-items-center">
                             <FontAwesomeIcon icon={faArrowCircleLeft} size="2x" />
@@ -57,7 +57,7 @@ export function WizardNav ({ disabled = false, onSave, saving, onRestart }) {
                             {previous.index}.&nbsp;
                             <Translate value={previous.label}>{previous.label}</Translate>
                         </span>
-                    </button>
+                    </Button>
                 </li>
                 }
                 <li className="nav-item">
@@ -70,7 +70,7 @@ export function WizardNav ({ disabled = false, onSave, saving, onRestart }) {
                 </li>
                 {next &&
                 <li className="nav-item">
-                    <button className="nav-link next btn d-flex justify-content-between align-items-start" onClick={() => onSetIndex(next.id)} disabled={disabled} aria-label={() => <Translate value={previous.path} />}
+                    <Button className="nav-link next btn d-flex justify-content-between align-items-start" onClick={() => onSetIndex(next.id)} disabled={disabled} aria-label={() => <Translate value={previous.path} />}
                         type="button">
                         <span className="label">
                             {next.index }.&nbsp;
@@ -80,12 +80,12 @@ export function WizardNav ({ disabled = false, onSave, saving, onRestart }) {
                             <FontAwesomeIcon icon={faArrowCircleRight} size="2x" />
                             <Translate value="action.next">Next</Translate>
                         </span>
-                    </button>
+                    </Button>
                 </li>
                 }
                 {last && (last.id === current.id) && 
                 <li className="nav-item">
-                    <button className="nav-link save btn d-flex justify-content-between align-items-start"
+                    <Button className="nav-link save btn d-flex justify-content-between align-items-start"
                         aria-label="Save"
                         disabled={disabled}
                         onClick={() => onSave()}
@@ -99,7 +99,7 @@ export function WizardNav ({ disabled = false, onSave, saving, onRestart }) {
                             <FontAwesomeIcon icon={saving ? faSpinner : faSave} pulse={saving} size="2x" className="next" />
                             <Translate value="action.save">Save</Translate>
                         </span>
-                    </button>
+                    </Button>
                 </li>
                 }
             </ul>