diff --git a/react/features/base/ui/components/_.native.ts b/react/features/base/ui/components/_.native.ts
new file mode 100644
index 000000000..738c4d2b8
--- /dev/null
+++ b/react/features/base/ui/components/_.native.ts
@@ -0,0 +1 @@
+export * from './native';
diff --git a/react/features/base/ui/components/_.web.ts b/react/features/base/ui/components/_.web.ts
new file mode 100644
index 000000000..b80c83af3
--- /dev/null
+++ b/react/features/base/ui/components/_.web.ts
@@ -0,0 +1 @@
+export * from './web';
diff --git a/react/features/base/ui/components/index.ts b/react/features/base/ui/components/index.ts
new file mode 100644
index 000000000..796480f8e
--- /dev/null
+++ b/react/features/base/ui/components/index.ts
@@ -0,0 +1,2 @@
+// @ts-ignore
+export * from './_';
diff --git a/react/features/base/ui/components/native/index.ts b/react/features/base/ui/components/native/index.ts
new file mode 100644
index 000000000..eae9c8e3b
--- /dev/null
+++ b/react/features/base/ui/components/native/index.ts
@@ -0,0 +1 @@
+export { default as Button } from './Button';
diff --git a/react/features/base/ui/components/web/index.ts b/react/features/base/ui/components/web/index.ts
new file mode 100644
index 000000000..eae9c8e3b
--- /dev/null
+++ b/react/features/base/ui/components/web/index.ts
@@ -0,0 +1 @@
+export { default as Button } from './Button';
diff --git a/react/features/base/ui/index.ts b/react/features/base/ui/index.ts
new file mode 100644
index 000000000..07635cbbc
--- /dev/null
+++ b/react/features/base/ui/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/react/features/recording/components/Recording/StartRecordingDialogContent.js b/react/features/recording/components/Recording/StartRecordingDialogContent.js
index 93a98e5c7..db0d2f024 100644
--- a/react/features/recording/components/Recording/StartRecordingDialogContent.js
+++ b/react/features/recording/components/Recording/StartRecordingDialogContent.js
@@ -1,5 +1,3 @@
-// @flow
-
 import React, { Component } from 'react';
 
 import {
@@ -12,7 +10,6 @@ import {
 } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import {
-    Button,
     Container,
     Image,
     LoadingIndicator,
@@ -21,6 +18,8 @@ import {
 } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
+import { Button } from '../../../base/ui';
+import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { authorizeDropbox, updateDropboxToken } from '../../../dropbox';
 import { isVpaasMeeting } from '../../../jaas/functions';
 import { RECORDING_TYPES } from '../../constants';
@@ -435,10 +434,9 @@ class StartRecordingDialogContent extends Component<Props> {
             switchContent = (
                 <Container className = 'recording-switch'>
                     <Button
-                        onValueChange = { this._onSignOut }
-                        style = { styles.signButton }>
-                        { t('recording.signOut') }
-                    </Button>
+                        label = { 'recording.signOut' }
+                        onPress = { this._onSignOut }
+                        type = { BUTTON_TYPES.SECONDARY } />
                 </Container>
             );
 
@@ -446,10 +444,9 @@ class StartRecordingDialogContent extends Component<Props> {
             switchContent = (
                 <Container className = 'recording-switch'>
                     <Button
-                        onValueChange = { this._onSignIn }
-                        style = { styles.signButton }>
-                        { t('recording.signIn') }
-                    </Button>
+                        label = { 'recording.signIn' }
+                        onPress = { this._onSignIn }
+                        type = { BUTTON_TYPES.PRIMARY } />
                 </Container>
             );
         }
diff --git a/react/features/recording/components/Recording/styles.native.js b/react/features/recording/components/Recording/styles.native.js
index 7d6255796..4ff29c889 100644
--- a/react/features/recording/components/Recording/styles.native.js
+++ b/react/features/recording/components/Recording/styles.native.js
@@ -146,14 +146,6 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
         color: BaseTheme.palette.text01
     },
 
-    signButton: {
-        backgroundColor: BaseTheme.palette.screen01Header,
-        color: BaseTheme.palette.ui12,
-        fontSize: 16,
-        borderRadius: BaseTheme.shape.borderRadius,
-        padding: BoxModel.padding * 0.5
-    },
-
     switch: {
         color: BaseTheme.palette.ui12
     },