use emby-button/Button instead of ButtonElement

src/apps/dashboard/routes/users/access.tsx

@@ -6,7 +6,7 @@ import loading from '../../../../components/loading/loading';
 import globalize from '../../../../lib/globalize';
 import toast from '../../../../components/toast/toast';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
@@ -316,10 +316,10 @@ const UserLibraryAccess = () => {
                     </AccessContainer>
                     <br />
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='Save'
+                            title={globalize.translate('Save')}
                         />
                     </div>
                 </form>

src/apps/dashboard/routes/users/add.tsx

@@ -7,7 +7,7 @@ import loading from '../../../../components/loading/loading';
 import toast from '../../../../components/toast/toast';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import Input from '../../../../elements/emby-input/Input';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import Page from '../../../../components/Page';
@@ -248,16 +248,16 @@ const UserNew = () => {
                         ))}
                     </AccessContainer>
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='Save'
+                            title={globalize.translate('Save')}
                         />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnCancel'
                             className='raised button-cancel block'
-                            title='ButtonCancel'
+                            title={globalize.translate('ButtonCancel')}
                         />
                     </div>
                 </form>

src/apps/dashboard/routes/users/parentalcontrol.tsx

@@ -8,7 +8,7 @@ import { useSearchParams } from 'react-router-dom';
 import globalize from '../../../../lib/globalize';
 import AccessScheduleList from '../../../../components/dashboard/users/AccessScheduleList';
 import TagList from '../../../../components/dashboard/users/TagList';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import loading from '../../../../components/loading/loading';
@@ -480,10 +480,10 @@ const UserParentalControl = () => {
                         </div>
                     </div>
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='Save'
+                            title={globalize.translate('Save')}
                         />
                     </div>
                 </form>

src/apps/dashboard/routes/users/profile.tsx

@@ -5,7 +5,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import LinkButton from '../../../../elements/emby-button/LinkButton';
 import Input from '../../../../elements/emby-input/Input';
@@ -553,16 +553,16 @@ const UserEdit = () => {
                     </div>
                     <br />
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='Save'
+                            title={globalize.translate('Save')}
                         />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnCancel'
                             className='raised button-cancel block'
-                            title='ButtonCancel'
+                            title={globalize.translate('ButtonCancel')}
                         />
                     </div>
                 </form>

src/apps/stable/routes/quickConnect/index.tsx

@@ -5,7 +5,7 @@ import { Link, useSearchParams } from 'react-router-dom';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
 import Input from 'elements/emby-input/Input';
-import ButtonElement from 'elements/ButtonElement';
+import Button from 'elements/emby-button/Button';
 import { useApi } from 'hooks/useApi';
 
 import './quickConnect.scss';
@@ -102,7 +102,7 @@ const QuickConnectPage: FC = () => {
                                         autoComplete='off'
                                     />
                                 </div>
-                                <ButtonElement
+                                <Button
                                     type='submit'
                                     className='raised button-submit block'
                                     title={globalize.translate('Authorize')}

src/apps/stable/routes/user/userprofile.tsx

@@ -7,7 +7,7 @@ import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import { appHost } from '../../../../components/apphost';
 import confirm from '../../../../components/confirm/confirm';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
 import loading from '../../../../components/loading/loading';
 import toast from '../../../../components/toast/toast';
@@ -197,17 +197,17 @@ const UserProfile: FunctionComponent = () => {
                             {userName}
                         </h2>
                         <br />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnAddImage'
                             className='raised button-submit hide'
-                            title='ButtonAddImage'
+                            title={globalize.translate('ButtonAddImage')}
                         />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnDeleteImage'
                             className='raised hide'
-                            title='DeleteImage'
+                            title={globalize.translate('DeleteImage')}
                         />
                     </div>
                 </div>

src/components/dashboard/users/UserPasswordForm.tsx

@@ -5,7 +5,7 @@ import globalize from '../../../lib/globalize';
 import confirm from '../../confirm/confirm';
 import loading from '../../loading/loading';
 import toast from '../../toast/toast';
-import ButtonElement from '../../../elements/ButtonElement';
+import Button from '../../../elements/emby-button/Button';
 import Input from '../../../elements/emby-input/Input';
 
 type IProps = {
@@ -183,16 +183,16 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
                     </div>
                     <br />
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='SavePassword'
+                            title={globalize.translate('SavePassword')}
                         />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnResetPassword'
                             className='raised button-cancel block hide'
-                            title='ResetPassword'
+                            title={globalize.translate('ResetPassword')}
                         />
                     </div>
                 </div>

src/elements/ButtonElement.tsx

@@ -1,42 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import globalize from 'lib/globalize';
-
-const createButtonElement = ({ type, id, className, title, leftIcon, rightIcon }: IProps) => ({
-    __html: `<button
-        is="emby-button"
-        type="${type}"
-        ${id}
-        class="${className}"
-        >
-        ${leftIcon}
-        <span>${title}</span>
-        ${rightIcon}
-    </button>`
-});
-
-type IProps = {
-    type?: string;
-    id?: string;
-    className?: string;
-    title?: string;
-    leftIcon?: string;
-    rightIcon?: string;
-};
-
-const ButtonElement: FunctionComponent<IProps> = ({ type, id, className, title, leftIcon, rightIcon }: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createButtonElement({
-                type: type,
-                id: id ? `id="${id}"` : '',
-                className: className,
-                title: globalize.translate(title),
-                leftIcon: leftIcon ? `<span class="material-icons ${leftIcon}" aria-hidden="true"></span>` : '',
-                rightIcon: rightIcon ? `<span class="material-icons ${rightIcon}" aria-hidden="true"></span>` : ''
-            })}
-        />
-    );
-};
-
-export default ButtonElement;