diff --git a/frontend/src/Components/Link/Button.js b/frontend/src/Components/Link/Button.js
deleted file mode 100644
index cbe4691d4..000000000
--- a/frontend/src/Components/Link/Button.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { align, kinds, sizes } from 'Helpers/Props';
-import Link from './Link';
-import styles from './Button.css';
-
-class Button extends Component {
-
- //
- // Render
-
- render() {
- const {
- className,
- buttonGroupPosition,
- kind,
- size,
- children,
- ...otherProps
- } = this.props;
-
- return (
-
- {children}
-
- );
- }
-
-}
-
-Button.propTypes = {
- className: PropTypes.string.isRequired,
- buttonGroupPosition: PropTypes.oneOf(align.all),
- kind: PropTypes.oneOf(kinds.all),
- size: PropTypes.oneOf(sizes.all),
- children: PropTypes.node
-};
-
-Button.defaultProps = {
- className: styles.button,
- kind: kinds.DEFAULT,
- size: sizes.MEDIUM
-};
-
-export default Button;
diff --git a/frontend/src/Components/Link/Button.tsx b/frontend/src/Components/Link/Button.tsx
new file mode 100644
index 000000000..cf2293f59
--- /dev/null
+++ b/frontend/src/Components/Link/Button.tsx
@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import React from 'react';
+import { align, kinds, sizes } from 'Helpers/Props';
+import { Kind } from 'Helpers/Props/kinds';
+import { Size } from 'Helpers/Props/sizes';
+import Link, { LinkProps } from './Link';
+import styles from './Button.css';
+
+export interface ButtonProps extends Omit {
+ buttonGroupPosition?: Extract<
+ (typeof align.all)[number],
+ keyof typeof styles
+ >;
+ kind?: Extract;
+ size?: Extract;
+ children: Required;
+}
+
+export default function Button({
+ className = styles.button,
+ buttonGroupPosition,
+ kind = kinds.DEFAULT,
+ size = sizes.MEDIUM,
+ ...otherProps
+}: ButtonProps) {
+ return (
+
+ );
+}
diff --git a/frontend/src/Helpers/Props/align.js b/frontend/src/Helpers/Props/align.ts
similarity index 100%
rename from frontend/src/Helpers/Props/align.js
rename to frontend/src/Helpers/Props/align.ts
diff --git a/frontend/src/Helpers/Props/kinds.js b/frontend/src/Helpers/Props/kinds.ts
similarity index 72%
rename from frontend/src/Helpers/Props/kinds.js
rename to frontend/src/Helpers/Props/kinds.ts
index b0f5ac87f..7ce606716 100644
--- a/frontend/src/Helpers/Props/kinds.js
+++ b/frontend/src/Helpers/Props/kinds.ts
@@ -7,7 +7,6 @@ export const PRIMARY = 'primary';
export const PURPLE = 'purple';
export const SUCCESS = 'success';
export const WARNING = 'warning';
-export const QUEUE = 'queue';
export const all = [
DANGER,
@@ -19,5 +18,15 @@ export const all = [
PURPLE,
SUCCESS,
WARNING,
- QUEUE
-];
+] as const;
+
+export type Kind =
+ | 'danger'
+ | 'default'
+ | 'disabled'
+ | 'info'
+ | 'inverse'
+ | 'primary'
+ | 'purple'
+ | 'success'
+ | 'warning';
diff --git a/frontend/src/Helpers/Props/sizes.js b/frontend/src/Helpers/Props/sizes.ts
similarity index 71%
rename from frontend/src/Helpers/Props/sizes.js
rename to frontend/src/Helpers/Props/sizes.ts
index d7f85df5e..ca7a50fbf 100644
--- a/frontend/src/Helpers/Props/sizes.js
+++ b/frontend/src/Helpers/Props/sizes.ts
@@ -4,4 +4,6 @@ export const MEDIUM = 'medium';
export const LARGE = 'large';
export const EXTRA_LARGE = 'extraLarge';
-export const all = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE];
+export const all = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE] as const;
+
+export type Size = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';