diff --git a/packages/components/src/components/button-toggle/button-toggle.jsx b/packages/components/src/components/button-toggle/button-toggle.jsx
index fbb358d281e6..136eae29b6e7 100644
--- a/packages/components/src/components/button-toggle/button-toggle.jsx
+++ b/packages/components/src/components/button-toggle/button-toggle.jsx
@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import HighlightWrapper from './button-highlight-wrapper.jsx';
-import Button from '../button/button.jsx';
 import Counter from '../counter/counter';
+import Button from '../button/button';
 
 const ButtonToggle = ({ buttons_arr, className, has_rounded_button, id, is_animated, name, onChange, value }) => {
     const changeValue = selected_value => {
diff --git a/packages/components/src/components/button/button.jsx b/packages/components/src/components/button/button.tsx
similarity index 69%
rename from packages/components/src/components/button/button.jsx
rename to packages/components/src/components/button/button.tsx
index 669161fc2312..146d22e5702e 100644
--- a/packages/components/src/components/button/button.jsx
+++ b/packages/components/src/components/button/button.tsx
@@ -1,11 +1,39 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
-import ButtonLoading from './button_loading.jsx';
+import ButtonLoading from './button_loading';
 import Icon from '../icon';
 import Text from '../text';
 
-const ButtonGroup = ({ children, className }) => (
+type TButtonProps = React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    alternate: boolean;
+    blue: boolean;
+    classNameSpan: string;
+    green: boolean;
+    has_effect: boolean;
+    icon: React.ReactNode;
+    is_button_toggle: boolean;
+    is_circular: boolean;
+    is_circle: boolean;
+    is_disabled: boolean;
+    is_loading: boolean;
+    is_plus: boolean;
+    is_submit_success: boolean;
+    large: boolean;
+    medium: boolean;
+    primary: boolean;
+    primary_light: boolean;
+    renderText: (param: React.ReactNode) => React.ReactNode;
+    rounded: boolean;
+    secondary: boolean;
+    small: boolean;
+    tertiary: boolean;
+    text: string;
+    transparent: boolean;
+    type: 'button' | 'submit' | 'reset';
+    wrapperClassName: string;
+};
+
+const ButtonGroup = ({ children, className }: React.PropsWithChildren<HTMLDivElement>) => (
     <div className={classNames('dc-btn__group', className)}>{children}</div>
 );
 const Button = ({
@@ -28,7 +56,7 @@ const Button = ({
     medium,
     onClick,
     rounded,
-    tabIndex,
+    tabIndex = 0,
     text,
     wrapperClassName,
     type,
@@ -41,7 +69,7 @@ const Button = ({
     tertiary,
     renderText,
     ...props
-}) => {
+}: Partial<TButtonProps>) => {
     const classes = classNames(
         'dc-btn',
         {
@@ -71,9 +99,9 @@ const Button = ({
         <button
             id={id}
             className={classes}
-            onClick={onClick || undefined}
+            onClick={onClick}
             disabled={is_disabled}
-            tabIndex={tabIndex || '0'}
+            tabIndex={tabIndex}
             type={is_submit_success ? 'button' : type || 'submit'}
             {...props}
         >
@@ -100,40 +128,6 @@ const Button = ({
     return wrapperClassName ? wrapper : button;
 };
 
-Button.propTypes = {
-    blue: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    classNameSpan: PropTypes.string,
-    green: PropTypes.bool,
-    has_effect: PropTypes.bool,
-    icon: PropTypes.node,
-    id: PropTypes.string,
-    is_disabled: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    is_loading: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-    is_circle: PropTypes.bool,
-    is_plus: PropTypes.bool,
-    is_submit_success: PropTypes.bool,
-    large: PropTypes.bool,
-    medium: PropTypes.bool,
-    onClick: PropTypes.func,
-    primary: PropTypes.bool,
-    primary_light: PropTypes.bool,
-    rounded: PropTypes.bool,
-    secondary: PropTypes.bool,
-    small: PropTypes.bool,
-    tertiary: PropTypes.bool,
-    transparent: PropTypes.bool,
-    text: PropTypes.string,
-    wrapperClassName: PropTypes.string,
-    is_button_toggle: PropTypes.bool,
-    is_circular: PropTypes.bool,
-    tabIndex: PropTypes.string,
-    type: PropTypes.string,
-    alternate: PropTypes.bool,
-    renderText: PropTypes.func,
-};
-
 Button.Group = ButtonGroup;
 
 export default Button;
diff --git a/packages/components/src/components/button/button_loading.jsx b/packages/components/src/components/button/button_loading.jsx
deleted file mode 100644
index 7a1bb295a60c..000000000000
--- a/packages/components/src/components/button/button_loading.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import Loading from '../loading/loading.jsx';
-import '../loading/loading.scss';
-
-const ButtonLoading = props => {
-    return <Loading {...props} is_fullscreen={false} className='initial-loader--btn' />;
-};
-
-export default ButtonLoading;
diff --git a/packages/components/src/components/button/button_loading.tsx b/packages/components/src/components/button/button_loading.tsx
new file mode 100644
index 000000000000..6a96f4e1644e
--- /dev/null
+++ b/packages/components/src/components/button/button_loading.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import Loading, { TLoadingProps } from '../loading/loading';
+import '../loading/loading.scss';
+
+const ButtonLoading = (
+    props: Omit<TLoadingProps, 'is_fullscreen' | 'className' | 'is_slow_loading' | 'status' | 'theme'>
+) => {
+    return <Loading {...props} is_fullscreen={false} className='initial-loader--btn' />;
+};
+
+export default ButtonLoading;
diff --git a/packages/components/src/components/button/index.js b/packages/components/src/components/button/index.ts
similarity index 57%
rename from packages/components/src/components/button/index.js
rename to packages/components/src/components/button/index.ts
index 41961dc6c9f1..a6968c5ee1b5 100644
--- a/packages/components/src/components/button/index.js
+++ b/packages/components/src/components/button/index.ts
@@ -1,4 +1,4 @@
-import Button from './button.jsx';
+import Button from './button';
 import './button.scss';
 
 export default Button;
diff --git a/packages/components/src/components/carousel/carousel.jsx b/packages/components/src/components/carousel/carousel.jsx
index 6dddafd1e256..a61501625044 100644
--- a/packages/components/src/components/carousel/carousel.jsx
+++ b/packages/components/src/components/carousel/carousel.jsx
@@ -5,7 +5,7 @@ import { Swipeable } from 'react-swipeable';
 import Card from './carousel-card.jsx';
 import Nav from './carousel-nav.jsx';
 import Icon from '../icon';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import { useInterval } from '../../hooks';
 
 const Carousel = ({
diff --git a/packages/components/src/components/dialog/dialog.jsx b/packages/components/src/components/dialog/dialog.jsx
index 2bba6b5e7b2f..5111835762d9 100644
--- a/packages/components/src/components/dialog/dialog.jsx
+++ b/packages/components/src/components/dialog/dialog.jsx
@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import Button from '../button/button.jsx';
 import Icon from '../icon/icon';
+import Button from '../button/button';
 import Text from '../text';
 import { useOnClickOutside } from '../../hooks';
 
diff --git a/packages/components/src/components/form-cancel-button/form-cancel-button.jsx b/packages/components/src/components/form-cancel-button/form-cancel-button.jsx
index e57fc409a028..98eb43cdddb5 100644
--- a/packages/components/src/components/form-cancel-button/form-cancel-button.jsx
+++ b/packages/components/src/components/form-cancel-button/form-cancel-button.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 
 const FormCancelButton = ({ className, is_center, is_disabled, is_absolute, label, onCancel, ...props }) => {
     return (
diff --git a/packages/components/src/components/form-submit-button/form-submit-button.jsx b/packages/components/src/components/form-submit-button/form-submit-button.jsx
index d35f2b86c28c..978057d95f11 100644
--- a/packages/components/src/components/form-submit-button/form-submit-button.jsx
+++ b/packages/components/src/components/form-submit-button/form-submit-button.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import Text from '../text';
 
 const FormSubmitButton = ({
diff --git a/packages/components/src/components/loading/index.js b/packages/components/src/components/loading/index.ts
similarity index 57%
rename from packages/components/src/components/loading/index.js
rename to packages/components/src/components/loading/index.ts
index ec37aa25cd28..c170e77093ff 100644
--- a/packages/components/src/components/loading/index.js
+++ b/packages/components/src/components/loading/index.ts
@@ -1,4 +1,4 @@
-import Loading from './loading.jsx';
+import Loading from './loading';
 import './loading.scss';
 
 export default Loading;
diff --git a/packages/components/src/components/loading/loading.jsx b/packages/components/src/components/loading/loading.tsx
similarity index 77%
rename from packages/components/src/components/loading/loading.jsx
rename to packages/components/src/components/loading/loading.tsx
index f7ea3c456c33..80a313ce5d06 100644
--- a/packages/components/src/components/loading/loading.jsx
+++ b/packages/components/src/components/loading/loading.tsx
@@ -1,9 +1,15 @@
-import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import Text from '../text/text';
 
-const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status, theme }) => {
+export type TLoadingProps = React.HTMLProps<HTMLDivElement> & {
+    is_fullscreen: boolean;
+    is_slow_loading: boolean;
+    status: string[];
+    theme: string;
+};
+
+const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status, theme }: Partial<TLoadingProps>) => {
     const theme_class = theme ? `barspinner-${theme}` : 'barspinner-light';
     return (
         <div
@@ -27,7 +33,7 @@ const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status,
                 ))}
             </div>
             {is_slow_loading &&
-                status.map((text, inx) => (
+                status?.map((text, inx) => (
                     <Text as='h3' color='prominent' size='xs' align='center' key={inx}>
                         {text}
                     </Text>
@@ -36,12 +42,4 @@ const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status,
     );
 };
 
-Loading.propTypes = {
-    className: PropTypes.string,
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    is_fullscreen: PropTypes.bool,
-    is_slow_loading: PropTypes.bool,
-    status: PropTypes.array,
-    theme: PropTypes.string,
-};
 export default Loading;
diff --git a/packages/components/src/components/numpad/number-button.jsx b/packages/components/src/components/numpad/number-button.jsx
index 493d2d1a95c9..38845e27800c 100644
--- a/packages/components/src/components/numpad/number-button.jsx
+++ b/packages/components/src/components/numpad/number-button.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import Text from '../text';
 
 const NumberButton = ({ onSelect, className, number }) => (
diff --git a/packages/components/src/components/numpad/numpad.jsx b/packages/components/src/components/numpad/numpad.jsx
index 4be1817bf7e1..7b638cfc3ffd 100644
--- a/packages/components/src/components/numpad/numpad.jsx
+++ b/packages/components/src/components/numpad/numpad.jsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import NumberGrid from './number-grid.jsx';
 import StepInput from './step-input.jsx';
 import Text from '../text';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import { useLongPress } from '../../hooks';
 
 const concatenate = (number, default_value) => default_value.toString().concat(number);
diff --git a/packages/components/src/components/numpad/step-input.jsx b/packages/components/src/components/numpad/step-input.jsx
index 87ac5480ca05..0586725a775d 100644
--- a/packages/components/src/components/numpad/step-input.jsx
+++ b/packages/components/src/components/numpad/step-input.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { isCryptocurrency } from '@deriv/shared';
 import Input from '../input/input.jsx';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 
 const getDecimals = val => {
     const array_value = typeof val === 'string' ? val.split('.') : val.toString().split('.');
diff --git a/packages/components/src/components/popover-mobile/popover-mobile.jsx b/packages/components/src/components/popover-mobile/popover-mobile.jsx
index 298fa018ea6b..1afea5b44d8a 100644
--- a/packages/components/src/components/popover-mobile/popover-mobile.jsx
+++ b/packages/components/src/components/popover-mobile/popover-mobile.jsx
@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { isMobile } from '@deriv/shared';
+import Button from '../button/button';
 import Modal from '../modal/modal';
-import Button from '../button/button.jsx';
 import Popover from '../popover/popover.jsx';
 import Text from '../text/text';
 import './popover-mobile.scss';
diff --git a/packages/components/src/components/popup/popup-overlay.jsx b/packages/components/src/components/popup/popup-overlay.jsx
index 28234bcf7de1..e1a4ab2d7bfc 100644
--- a/packages/components/src/components/popup/popup-overlay.jsx
+++ b/packages/components/src/components/popup/popup-overlay.jsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
-import Button from '../button/button.jsx';
 import Text from '../text/text';
+import Button from '../button/button';
 
 const PopupOverlay = ({ title, descriptions, overlay_ref, toggleOverlay, done_text }) =>
     createPortal(
diff --git a/packages/components/src/components/send-email-template/send-email-template.jsx b/packages/components/src/components/send-email-template/send-email-template.jsx
index 93abd9b252e6..cdc125eb73b4 100644
--- a/packages/components/src/components/send-email-template/send-email-template.jsx
+++ b/packages/components/src/components/send-email-template/send-email-template.jsx
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { PlatformContext } from '@deriv/shared';
-import Button from '../button/button.jsx';
 import Icon from '../icon/icon';
+import Button from '../button/button';
 import Text from '../text';
 
 const SendEmailTemplate = ({
diff --git a/packages/components/src/components/tick-picker/tick-picker.jsx b/packages/components/src/components/tick-picker/tick-picker.jsx
index fc584580b95e..45688dad278a 100644
--- a/packages/components/src/components/tick-picker/tick-picker.jsx
+++ b/packages/components/src/components/tick-picker/tick-picker.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import throttle from 'lodash.throttle';
 import { useSwipeable } from 'react-swipeable';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import Icon from '../icon';
 import Text from '../text';