diff --git a/app/scripts/modules/core/src/application/config/DeleteApplicationSection.tsx b/app/scripts/modules/core/src/application/config/DeleteApplicationSection.tsx
new file mode 100644
index 00000000000..4bd0fa84c6e
--- /dev/null
+++ b/app/scripts/modules/core/src/application/config/DeleteApplicationSection.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { Application, ApplicationWriter } from 'core/application';
+import { ReactInjector } from 'core/reactShims';
+import { FirewallLabel } from 'core/securityGroup/label';
+
+export interface IDeleteApplicationSection {
+  application: Application;
+}
+
+export function DeleteApplicationSection(props: IDeleteApplicationSection) {
+  const { application } = props;
+  const deleteApplication = (): void => {
+    const taskMonitor = {
+      application,
+      title: `Deleting ${application.name}`,
+      hasKatoTask: false,
+      onTaskComplete: () => {
+        ReactInjector.$state.go('home.infrastructure');
+      },
+    };
+
+    ReactInjector.confirmationModalService.confirm({
+      header: `Really delete ${application.name} ?`,
+      buttonText: `Delete ${application.name}`,
+      provider: 'aws',
+      taskMonitorConfig: taskMonitor,
+      submitMethod: () => ApplicationWriter.deleteApplication(application.attributes),
+    });
+  };
+
+  if (application.notFound) {
+    return (
+      <>
+        <p>Application not found.</p>
+      </>
+    );
+  } else {
+    return Boolean(application.serverGroups.data.length) ? (
+      <>
+        <p>You cannot delete this application because it has server groups.</p>
+      </>
+    ) : (
+      <>
+        <p>
+          Deleting the application only removes the associated metadata around the application. It will{' '}
+          <strong>not</strong> delete any <FirewallLabel label="firewalls" />, load balancers, or pipeline
+          configurations you may have created.
+        </p>
+        <button className="btn btn-link clickable" onClick={deleteApplication}>
+          <span>
+            <span className="glyphicon glyphicon-trash" /> Delete Application
+          </span>
+        </button>
+      </>
+    );
+  }
+}
diff --git a/app/scripts/modules/core/src/application/config/applicationConfig.controller.js b/app/scripts/modules/core/src/application/config/applicationConfig.controller.js
index 23a88d926e1..ce040d5ddfa 100644
--- a/app/scripts/modules/core/src/application/config/applicationConfig.controller.js
+++ b/app/scripts/modules/core/src/application/config/applicationConfig.controller.js
@@ -6,6 +6,7 @@ import { TRAFFIC_GUARD_CONFIG_COMPONENT } from './trafficGuard/trafficGuardConfi
 import { SETTINGS } from 'core/config/settings';
 import { ApplicationWriter } from 'core/application/service/ApplicationWriter';
 import { ManagedReader } from 'core/managed';
+import { DELETE_APPLICATION_SECTION } from './deleteApplicationSection.module';
 
 const angular = require('angular');
 
@@ -14,8 +15,8 @@ module.exports = angular
     require('@uirouter/angularjs').default,
     require('./applicationAttributes.directive').name,
     require('./applicationNotifications.directive').name,
-    require('./deleteApplicationSection.directive').name,
     require('./applicationSnapshotSection.component').name,
+    DELETE_APPLICATION_SECTION,
     APPLICATION_DATA_SOURCE_EDITOR,
     CHAOS_MONKEY_CONFIG_COMPONENT,
     TRAFFIC_GUARD_CONFIG_COMPONENT,
diff --git a/app/scripts/modules/core/src/application/config/deleteApplicationSection.directive.html b/app/scripts/modules/core/src/application/config/deleteApplicationSection.directive.html
deleted file mode 100644
index e678281636e..00000000000
--- a/app/scripts/modules/core/src/application/config/deleteApplicationSection.directive.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<p ng-if="!vm.hasServerGroups">
-  Deleting the application only removes the associated metadata around the application. It will
-  <strong>not</strong> delete any <firewall-label label="firewalls"></firewall-label>, load balancers, or pipeline
-  configurations you may have created.
-</p>
-
-<p ng-if="vm.hasServerGroups">
-  You cannot delete this application because it has server groups.
-</p>
-<button class="btn btn-link" ng-click="vm.deleteApplication()" ng-if="!vm.hasServerGroups">
-  <span class="glyphicon glyphicon-trash"></span>
-  Delete Application
-</button>
diff --git a/app/scripts/modules/core/src/application/config/deleteApplicationSection.directive.js b/app/scripts/modules/core/src/application/config/deleteApplicationSection.directive.js
deleted file mode 100644
index bbfd95bef58..00000000000
--- a/app/scripts/modules/core/src/application/config/deleteApplicationSection.directive.js
+++ /dev/null
@@ -1,65 +0,0 @@
-'use strict';
-
-const angular = require('angular');
-
-import { ApplicationWriter } from 'core/application/service/ApplicationWriter';
-import { CONFIRMATION_MODAL_SERVICE } from 'core/confirmationModal/confirmationModal.service';
-import { OVERRIDE_REGISTRY } from 'core/overrideRegistry/override.registry';
-
-module.exports = angular
-  .module('spinnaker.core.application.config.delete.directive', [
-    require('@uirouter/angularjs').default,
-    CONFIRMATION_MODAL_SERVICE,
-    OVERRIDE_REGISTRY,
-  ])
-  .directive('deleteApplicationSection', [
-    'overrideRegistry',
-    function(overrideRegistry) {
-      return {
-        restrict: 'E',
-        templateUrl: overrideRegistry.getTemplate(
-          'deleteApplicationSectionDirective',
-          require('./deleteApplicationSection.directive.html'),
-        ),
-        scope: {},
-        bindToController: {
-          application: '=',
-        },
-        controllerAs: 'vm',
-        controller: 'DeleteApplicationSectionCtrl',
-      };
-    },
-  ])
-  .controller('DeleteApplicationSectionCtrl', [
-    '$state',
-    'confirmationModalService',
-    function($state, confirmationModalService) {
-      if (this.application.notFound) {
-        return;
-      }
-
-      this.serverGroupCount = this.application.serverGroups.data.length;
-      this.hasServerGroups = Boolean(this.serverGroupCount);
-
-      this.deleteApplication = () => {
-        var submitMethod = () => ApplicationWriter.deleteApplication(this.application.attributes);
-
-        var taskMonitor = {
-          application: this.application,
-          title: 'Deleting ' + this.application.name,
-          hasKatoTask: false,
-          onTaskComplete: () => {
-            $state.go('home.infrastructure');
-          },
-        };
-
-        confirmationModalService.confirm({
-          header: 'Really delete ' + this.application.name + '?',
-          buttonText: 'Delete ' + this.application.name,
-          provider: 'aws',
-          taskMonitorConfig: taskMonitor,
-          submitMethod: submitMethod,
-        });
-      };
-    },
-  ]);
diff --git a/app/scripts/modules/core/src/application/config/deleteApplicationSection.module.ts b/app/scripts/modules/core/src/application/config/deleteApplicationSection.module.ts
new file mode 100644
index 00000000000..57383022149
--- /dev/null
+++ b/app/scripts/modules/core/src/application/config/deleteApplicationSection.module.ts
@@ -0,0 +1,8 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+import { DeleteApplicationSection } from './DeleteApplicationSection';
+export const DELETE_APPLICATION_SECTION = 'spinnaker.core.application.config.delete.directive';
+module(DELETE_APPLICATION_SECTION, []).component(
+  'deleteApplicationSection',
+  react2angular(DeleteApplicationSection, ['application']),
+);
diff --git a/app/scripts/modules/core/src/securityGroup/label/FirewallLabel.tsx b/app/scripts/modules/core/src/securityGroup/label/FirewallLabel.tsx
new file mode 100644
index 00000000000..283c9fc673b
--- /dev/null
+++ b/app/scripts/modules/core/src/securityGroup/label/FirewallLabel.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { FirewallLabels } from './FirewallLabels';
+
+export interface IFirewallLabel {
+  label: string;
+}
+
+export function FirewallLabel(props: IFirewallLabel) {
+  return <span>{FirewallLabels.get(props.label)}</span>;
+}
diff --git a/app/scripts/modules/core/src/securityGroup/label/index.ts b/app/scripts/modules/core/src/securityGroup/label/index.ts
index 4aad9dbf3d0..b9e6297238e 100644
--- a/app/scripts/modules/core/src/securityGroup/label/index.ts
+++ b/app/scripts/modules/core/src/securityGroup/label/index.ts
@@ -1 +1,2 @@
+export * from './FirewallLabel';
 export * from './FirewallLabels';