diff --git a/packages/react-components/src/components/Button/Button.module.scss b/packages/react-components/src/components/Button/Button.module.scss
index f380e8471..481786be5 100644
--- a/packages/react-components/src/components/Button/Button.module.scss
+++ b/packages/react-components/src/components/Button/Button.module.scss
@@ -131,6 +131,31 @@ $base-class: 'btn';
     }
   }
 
+  &--destructive-outline {
+    border-color: var(--action-negative-default);
+    background-color: var(--surface-accent-emphasis-min-negative);
+    color: var(--action-negative-default);
+
+    &:hover {
+      border-color: var(--action-negative-hover);
+      background-color: var(--surface-accent-emphasis-low-negative);
+      color: var(--action-negative-hover);
+    }
+
+    &:active,
+    &:focus {
+      border-color: var(--action-negative-active);
+      background-color: var(--surface-accent-emphasis-low-negative);
+      color: var(--action-negative-active);
+    }
+
+    &[aria-disabled='true'] {
+      border-color: var(--action-negative-disabled);
+      background-color: var(--surface-primary-default);
+      color: var(--action-negative-disabled);
+    }
+  }
+
   &--compact {
     padding: 6px 16px;
     min-width: 32px;
diff --git a/packages/react-components/src/components/Button/Button.stories.tsx b/packages/react-components/src/components/Button/Button.stories.tsx
index 9ab6dba63..437864fe4 100644
--- a/packages/react-components/src/components/Button/Button.stories.tsx
+++ b/packages/react-components/src/components/Button/Button.stories.tsx
@@ -216,6 +216,53 @@ export const KindsAndStates = (): React.ReactElement => (
         icon={<Icon source={MaterialIcons.AddCircle} />}
       />
     </StoryDescriptor>
+    <StoryDescriptor title="Destructive Outline">
+      <Button kind="destructive-outline">Destructive Outline</Button>
+      <Button disabled kind="destructive-outline">
+        Disabled
+      </Button>
+      <Button loading kind="destructive-outline">
+        Disabled
+      </Button>
+    </StoryDescriptor>
+    <StoryDescriptor title="Destructive Outline with icon">
+      <Button
+        kind="destructive-outline"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      >
+        Destructive Outline
+      </Button>
+      <Button
+        disabled
+        kind="destructive-outline"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      >
+        Disabled
+      </Button>
+      <Button
+        loading
+        kind="destructive-outline"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      >
+        Disabled
+      </Button>
+    </StoryDescriptor>
+    <StoryDescriptor title="Destructive Outline with icon only">
+      <Button
+        kind="destructive-outline"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      />
+      <Button
+        disabled
+        kind="destructive-outline"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      />
+      <Button
+        loading
+        kind="destructive-outline"
+        icon={<Icon source={MaterialIcons.AddCircle} />}
+      />
+    </StoryDescriptor>
     <StoryDescriptor title="Text">
       <Button kind="text">Text</Button>
       <Button disabled kind="text">
diff --git a/packages/react-components/src/components/Button/Button.tsx b/packages/react-components/src/components/Button/Button.tsx
index 9eb632131..69575dc3b 100644
--- a/packages/react-components/src/components/Button/Button.tsx
+++ b/packages/react-components/src/components/Button/Button.tsx
@@ -13,6 +13,7 @@ export type ButtonKind =
   | 'primary'
   | 'secondary'
   | 'destructive'
+  | 'destructive-outline'
   | 'text'
   | 'link'
   | 'link-light'