diff --git a/dist/Button/Button.d.ts b/dist/Button/Button.d.ts
index 7ef0fe38..13e3b503 100644
--- a/dist/Button/Button.d.ts
+++ b/dist/Button/Button.d.ts
@@ -1,66 +1,93 @@
+import React from 'react';
+declare type Variant = 'primary' | 'secondary' | 'warning';
+declare const ButtonLabel: {
+    (props: {
+        /**
+         * Child nodes to be rendered as the label for the button. Maps to
+         * the button element’s innerHTML.
+         */
+        children: React.ReactNode;
+        /**
+         * Whether the label should be purely textual, e.g. for use in a
+         * paragraph of text.
+         */
+        inline?: boolean | undefined;
+        /**
+         * Visual variations of the button.
+         */
+        variant?: "primary" | "secondary" | "warning" | undefined;
+    }): JSX.Element;
+    defaultProps: {
+        inline: boolean;
+        variant: string;
+    };
+};
+declare type AriaRole = ('checkbox' | 'link' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'switch' | 'tab');
+declare const Button: (props: {
+    /**
+     * Forwarded to the button element as `aria-checked`. Only use when
+     * `props.role` is one of `checkbox`, `menuitemcheckbox`,
+     * `menuitemradiobutton`, `radiobutton`, or `switch`.
+     */
+    ariaChecked?: boolean | undefined;
+    /**
+     * Forwarded to the button element as `aria-described-by`.
+     */
+    ariaDescribedBy?: string | undefined;
+    /**
+     * Child nodes to be rendered as the label for the button. Maps to
+     * the button element’s innerHTML.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the button is interactive. Forwarded to the button
+     * element.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Same visual state as `props.disabled`, but without affecting
+     * interactivity. Use this when you want to indicate that a form's
+     * contents are invalid, but still submissible.
+     */
+    inactive?: boolean | undefined;
+    /**
+     * Whether the button should be purely textual, e.g. for use in a
+     * paragraph of text.
+     */
+    inline?: boolean | undefined;
+    /**
+     * Visually replaces `props.children` with the Spinner component. Use
+     * when waiting for an action to complete in response to a user
+     * engaging the button.
+     */
+    loading?: boolean | undefined;
+    /**
+     * For binding Google AMP interactivity. See
+     * https://amp.dev/documentation/examples/components/amp-bind/
+     */
+    on?: string | undefined;
+    /**
+     * Function to run when the button is engaged. Forwarded to the button
+     * element.
+     */
+    onClick?: ((event: React.UIEvent<HTMLButtonElement, UIEvent>) => void) | undefined;
+    /**
+     * The WAI-ARIA element role. It is always preferable to use the
+     * approporiate HTML element over the role attribute, e.g.
+     * `<input type="checkbox" />` is preferred to `<Button role="checkbox" />`.
+     * Forwarded to the button element.
+     */
+    role?: "link" | "option" | "switch" | "checkbox" | "radio" | "menuitem" | "tab" | "menuitemcheckbox" | "menuitemradio" | undefined;
+    /**
+     * When value is 'submit', the button will submit a parent `<form>`
+     * element when engaged. Forwarded to the button element.
+     */
+    type?: "button" | "submit" | undefined;
+    /**
+     * Visual variations of the button. See `ButtonLabel.propTypes.variant`
+     */
+    variant?: "primary" | "secondary" | "warning" | undefined;
+}) => JSX.Element;
+export { ButtonLabel };
 export default Button;
-export function ButtonLabel({ children, inline, variant, }: {
-    children: any;
-    inline: any;
-    variant: any;
-}): JSX.Element;
-export namespace ButtonLabel {
-    namespace propTypes {
-        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const inline: PropTypes.Validator<boolean>;
-        const variant: PropTypes.Validator<string>;
-    }
-    namespace defaultProps {
-        const inline_1: boolean;
-        export { inline_1 as inline };
-        const variant_1: string;
-        export { variant_1 as variant };
-    }
-}
-declare function Button({ ariaChecked, children, ariaDescribedBy, disabled, inline, loading, on, onClick, role, type, variant, }: {
-    ariaChecked: any;
-    children: any;
-    ariaDescribedBy: any;
-    disabled: any;
-    inline: any;
-    loading: any;
-    on: any;
-    onClick: any;
-    role: any;
-    type: any;
-    variant: any;
-}): JSX.Element;
-declare namespace Button {
-    export namespace propTypes_1 {
-        export const ariaChecked: PropTypes.Requireable<boolean>;
-        export const ariaDescribedBy: PropTypes.Requireable<string>;
-        const children_1: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        export { children_1 as children };
-        export const disabled: PropTypes.Validator<boolean>;
-        const inline_2: PropTypes.Validator<boolean>;
-        export { inline_2 as inline };
-        export const loading: PropTypes.Validator<boolean>;
-        export const on: PropTypes.Requireable<string>;
-        export const onClick: PropTypes.Validator<(...args: any[]) => any>;
-        export const role: PropTypes.Requireable<string>;
-        export const type: PropTypes.Validator<string>;
-        const variant_2: PropTypes.Requireable<string>;
-        export { variant_2 as variant };
-    }
-    export { propTypes_1 as propTypes };
-    export namespace defaultProps_1 {
-        const disabled_1: boolean;
-        export { disabled_1 as disabled };
-        const inline_3: boolean;
-        export { inline_3 as inline };
-        const loading_1: boolean;
-        export { loading_1 as loading };
-        export function onClick_1(): void;
-        export { onClick_1 as onClick };
-        const type_1: string;
-        export { type_1 as type };
-    }
-    export { defaultProps_1 as defaultProps };
-}
-import PropTypes from "prop-types";
 //# sourceMappingURL=Button.d.ts.map
\ No newline at end of file
diff --git a/dist/Button/Button.d.ts.map b/dist/Button/Button.d.ts.map
index f862c8a7..92662876 100644
--- a/dist/Button/Button.d.ts.map
+++ b/dist/Button/Button.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.jsx"],"names":[],"mappings":";AAQA;;;;gBAIkG;;;;;;;;;;;;;;AA4BlG;;;;;;;;;;;;gBAkCC;;;;;;;;;;;;;;;;;;;;;;;;;;QA4ES,kCAAQ"}
\ No newline at end of file
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;AAElD,QAAA,MAAM,WAAW;;QAChB;;;WAGG;kBACO,MAAM,SAAS;QACzB;;;WAGG;;QAEH;;WAEG;;;;;;;CAYH,CAAC;AAOF,aAAK,QAAQ,GAAG,CACf,UAAU,GACR,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,eAAe,GACf,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,KAAK,CACP,CAAA;AAED,QAAA,MAAM,MAAM;IACX;;;;OAIG;;IAEH;;OAEG;;IAEH;;;OAGG;cACO,MAAM,SAAS;IACzB;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;OAEG;;iBAyCH,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,eAAe,MAAM,CAAC"}
\ No newline at end of file
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 37e98c54..7f0b4e8e 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -11,10 +11,14 @@
 	cursor: pointer;
 	position: relative;
 
-	&:disabled {
+	&:disabled,
+	&.inactive {
 		@include states.fade-on-hover;
 
 		opacity: 0.5;
+	}
+
+	&:disabled {
 		cursor: default;
 	}
 
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.tsx
similarity index 53%
rename from src/components/Button/Button.jsx
rename to src/components/Button/Button.tsx
index 962172d4..9fb68f90 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.tsx
@@ -1,36 +1,37 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames/bind';
 import styles from './Button.scss';
 import Spinner from '../Spinner/Spinner';
 
 const cx = classnames.bind( styles );
 
-const ButtonLabel = ( {
-	children,
-	inline,
-	variant,
-} ) => <span className={cx( 'label', `variant-${variant}`, { block: !inline } )}>{children}</span>;
+type Variant = 'primary' | 'secondary' | 'warning'
 
-ButtonLabel.propTypes = {
+const ButtonLabel = ( props: {
 	/**
 	 * Child nodes to be rendered as the label for the button. Maps to
 	 * the button element’s innerHTML.
 	 */
-	children: PropTypes.node.isRequired,
+	children: React.ReactNode,
 	/**
 	 * Whether the label should be purely textual, e.g. for use in a
 	 * paragraph of text.
 	 */
-	inline: PropTypes.bool.isRequired,
+	inline?: boolean,
 	/**
 	 * Visual variations of the button.
 	 */
-	variant: PropTypes.oneOf( [
-		'primary',
-		'secondary',
-		'warning',
-	] ).isRequired,
+	variant?: Variant,
+} ) => {
+	const {
+		children,
+		inline = false,
+		variant = 'primary',
+	} = props;
+
+	return (
+		<span className={cx( 'label', `variant-${variant}`, { block: !inline } )}>{children}</span>
+	);
 };
 
 ButtonLabel.defaultProps = {
@@ -38,118 +39,121 @@ ButtonLabel.defaultProps = {
 	variant: 'primary',
 };
 
-const Button = ( {
-	ariaChecked,
-	children,
-	ariaDescribedBy,
-	disabled,
-	inline,
-	loading,
-	on,
-	onClick,
-	role,
-	type,
-	variant,
-} ) => (
-	<button
-		aria-checked={ariaChecked}
-		aria-describedby={ariaDescribedBy}
-		className={cx( 'button', { block: !inline } )}
-		disabled={disabled || loading}
-		on={on}
-		onClick={onClick}
-		role={role}
-		type={type}
-	>
-		<ButtonLabel variant={variant} inline={inline}>
-			{
-				loading && (
-					<div className={styles.spinner}>
-						<Spinner />
-					</div>
-				)
-			}
-			<span className={cx( 'label-text', { loading } )}>{children}</span>
-		</ButtonLabel>
-	</button>
-);
+type AriaRole = (
+	'checkbox'
+	| 'link'
+	| 'menuitem'
+	| 'menuitemcheckbox'
+	| 'menuitemradio'
+	| 'option'
+	| 'radio'
+	| 'switch'
+	| 'tab'
+)
 
-Button.propTypes = {
+const Button = ( props: {
 	/**
 	 * Forwarded to the button element as `aria-checked`. Only use when
 	 * `props.role` is one of `checkbox`, `menuitemcheckbox`,
 	 * `menuitemradiobutton`, `radiobutton`, or `switch`.
 	 */
-	ariaChecked: PropTypes.bool,
+	ariaChecked?: boolean,
 	/**
 	 * Forwarded to the button element as `aria-described-by`.
 	 */
-	ariaDescribedBy: PropTypes.string,
+	ariaDescribedBy?: string,
 	/**
 	 * Child nodes to be rendered as the label for the button. Maps to
 	 * the button element’s innerHTML.
 	 */
-	children: PropTypes.node.isRequired,
+	children: React.ReactNode,
 	/**
 	 * Whether the button is interactive. Forwarded to the button
 	 * element.
 	 */
-	disabled: PropTypes.bool.isRequired,
+	disabled?: boolean,
+	/**
+	 * Same visual state as `props.disabled`, but without affecting
+	 * interactivity. Use this when you want to indicate that a form's
+	 * contents are invalid, but still submissible.
+	 */
+	inactive?: boolean,
 	/**
 	 * Whether the button should be purely textual, e.g. for use in a
 	 * paragraph of text.
 	 */
-	inline: PropTypes.bool.isRequired,
+	inline?: boolean,
 	/**
 	 * Visually replaces `props.children` with the Spinner component. Use
 	 * when waiting for an action to complete in response to a user
 	 * engaging the button.
 	 */
-	loading: PropTypes.bool.isRequired,
+	loading?: boolean,
 	/**
 	 * For binding Google AMP interactivity. See
 	 * https://amp.dev/documentation/examples/components/amp-bind/
 	 */
-	on: PropTypes.string,
+	on?: string,
 	/**
 	 * Function to run when the button is engaged. Forwarded to the button
 	 * element.
 	 */
-	onClick: PropTypes.func.isRequired,
+	onClick?: React.UIEventHandler<HTMLButtonElement>, // empty when type="submit"
 	/**
 	 * The WAI-ARIA element role. It is always preferable to use the
 	 * approporiate HTML element over the role attribute, e.g.
 	 * `<input type="checkbox" />` is preferred to `<Button role="checkbox" />`.
 	 * Forwarded to the button element.
 	 */
-	role: PropTypes.oneOf( [
-		'checkbox',
-		'link',
-		'menuitem',
-		'menuitemcheckbox',
-		'menuitemradio',
-		'option',
-		'radio',
-		'switch',
-		'tab',
-	] ),
+	role?: AriaRole,
 	/**
 	 * When value is 'submit', the button will submit a parent `<form>`
 	 * element when engaged. Forwarded to the button element.
 	 */
-	type: PropTypes.oneOf( [ 'submit', 'button' ] ).isRequired,
+	type?: 'submit' | 'button',
 	/**
 	 * Visual variations of the button. See `ButtonLabel.propTypes.variant`
 	 */
-	variant: PropTypes.string,
-};
+	variant?: Variant
+} ) => {
+	const {
+		ariaChecked,
+		ariaDescribedBy,
+		children,
+		disabled = false,
+		inactive = false,
+		inline = false,
+		loading = false,
+		on,
+		onClick,
+		role,
+		type = 'button',
+		variant = 'primary',
+	} = props;
 
-Button.defaultProps = {
-	disabled: false,
-	inline: false,
-	loading: false,
-	onClick: () => {},
-	type: 'button',
+	return (
+		<button
+			aria-checked={ariaChecked}
+			aria-describedby={ariaDescribedBy}
+			className={cx( 'button', { block: !inline, inactive } )}
+			disabled={disabled || loading}
+			on={on}
+			onClick={onClick}
+			role={role}
+			type={type}
+		>
+			<ButtonLabel variant={variant} inline={inline}>
+				{
+					loading && (
+						<div className={styles.spinner}>
+							<Spinner />
+						</div>
+					)
+				}
+				<span className={cx( 'label-text', { loading } )}>{children}</span>
+			</ButtonLabel>
+		</button>
+	);
 };
 
 export { ButtonLabel };
diff --git a/src/components/Button/buttonElementWithAmp.d.ts b/src/components/Button/buttonElementWithAmp.d.ts
new file mode 100644
index 00000000..4084a5bf
--- /dev/null
+++ b/src/components/Button/buttonElementWithAmp.d.ts
@@ -0,0 +1,9 @@
+import 'react';
+
+// Allow <button on="[amp code]"> attribute in TypeScript
+// https://www.credera.com/insights/typescript-adding-custom-type-definitions-for-existing-libraries
+declare module 'react' {
+	interface ButtonHTMLAttributes<T> {
+		on?: string;
+	}
+}