diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
index 146d22e5702e..8f35ef234200 100644
--- a/packages/components/src/components/button/button.tsx
+++ b/packages/components/src/components/button/button.tsx
@@ -4,7 +4,7 @@ import ButtonLoading from './button_loading';
 import Icon from '../icon';
 import Text from '../text';
 
-type TButtonProps = React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+export type TButtonProps = React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
     alternate: boolean;
     blue: boolean;
     classNameSpan: string;
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
deleted file mode 100644
index 98eb43cdddb5..000000000000
--- a/packages/components/src/components/form-cancel-button/form-cancel-button.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Button from '../button/button';
-
-const FormCancelButton = ({ className, is_center, is_disabled, is_absolute, label, onCancel, ...props }) => {
-    return (
-        <div
-            className={classNames('dc-form-cancel-button', className, {
-                'dc-form-cancel-button--absolute': is_absolute,
-                'dc-form-cancel-button--center': !!is_center,
-                'dc-form-cancel-button--relative': !is_absolute,
-            })}
-        >
-            <Button has_effect onClick={onCancel} text={label} type='button' tertiary large {...props} />
-        </div>
-    );
-};
-
-FormCancelButton.defaultProps = {
-    className: undefined,
-    is_disabled: false,
-    is_center: false,
-    is_absolute: false,
-};
-
-FormCancelButton.propTypes = {
-    className: PropTypes.string,
-    is_absolute: PropTypes.bool,
-    is_center: PropTypes.bool,
-    is_disabled: PropTypes.bool,
-    label: PropTypes.string,
-    onCancel: PropTypes.func,
-};
-
-export default FormCancelButton;
diff --git a/packages/components/src/components/form-cancel-button/form-cancel-button.tsx b/packages/components/src/components/form-cancel-button/form-cancel-button.tsx
new file mode 100644
index 000000000000..688139873647
--- /dev/null
+++ b/packages/components/src/components/form-cancel-button/form-cancel-button.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+import Button, { TButtonProps } from '../button/button';
+
+type TFormCancelButton = Partial<TButtonProps> & {
+    className?: string;
+    is_absolute?: boolean;
+    is_center?: boolean;
+    is_disabled?: boolean;
+    label: string;
+    onCancel: () => void;
+};
+
+const FormCancelButton = ({
+    className,
+    is_center = false,
+    is_absolute = false,
+    label,
+    onCancel,
+    ...props
+}: TFormCancelButton) => {
+    return (
+        <div
+            className={classNames('dc-form-cancel-button', className, {
+                'dc-form-cancel-button--absolute': is_absolute,
+                'dc-form-cancel-button--center': is_center,
+                'dc-form-cancel-button--relative': !is_absolute,
+            })}
+        >
+            <Button has_effect onClick={onCancel} text={label} type='button' tertiary large {...props} />
+        </div>
+    );
+};
+
+export default FormCancelButton;
diff --git a/packages/components/src/components/form-cancel-button/index.js b/packages/components/src/components/form-cancel-button/index.ts
similarity index 55%
rename from packages/components/src/components/form-cancel-button/index.js
rename to packages/components/src/components/form-cancel-button/index.ts
index c213ce6120c1..cc895bae947c 100644
--- a/packages/components/src/components/form-cancel-button/index.js
+++ b/packages/components/src/components/form-cancel-button/index.ts
@@ -1,4 +1,4 @@
-import FormCancelButton from './form-cancel-button.jsx';
+import FormCancelButton from './form-cancel-button';
 import './form-cancel-button.scss';
 
 export default FormCancelButton;