diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 38587ebc99..c9b029bcd8 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -3970,43 +3970,12 @@ button.module-conversation-details__action-button {
     flex-direction: row;
     justify-content: center;
 
-    &__button {
-      border: none;
-      border-radius: 4px;
+    .module-Button {
       min-width: 80px;
-      height: 36px;
-      padding: 0 14px;
-      text-align: center;
-
-      &:focus {
-        outline: none;
-
-        @include keyboard-mode {
-          box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
-        }
-      }
-
-      @include font-body-1-bold;
-
-      @include light-theme {
-        background-color: $color-gray-05;
-      }
-
-      @include dark-theme {
-        background-color: $color-gray-75;
-      }
 
       &:not(:last-of-type) {
         margin-right: 8px;
       }
-
-      &--deny {
-        color: $color-accent-red;
-      }
-
-      &--accept {
-        color: $color-accent-blue;
-      }
     }
   }
 }
diff --git a/stylesheets/components/Button.scss b/stylesheets/components/Button.scss
index b4919bdb7b..53d7600142 100644
--- a/stylesheets/components/Button.scss
+++ b/stylesheets/components/Button.scss
@@ -71,6 +71,14 @@
         background: fade-out($background-color, 0.6);
       }
 
+      &--primary {
+        color: $ultramarine-ui-light;
+      }
+
+      &--destructive {
+        color: $color-accent-red;
+      }
+
       @include hover-and-active-states($background-color, $color-black);
     }
 
@@ -86,6 +94,14 @@
         background: fade-out($background-color, 0.6);
       }
 
+      &--primary {
+        color: $ultramarine-ui-dark;
+      }
+
+      &--destructive {
+        color: $color-accent-red;
+      }
+
       @include hover-and-active-states($background-color, $color-white);
     }
   }
diff --git a/ts/components/Button.stories.tsx b/ts/components/Button.stories.tsx
index b9efb228da..5d8c9a1e4c 100644
--- a/ts/components/Button.stories.tsx
+++ b/ts/components/Button.stories.tsx
@@ -11,49 +11,25 @@ const story = storiesOf('Components/Button', module);
 
 story.add('Kitchen sink', () => (
   <>
-    <p>
-      <Button onClick={action('onClick')} variant={ButtonVariant.Primary}>
-        Hello world
-      </Button>
-    </p>
-    <p>
-      <Button
-        onClick={action('onClick')}
-        variant={ButtonVariant.Primary}
-        disabled
-      >
-        Hello world
-      </Button>
-    </p>
-
-    <p>
-      <Button onClick={action('onClick')} variant={ButtonVariant.Secondary}>
-        Hello world
-      </Button>
-    </p>
-    <p>
-      <Button
-        onClick={action('onClick')}
-        variant={ButtonVariant.Secondary}
-        disabled
-      >
-        Hello world
-      </Button>
-    </p>
-
-    <p>
-      <Button onClick={action('onClick')} variant={ButtonVariant.Destructive}>
-        Hello world
-      </Button>
-    </p>
-    <p>
-      <Button
-        onClick={action('onClick')}
-        variant={ButtonVariant.Destructive}
-        disabled
-      >
-        Hello world
-      </Button>
-    </p>
+    {[
+      ButtonVariant.Primary,
+      ButtonVariant.Secondary,
+      ButtonVariant.SecondaryAffirmative,
+      ButtonVariant.SecondaryDestructive,
+      ButtonVariant.Destructive,
+    ].map(variant => (
+      <React.Fragment key={variant}>
+        <p>
+          <Button onClick={action('onClick')} variant={variant}>
+            Hello world
+          </Button>
+        </p>
+        <p>
+          <Button disabled onClick={action('onClick')} variant={variant}>
+            Hello world
+          </Button>
+        </p>
+      </React.Fragment>
+    ))}
   </>
 ));
diff --git a/ts/components/Button.tsx b/ts/components/Button.tsx
index 229886996d..c1715d1935 100644
--- a/ts/components/Button.tsx
+++ b/ts/components/Button.tsx
@@ -9,6 +9,8 @@ import { assert } from '../util/assert';
 export enum ButtonVariant {
   Primary,
   Secondary,
+  SecondaryAffirmative,
+  SecondaryDestructive,
   Destructive,
 }
 
@@ -29,6 +31,14 @@ type PropsType = {
 const VARIANT_CLASS_NAMES = new Map<ButtonVariant, string>([
   [ButtonVariant.Primary, 'module-Button--primary'],
   [ButtonVariant.Secondary, 'module-Button--secondary'],
+  [
+    ButtonVariant.SecondaryAffirmative,
+    'module-Button--secondary module-Button--secondary--affirmative',
+  ],
+  [
+    ButtonVariant.SecondaryDestructive,
+    'module-Button--secondary module-Button--secondary--destructive',
+  ],
   [ButtonVariant.Destructive, 'module-Button--destructive'],
 ]);
 
diff --git a/ts/components/conversation/MandatoryProfileSharingActions.tsx b/ts/components/conversation/MandatoryProfileSharingActions.tsx
index 60b548a71b..7c4ced7b07 100644
--- a/ts/components/conversation/MandatoryProfileSharingActions.tsx
+++ b/ts/components/conversation/MandatoryProfileSharingActions.tsx
@@ -1,9 +1,9 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import classNames from 'classnames';
 import { ContactName, PropsType as ContactNameProps } from './ContactName';
+import { Button, ButtonVariant } from '../Button';
 import {
   MessageRequestActionsConfirmation,
   MessageRequestState,
@@ -93,43 +93,28 @@ export const MandatoryProfileSharingActions = ({
           />
         </p>
         <div className="module-message-request-actions__buttons">
-          <button
-            type="button"
+          <Button
             onClick={() => {
               setMrState(MessageRequestState.blocking);
             }}
-            tabIndex={0}
-            className={classNames(
-              'module-message-request-actions__buttons__button',
-              'module-message-request-actions__buttons__button--deny'
-            )}
+            variant={ButtonVariant.SecondaryDestructive}
           >
             {i18n('MessageRequests--block')}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
             onClick={() => {
               setMrState(MessageRequestState.deleting);
             }}
-            tabIndex={0}
-            className={classNames(
-              'module-message-request-actions__buttons__button',
-              'module-message-request-actions__buttons__button--deny'
-            )}
+            variant={ButtonVariant.SecondaryDestructive}
           >
             {i18n('MessageRequests--delete')}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
             onClick={onAccept}
-            tabIndex={0}
-            className={classNames(
-              'module-message-request-actions__buttons__button',
-              'module-message-request-actions__buttons__button--accept'
-            )}
+            variant={ButtonVariant.SecondaryAffirmative}
           >
             {i18n('MessageRequests--continue')}
-          </button>
+          </Button>
         </div>
       </div>
     </>
diff --git a/ts/components/conversation/MessageRequestActions.tsx b/ts/components/conversation/MessageRequestActions.tsx
index 950b5df11a..1f1f92a1bb 100644
--- a/ts/components/conversation/MessageRequestActions.tsx
+++ b/ts/components/conversation/MessageRequestActions.tsx
@@ -1,9 +1,9 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import classNames from 'classnames';
 import { ContactName, PropsType as ContactNameProps } from './ContactName';
+import { Button, ButtonVariant } from '../Button';
 import {
   MessageRequestActionsConfirmation,
   MessageRequestState,
@@ -81,60 +81,40 @@ export const MessageRequestActions = ({
           />
         </p>
         <div className="module-message-request-actions__buttons">
-          <button
-            type="button"
+          <Button
             onClick={() => {
               setMrState(MessageRequestState.deleting);
             }}
-            tabIndex={0}
-            className={classNames(
-              'module-message-request-actions__buttons__button',
-              'module-message-request-actions__buttons__button--deny'
-            )}
+            variant={ButtonVariant.SecondaryDestructive}
           >
             {i18n('MessageRequests--delete')}
-          </button>
+          </Button>
           {isBlocked ? (
-            <button
-              type="button"
+            <Button
               onClick={() => {
                 setMrState(MessageRequestState.unblocking);
               }}
-              tabIndex={0}
-              className={classNames(
-                'module-message-request-actions__buttons__button',
-                'module-message-request-actions__buttons__button--accept'
-              )}
+              variant={ButtonVariant.SecondaryAffirmative}
             >
               {i18n('MessageRequests--unblock')}
-            </button>
+            </Button>
           ) : (
-            <button
-              type="button"
+            <Button
               onClick={() => {
                 setMrState(MessageRequestState.blocking);
               }}
-              tabIndex={0}
-              className={classNames(
-                'module-message-request-actions__buttons__button',
-                'module-message-request-actions__buttons__button--deny'
-              )}
+              variant={ButtonVariant.SecondaryDestructive}
             >
               {i18n('MessageRequests--block')}
-            </button>
+            </Button>
           )}
           {!isBlocked ? (
-            <button
-              type="button"
+            <Button
               onClick={onAccept}
-              tabIndex={0}
-              className={classNames(
-                'module-message-request-actions__buttons__button',
-                'module-message-request-actions__buttons__button--accept'
-              )}
+              variant={ButtonVariant.SecondaryAffirmative}
             >
               {i18n('MessageRequests--accept')}
-            </button>
+            </Button>
           ) : null}
         </div>
       </div>