diff --git a/superset-frontend/src/dashboard/components/DeleteComponentButton.jsx b/superset-frontend/src/dashboard/components/DeleteComponentButton.tsx
similarity index 65%
rename from superset-frontend/src/dashboard/components/DeleteComponentButton.jsx
rename to superset-frontend/src/dashboard/components/DeleteComponentButton.tsx
index d3936f3ed647d..a030e41802fde 100644
--- a/superset-frontend/src/dashboard/components/DeleteComponentButton.jsx
+++ b/superset-frontend/src/dashboard/components/DeleteComponentButton.tsx
@@ -16,25 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { MouseEventHandler } from 'react';
 import Icons from 'src/components/Icons';
 import IconButton from './IconButton';
 
-const propTypes = {
-  onDelete: PropTypes.func.isRequired,
+type DeleteComponentButtonProps = {
+  onDelete: MouseEventHandler<HTMLDivElement>;
 };
 
-const defaultProps = {};
+const DeleteComponentButton: React.FC<DeleteComponentButtonProps> = ({
+  onDelete,
+}) => <IconButton onClick={onDelete} icon={<Icons.Trash iconSize="xl" />} />;
 
-export default class DeleteComponentButton extends React.PureComponent {
-  render() {
-    const { onDelete } = this.props;
-    return (
-      <IconButton onClick={onDelete} icon={<Icons.Trash iconSize="xl" />} />
-    );
-  }
-}
-
-DeleteComponentButton.propTypes = propTypes;
-DeleteComponentButton.defaultProps = defaultProps;
+export default DeleteComponentButton;