From 3358cef433dfe4758fb36e54431c1e674311d0c8 Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Mon, 9 Dec 2019 18:03:30 -0500
Subject: [PATCH] [CORL-746] updated branding: buttons (#2748)

* new button component

* update specs

* fix up markers

* fix docz so it renders

* clean up buttons implementation

* update snaps

* clean up slack buttons

* update snaps
---
 .../client/admin/App/UserMenu/UserMenu.tsx    |   3 +-
 .../admin/components/ModerateCard/Markers.tsx |   9 +-
 .../UserHistoryDrawer/ModeratorNote.tsx       |  22 +-
 .../UserDrawerNotesContainer.tsx              |   4 +-
 .../UserHistoryDrawerContainer.tsx            |   6 +-
 .../components/UserRole/UserRoleChange.tsx    |   4 +-
 .../admin/components/UserStatus/BanModal.tsx  |   9 +-
 .../components/UserStatus/PremodModal.tsx     |   9 +-
 .../components/UserStatus/SuspendForm.tsx     |   9 +-
 .../components/UserStatus/SuspendModal.tsx    |   7 +-
 .../UserStatus/UserStatusChange.tsx           |   2 +-
 .../Community/InviteUsers/InviteUsers.tsx     |   4 +-
 .../Community/InviteUsers/InviteUsersForm.tsx |  10 +-
 .../client/admin/routes/Community/UserRow.tsx |   3 +-
 .../routes/Community/UserTableFilter.tsx      |   4 +-
 .../admin/routes/Configure/Configure.tsx      |   3 +-
 .../Configure/sections/Advanced/EmbedCode.tsx |   2 +-
 .../Configure/sections/Auth/OIDCConfig.tsx    |   2 -
 .../Configure/sections/Auth/RedirectField.tsx |   2 +-
 .../Configure/sections/Auth/SSOKeyField.tsx   |   2 -
 .../Configure/sections/Slack/SlackChannel.tsx |   2 -
 .../sections/Slack/SlackConfigContainer.tsx   |   7 +-
 .../ModerateSearchBar/ModerateAllOption.tsx   |   9 +-
 .../admin/routes/Moderate/Queue/Queue.tsx     |   6 +-
 .../Stories/StoryStatus/StoryStatusChange.tsx |   3 +-
 .../admin/routes/Stories/StoryTableFilter.tsx |   4 +-
 .../__snapshots__/community.spec.tsx.snap     |  64 +-
 .../__snapshots__/advanced.spec.tsx.snap      |  12 +-
 .../__snapshots__/auth.spec.tsx.snap          |  36 +-
 .../__snapshots__/general.spec.tsx.snap       |   6 +-
 .../__snapshots__/moderation.spec.tsx.snap    |   6 +-
 .../__snapshots__/organization.spec.tsx.snap  |   6 +-
 .../__snapshots__/wordList.spec.tsx.snap      |   6 +-
 .../__snapshots__/regularQueue.spec.tsx.snap  |  28 +-
 .../__snapshots__/rejectedQueue.spec.tsx.snap |  16 +-
 .../__snapshots__/singleComment.spec.tsx.snap |  12 +-
 .../__snapshots__/stories.spec.tsx.snap       |  28 +-
 .../framework/components/CopyButton.tsx       |   5 +-
 .../client/ui/components/v2/AppBar/AppBar.mdx |   2 -
 .../client/ui/components/v2/Button/Button.css | 698 +++++++++---------
 .../ui/components/v2/Button/Button.spec.tsx   |   2 +-
 .../client/ui/components/v2/Button/Button.tsx |  56 +-
 .../ui/components/v2/Button/ButtonIcon.css    |   6 -
 .../Button/__snapshots__/Button.spec.tsx.snap |  16 +-
 .../client/ui/components/v2/Modal/Modal.mdx   |   5 +-
 .../ui/components/v2/Popover/Popover.mdx      |   9 +-
 src/core/client/ui/theme/variables2.ts        |   2 +-
 47 files changed, 545 insertions(+), 623 deletions(-)

diff --git a/src/core/client/admin/App/UserMenu/UserMenu.tsx b/src/core/client/admin/App/UserMenu/UserMenu.tsx
index 3499b0b85..fd71feeee 100644
--- a/src/core/client/admin/App/UserMenu/UserMenu.tsx
+++ b/src/core/client/admin/App/UserMenu/UserMenu.tsx
@@ -60,9 +60,8 @@ const UserMenu: FunctionComponent<Props> = props => (
           className={styles.button}
           onClick={toggleVisibility}
           ref={ref}
-          variant="plain"
+          variant="text"
           uppercase={false}
-          size="small"
         >
           <ButtonIcon className={styles.icon} size="lg">
             account_circle
diff --git a/src/core/client/admin/components/ModerateCard/Markers.tsx b/src/core/client/admin/components/ModerateCard/Markers.tsx
index ba97b9668..6c5ea4502 100644
--- a/src/core/client/admin/components/ModerateCard/Markers.tsx
+++ b/src/core/client/admin/components/ModerateCard/Markers.tsx
@@ -28,16 +28,11 @@ const Markers: FunctionComponent<Props> = ({ children, details }) => {
         {children}
         {details && (
           <Button
-            size="small"
-            classes={{
-              variantDefault: styles.detailsButton,
-              colorDefault: styles.detailsButtonColorRegular,
-            }}
-            variant="ghost"
+            variant="text"
+            color="mono"
             onClick={toggleDetails}
             aria-controls={uuid}
             aria-expanded={showDetails}
-            color="mono"
           >
             <Localized id="moderate-markers-details">
               <span className={styles.detailsText}>DETAILS</span>
diff --git a/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.tsx b/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.tsx
index 1652176db..24748f131 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 
-import { Button, Flex, Icon, Timestamp } from "coral-ui/components/v2";
+import { Button, ButtonIcon, Flex, Timestamp } from "coral-ui/components/v2";
 
 import styles from "./ModeratorNote.css";
 
@@ -41,17 +41,15 @@ const ModeratorNote: FunctionComponent<Props> = ({
           )}
         </Flex>
         {onDelete && (
-          <Localized id="moderatorNote-delete">
-            <Button
-              size="small"
-              uppercase={false}
-              variant="plain"
-              onClick={deleteNote}
-            >
-              <Icon>delete</Icon>
-              <span>Delete</span>
-            </Button>
-          </Localized>
+          <Button
+            uppercase={false}
+            iconLeft
+            variant="flat"
+            onClick={deleteNote}
+          >
+            <ButtonIcon>delete</ButtonIcon>
+            <Localized id="moderatorNote-delete">Delete</Localized>
+          </Button>
         )}
       </Flex>
     </div>
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.tsx
index 46537c9cf..190c12fcc 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.tsx
@@ -78,9 +78,7 @@ const UserDrawerNotesContainer: FunctionComponent<Props> = ({
             </Localized>
             <Flex justifyContent="flex-end">
               <Localized id="moderate-user-drawer-notes-button">
-                <Button size="medium" type="submit">
-                  Add note
-                </Button>
+                <Button type="submit">Add note</Button>
               </Localized>
             </Flex>
           </form>
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
index c6ba1dcf2..3822ca586 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
@@ -43,7 +43,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
 
   return (
     <>
-      <Button variant="plain" className={styles.close} onClick={onClose}>
+      <Button variant="text" className={styles.close} onClick={onClose}>
         <Icon size="md">close</Icon>
       </Button>
       <HorizontalGutter spacing={4}>
@@ -84,7 +84,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
                 </Icon>
               </Localized>
               <span className={styles.userDetailValue}>{user.email}</span>
-              <CopyButton text={user.email!} size="small" />
+              <CopyButton text={user.email!} />
             </Flex>
             <Flex alignItems="center" spacing={2}>
               <Localized
@@ -113,7 +113,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
                 </Icon>
               </Localized>
               <span className={styles.userDetailValue}>{user.id}</span>
-              <CopyButton text={user.id} size="small" />
+              <CopyButton text={user.id} />
             </Flex>
           </HorizontalGutter>
         </HorizontalGutter>
diff --git a/src/core/client/admin/components/UserRole/UserRoleChange.tsx b/src/core/client/admin/components/UserRole/UserRoleChange.tsx
index ac982c772..a9851a404 100644
--- a/src/core/client/admin/components/UserRole/UserRoleChange.tsx
+++ b/src/core/client/admin/components/UserRole/UserRoleChange.tsx
@@ -61,10 +61,10 @@ const UserRoleChange: FunctionComponent<Props> = props => (
             className={styles.button}
             onClick={toggleVisibility}
             uppercase={false}
+            size="large"
             color="mono"
             ref={ref}
-            variant="plain"
-            size="small"
+            variant="text"
           >
             <UserRoleText>{props.role}</UserRoleText>
             {
diff --git a/src/core/client/admin/components/UserStatus/BanModal.tsx b/src/core/client/admin/components/UserStatus/BanModal.tsx
index faf2410c9..1cc8c5575 100644
--- a/src/core/client/admin/components/UserStatus/BanModal.tsx
+++ b/src/core/client/admin/components/UserStatus/BanModal.tsx
@@ -117,17 +117,12 @@ const BanModal: FunctionComponent<Props> = ({
 
                   <Flex justifyContent="flex-end" itemGutter="half">
                     <Localized id="community-banModal-cancel">
-                      <Button variant="ghost" onClick={onClose}>
+                      <Button variant="flat" onClick={onClose}>
                         Cancel
                       </Button>
                     </Localized>
                     <Localized id="community-banModal-banUser">
-                      <Button
-                        variant="filled"
-                        color="default"
-                        type="submit"
-                        ref={lastFocusableRef}
-                      >
+                      <Button type="submit" ref={lastFocusableRef}>
                         Ban User
                       </Button>
                     </Localized>
diff --git a/src/core/client/admin/components/UserStatus/PremodModal.tsx b/src/core/client/admin/components/UserStatus/PremodModal.tsx
index 7bb16c1b8..d860f1e8f 100644
--- a/src/core/client/admin/components/UserStatus/PremodModal.tsx
+++ b/src/core/client/admin/components/UserStatus/PremodModal.tsx
@@ -52,18 +52,13 @@ const PremodModal: FunctionComponent<Props> = ({
           </Localized>
           <Flex justifyContent="flex-end" itemGutter>
             <Localized id="community-premodModal-cancel">
-              <Button variant="ghost" onClick={onClose}>
+              <Button variant="flat" onClick={onClose}>
                 Cancel
               </Button>
             </Localized>
 
             <Localized id="community-premodModal-premodUser">
-              <Button
-                variant="filled"
-                color="default"
-                onClick={onConfirm}
-                ref={lastFocusableRef}
-              >
+              <Button onClick={onConfirm} ref={lastFocusableRef}>
                 Yes, always premoderate user
               </Button>
             </Localized>
diff --git a/src/core/client/admin/components/UserStatus/SuspendForm.tsx b/src/core/client/admin/components/UserStatus/SuspendForm.tsx
index 38f8ae6a8..f883f3b62 100644
--- a/src/core/client/admin/components/UserStatus/SuspendForm.tsx
+++ b/src/core/client/admin/components/UserStatus/SuspendForm.tsx
@@ -196,17 +196,12 @@ const SuspendForm: FunctionComponent<Props> = ({
               </Field>
               <Flex justifyContent="flex-end" itemGutter="half">
                 <Localized id="community-suspendModal-cancel">
-                  <Button variant="ghost" onClick={onCancel}>
+                  <Button variant="flat" onClick={onCancel}>
                     Cancel
                   </Button>
                 </Localized>
                 <Localized id="community-suspendModal-suspendUser">
-                  <Button
-                    ref={lastFocusableRef}
-                    variant="filled"
-                    color="default"
-                    type="submit"
-                  >
+                  <Button ref={lastFocusableRef} type="submit">
                     Suspend User
                   </Button>
                 </Localized>
diff --git a/src/core/client/admin/components/UserStatus/SuspendModal.tsx b/src/core/client/admin/components/UserStatus/SuspendModal.tsx
index 7b1690e7d..00a885728 100644
--- a/src/core/client/admin/components/UserStatus/SuspendModal.tsx
+++ b/src/core/client/admin/components/UserStatus/SuspendModal.tsx
@@ -71,12 +71,7 @@ const SuspendModal: FunctionComponent<Props> = ({
 
               <Flex justifyContent="flex-end" itemGutter="half">
                 <Localized id="community-suspendModal-success-close">
-                  <Button
-                    ref={lastFocusableRef}
-                    variant="filled"
-                    color="default"
-                    onClick={onClose}
-                  >
+                  <Button ref={lastFocusableRef} onClick={onClose}>
                     Ok
                   </Button>
                 </Localized>
diff --git a/src/core/client/admin/components/UserStatus/UserStatusChange.tsx b/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
index a0d603532..606cdc5a7 100644
--- a/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
+++ b/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
@@ -144,7 +144,7 @@ const UserStatusChange: FunctionComponent<Props> = ({
             ref={ref}
             color="mono"
             uppercase={false}
-            variant="plain"
+            variant="text"
           >
             {children}
             {
diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.tsx b/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.tsx
index a7f79e783..f54b808a6 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.tsx
@@ -17,9 +17,9 @@ const InviteUsers: FunctionComponent = () => {
     <div data-testid="invite-users">
       <Localized id="community-invite-invite">
         <Button
-          variant="filled"
-          color="default"
           className={styles.button}
+          variant="flat"
+          color="dark"
           type="button"
           data-testid="invite-users-button"
           onClick={show}
diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.tsx b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.tsx
index 36b2822b0..6dd0a0b3b 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.tsx
@@ -64,8 +64,6 @@ const InviteForm: FunctionComponent<Props> = ({ lastRef, onFinish }) => {
             <Flex justifyContent="center">
               <Localized id="community-invite-inviteMore">
                 <Button
-                  variant="underlined"
-                  color="default"
                   disabled={submitting}
                   onClick={() => {
                     setEmailFieldCount(emailFieldCount + 1);
@@ -129,13 +127,7 @@ const InviteForm: FunctionComponent<Props> = ({ lastRef, onFinish }) => {
             </FormSpy>
             <Flex direction="row" justifyContent="flex-end">
               <Localized id="community-invite-sendInvitations">
-                <Button
-                  color="default"
-                  variant="filled"
-                  type="submit"
-                  disabled={submitting}
-                  ref={lastRef}
-                >
+                <Button type="submit" disabled={submitting} ref={lastRef}>
                   Send invitations
                 </Button>
               </Localized>
diff --git a/src/core/client/admin/routes/Community/UserRow.tsx b/src/core/client/admin/routes/Community/UserRow.tsx
index 9d0333679..e5160dbf7 100644
--- a/src/core/client/admin/routes/Community/UserRow.tsx
+++ b/src/core/client/admin/routes/Community/UserRow.tsx
@@ -58,7 +58,8 @@ const UserRow: FunctionComponent<Props> = ({
         )}
         {!deletedAt && (
           <Button
-            variant="plain"
+            variant="text"
+            color="mono"
             uppercase={false}
             onClick={usernameClicked}
             className={styles.usernameButton}
diff --git a/src/core/client/admin/routes/Community/UserTableFilter.tsx b/src/core/client/admin/routes/Community/UserTableFilter.tsx
index 08afac545..6cb310136 100644
--- a/src/core/client/admin/routes/Community/UserTableFilter.tsx
+++ b/src/core/client/admin/routes/Community/UserTableFilter.tsx
@@ -73,9 +73,9 @@ const UserTableFilter: FunctionComponent<Props> = props => (
                           >
                             <Button
                               className={styles.adornment}
-                              variant="adornment"
+                              adornmentRight
                               type="submit"
-                              color="emphasis"
+                              color="dark"
                               aria-label="Search"
                             >
                               <Icon size="md">search</Icon>
diff --git a/src/core/client/admin/routes/Configure/Configure.tsx b/src/core/client/admin/routes/Configure/Configure.tsx
index ce4ae6213..5be62a542 100644
--- a/src/core/client/admin/routes/Configure/Configure.tsx
+++ b/src/core/client/admin/routes/Configure/Configure.tsx
@@ -65,8 +65,9 @@ const Configure: FunctionComponent<Props> = ({
                 <Localized id="configure-sideBar-saveChanges">
                   <Button
                     data-testid="configure-sideBar-saveChanges"
-                    variant="filled"
                     type="submit"
+                    color="alt"
+                    size="large"
                     disabled={submitting || pristine}
                   >
                     Save Changes
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx
index fced5daf6..18addf914 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx
@@ -105,7 +105,7 @@ const EmbedCode: FunctionComponent<Props> = ({ staticURI, getMessage }) => {
         value={embed.text}
       />
       <HorizontalGutter className={styles.copyArea}>
-        <CopyButton size="medium" text={embed.text} />
+        <CopyButton text={embed.text} />
       </HorizontalGutter>
     </ConfigBox>
   );
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
index e893a1f51..449065a56 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
@@ -178,8 +178,6 @@ const OIDCConfig: FunctionComponent<Props> = ({
                     />
                     <Button
                       id="configure-auth-oidc-discover"
-                      variant="filled"
-                      size="small"
                       disabled={disabledInside || disableForDiscover}
                       onClick={onDiscover}
                     >
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/RedirectField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/RedirectField.tsx
index 548c61f64..ea0faaf6a 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/RedirectField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/RedirectField.tsx
@@ -17,7 +17,7 @@ const RedirectField: FunctionComponent<Props> = ({ url, description }) => (
     {description}
     <Flex direction="row" itemGutter="half" alignItems="center">
       <TextField name="redirectURI" value={url} fullWidth readOnly />
-      <CopyButton size="small" text={url} />
+      <CopyButton text={url} />
     </Flex>
   </FormField>
 );
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
index e81d375f1..93cad5de3 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
@@ -61,8 +61,6 @@ const SSOKeyField: FunctionComponent<Props> = ({
     <Localized id="configure-auth-sso-regenerate">
       <Button
         id="configure-auth-sso-regenerate"
-        variant="filled"
-        size="small"
         disabled={disabled}
         onClick={onRegenerate}
         className={styles.regenerateButton}
diff --git a/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx b/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx
index e3bff0b79..a22b7561d 100644
--- a/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx
@@ -238,8 +238,6 @@ const SlackChannel: FunctionComponent<Props> = ({
             </FormField>
             <div>
               <Button
-                size="medium"
-                variant="filled"
                 color="alert"
                 onClick={onRemove}
                 className={cn(styles.removeButton, styles.button)}
diff --git a/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx
index ff4910218..afa89b9f1 100644
--- a/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx
@@ -109,12 +109,7 @@ const SlackConfigContainer: FunctionComponent<Props> = ({ form, settings }) => {
             on how to create a Slack App see our documentation.
           </FormFieldDescription>
         </Localized>
-        <Button
-          size="medium"
-          variant="filled"
-          onClick={onAddChannel}
-          className={styles.button}
-        >
+        <Button color="dark" onClick={onAddChannel}>
           <ButtonIcon size="md" className={styles.icon}>
             add
           </ButtonIcon>
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx
index 6285217df..978e3fcb2 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx
@@ -26,14 +26,7 @@ const ModerateAllOption: FunctionComponent<Props> = ({
       aria-selected={selected}
       {...rest}
     >
-      <Button
-        href={href}
-        color="emphasis"
-        variant="filled"
-        anchor
-        fullWidth
-        tabIndex={-1}
-      >
+      <Button href={href} color="dark" anchor fullWidth tabIndex={-1}>
         <Localized id="moderate-searchBar-moderateAllStories">
           <span>Moderate all stories</span>
         </Localized>
diff --git a/src/core/client/admin/routes/Moderate/Queue/Queue.tsx b/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
index bbcf37b7c..86932a8de 100644
--- a/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
@@ -98,11 +98,7 @@ const Queue: FunctionComponent<Props> = ({
       {Boolean(viewNewCount && viewNewCount > 0) && (
         <Flex justifyContent="center" className={styles.viewNewButtonContainer}>
           <Localized id="moderate-queue-viewNew" $count={viewNewCount}>
-            <Button
-              variant="filled"
-              onClick={onViewNew}
-              className={styles.viewNewButton}
-            >
+            <Button onClick={onViewNew} className={styles.viewNewButton}>
               View {viewNewCount} new comments
             </Button>
           </Localized>
diff --git a/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusChange.tsx b/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusChange.tsx
index eae78de7d..535ddf2e6 100644
--- a/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusChange.tsx
+++ b/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusChange.tsx
@@ -64,8 +64,7 @@ const StoryStatusChange: FunctionComponent<Props> = props => (
             ref={ref}
             color="mono"
             uppercase={false}
-            variant="plain"
-            size="small"
+            variant="text"
           >
             <StoryStatusText>{props.status}</StoryStatusText>
             {
diff --git a/src/core/client/admin/routes/Stories/StoryTableFilter.tsx b/src/core/client/admin/routes/Stories/StoryTableFilter.tsx
index 1ebd6753c..f6e9f1470 100644
--- a/src/core/client/admin/routes/Stories/StoryTableFilter.tsx
+++ b/src/core/client/admin/routes/Stories/StoryTableFilter.tsx
@@ -63,9 +63,9 @@ const StoryTableFilter: FunctionComponent<Props> = props => (
                         >
                           <Button
                             className={styles.adornment}
-                            variant="adornment"
                             type="submit"
-                            color="emphasis"
+                            color="dark"
+                            adornmentRight
                             aria-label="Search"
                           >
                             <Icon size="md">search</Icon>
diff --git a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
index 3feb4f57b..4930417c1 100644
--- a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+++ b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
@@ -49,9 +49,9 @@ exports[`renders community 1`] = `
                 >
                   <button
                     aria-label="Search"
-                    className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase UserTableFilter-adornment"
-                    data-color="emphasis"
-                    data-variant="adornment"
+                    className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight UserTableFilter-adornment"
+                    data-color="dark"
+                    data-variant="regular"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
@@ -199,10 +199,10 @@ exports[`renders community 1`] = `
         data-testid="invite-users"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase InviteUsers-button"
-          data-color="default"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantFlat Button-uppercase InviteUsers-button"
+          data-color="dark"
           data-testid="invite-users-button"
-          data-variant="filled"
+          data-variant="flat"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -264,9 +264,9 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
-                data-color="default"
-                data-variant="plain"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
+                data-color="mono"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -329,9 +329,9 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
-                data-color="default"
-                data-variant="plain"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
+                data-color="mono"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -366,9 +366,9 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change role"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain UserRoleChange-button"
+                  className="BaseButton-root Button-root Button-sizeLarge Button-colorMono Button-variantText UserRoleChange-button"
                   data-color="mono"
-                  data-variant="plain"
+                  data-variant="text"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -427,9 +427,9 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
-                data-color="default"
-                data-variant="plain"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
+                data-color="mono"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -464,9 +464,9 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change role"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain UserRoleChange-button"
+                  className="BaseButton-root Button-root Button-sizeLarge Button-colorMono Button-variantText UserRoleChange-button"
                   data-color="mono"
-                  data-variant="plain"
+                  data-variant="text"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -525,9 +525,9 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
-                data-color="default"
-                data-variant="plain"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
+                data-color="mono"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -562,9 +562,9 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change role"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain UserRoleChange-button"
+                  className="BaseButton-root Button-root Button-sizeLarge Button-colorMono Button-variantText UserRoleChange-button"
                   data-color="mono"
-                  data-variant="plain"
+                  data-variant="text"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -608,9 +608,9 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change user status"
-                  className="BaseButton-root Button-root Button-sizeMedium Button-colorMono Button-variantPlain UserStatusChange-button UserStatusChange-fullWidth"
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserStatusChange-button UserStatusChange-fullWidth"
                   data-color="mono"
-                  data-variant="plain"
+                  data-variant="text"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -709,9 +709,9 @@ exports[`renders empty community 1`] = `
                 >
                   <button
                     aria-label="Search"
-                    className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase UserTableFilter-adornment"
-                    data-color="emphasis"
-                    data-variant="adornment"
+                    className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight UserTableFilter-adornment"
+                    data-color="dark"
+                    data-variant="regular"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
@@ -859,10 +859,10 @@ exports[`renders empty community 1`] = `
         data-testid="invite-users"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase InviteUsers-button"
-          data-color="default"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantFlat Button-uppercase InviteUsers-button"
+          data-color="dark"
           data-testid="invite-users-button"
-          data-variant="filled"
+          data-variant="flat"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
diff --git a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
index 3891f5c31..7cdc14a41 100644
--- a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
@@ -104,10 +104,10 @@ exports[`renders configure advanced 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
-            data-color="default"
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
+            data-color="alt"
             data-testid="configure-sideBar-saveChanges"
-            data-variant="filled"
+            data-variant="regular"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -187,9 +187,9 @@ each of your site’s stories.
                   className="Box-root HorizontalGutter-root EmbedCode-copyArea HorizontalGutter-full"
                 >
                   <button
-                    className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase"
-                    data-color="default"
-                    data-variant="filled"
+                    className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
+                    data-color="mono"
+                    data-variant="flat"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
diff --git a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
index 00faf1710..4971e38f4 100644
--- a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
@@ -104,10 +104,10 @@ exports[`renders configure auth 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
-            data-color="default"
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
+            data-color="alt"
             data-testid="configure-sideBar-saveChanges"
-            data-variant="filled"
+            data-variant="regular"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -754,9 +754,9 @@ integration to register for a new account.
                         />
                       </div>
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
-                        data-color="default"
-                        data-variant="filled"
+                        className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
+                        data-color="mono"
+                        data-variant="flat"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -944,9 +944,9 @@ the remaining fields. You may also enter the information manually.
                         />
                       </div>
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
-                        data-color="default"
-                        data-variant="filled"
+                        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular Button-uppercase Button-disabled"
+                        data-color="regular"
+                        data-variant="regular"
                         disabled={true}
                         id="configure-auth-oidc-discover"
                         onBlur={[Function]}
@@ -1302,9 +1302,9 @@ Invalid Date
                       </div>
                     </div>
                     <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase Button-disabled SSOKeyField-regenerateButton"
-                      data-color="default"
-                      data-variant="filled"
+                      className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular Button-uppercase Button-disabled SSOKeyField-regenerateButton"
+                      data-color="regular"
+                      data-variant="regular"
                       disabled={true}
                       id="configure-auth-sso-regenerate"
                       onBlur={[Function]}
@@ -1535,9 +1535,9 @@ to create and set up a web application. For more information visit:
                         />
                       </div>
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
-                        data-color="default"
-                        data-variant="filled"
+                        className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
+                        data-color="mono"
+                        data-variant="flat"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -1855,9 +1855,9 @@ For more information visit:
                         />
                       </div>
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
-                        data-color="default"
-                        data-variant="filled"
+                        className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
+                        data-color="mono"
+                        data-variant="flat"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
diff --git a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
index efa46edce..e558b3b11 100644
--- a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
@@ -104,10 +104,10 @@ exports[`renders configure general 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
-            data-color="default"
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
+            data-color="alt"
             data-testid="configure-sideBar-saveChanges"
-            data-variant="filled"
+            data-variant="regular"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
diff --git a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
index 51c4af0d8..b30003773 100644
--- a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
@@ -104,10 +104,10 @@ exports[`renders configure moderation 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
-            data-color="default"
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
+            data-color="alt"
             data-testid="configure-sideBar-saveChanges"
-            data-variant="filled"
+            data-variant="regular"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
diff --git a/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
index 03edfff25..15099328f 100644
--- a/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
@@ -104,10 +104,10 @@ exports[`renders configure organization 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
-            data-color="default"
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
+            data-color="alt"
             data-testid="configure-sideBar-saveChanges"
-            data-variant="filled"
+            data-variant="regular"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
diff --git a/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
index 03e23812b..20e7e8510 100644
--- a/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
@@ -104,10 +104,10 @@ exports[`renders configure wordList 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
-            data-color="default"
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
+            data-color="alt"
             data-testid="configure-sideBar-saveChanges"
-            data-variant="filled"
+            data-variant="regular"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
diff --git a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
index e38a79a3e..3b3ebf1d1 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
@@ -170,9 +170,9 @@ exports[`approves comment in reported queue: dangling 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                 data-color="mono"
-                data-variant="ghost"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -423,9 +423,9 @@ exports[`rejects comment in reported queue: dangling 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                 data-color="mono"
-                data-variant="ghost"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -673,9 +673,9 @@ exports[`renders reported queue with comments 1`] = `
                     <button
                       aria-controls="uuid-0"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                       data-color="mono"
-                      data-variant="ghost"
+                      data-variant="text"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -910,9 +910,9 @@ exports[`renders reported queue with comments 1`] = `
                     <button
                       aria-controls="uuid-1"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                       data-color="mono"
-                      data-variant="ghost"
+                      data-variant="text"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1163,9 +1163,9 @@ exports[`renders reported queue with comments 2`] = `
                     <button
                       aria-controls="uuid-0"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                       data-color="mono"
-                      data-variant="ghost"
+                      data-variant="text"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1400,9 +1400,9 @@ exports[`renders reported queue with comments 2`] = `
                     <button
                       aria-controls="uuid-1"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                       data-color="mono"
-                      data-variant="ghost"
+                      data-variant="text"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1661,9 +1661,9 @@ exports[`renders reported queue with comments and load more 1`] = `
               <button
                 aria-controls="uuid-2"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                 data-color="mono"
-                data-variant="ghost"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
diff --git a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
index b66844690..2358f98de 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
@@ -170,9 +170,9 @@ exports[`approves comment in rejected queue: dangling 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                 data-color="mono"
-                data-variant="ghost"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -420,9 +420,9 @@ exports[`renders rejected queue with comments 1`] = `
                     <button
                       aria-controls="uuid-0"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                       data-color="mono"
-                      data-variant="ghost"
+                      data-variant="text"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -657,9 +657,9 @@ exports[`renders rejected queue with comments 1`] = `
                     <button
                       aria-controls="uuid-1"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                       data-color="mono"
-                      data-variant="ghost"
+                      data-variant="text"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -913,9 +913,9 @@ exports[`renders rejected queue with comments and load more 1`] = `
               <button
                 aria-controls="uuid-2"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                 data-color="mono"
-                data-variant="ghost"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
diff --git a/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
index ccd27210e..834dce616 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
@@ -131,9 +131,9 @@ exports[`approves single comment 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                 data-color="mono"
-                data-variant="ghost"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -345,9 +345,9 @@ exports[`rejects single comment 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                 data-color="mono"
-                data-variant="ghost"
+                data-variant="text"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -594,9 +594,9 @@ exports[`renders single comment view 1`] = `
                       <button
                         aria-controls="uuid-0"
                         aria-expanded={false}
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                        className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                         data-color="mono"
-                        data-variant="ghost"
+                        data-variant="text"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
diff --git a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
index 8f9158d69..194dd32f1 100644
--- a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
+++ b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
@@ -46,9 +46,9 @@ exports[`renders empty stories 1`] = `
               >
                 <button
                   aria-label="Search"
-                  className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase StoryTableFilter-adornment"
-                  data-color="emphasis"
-                  data-variant="adornment"
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight StoryTableFilter-adornment"
+                  data-color="dark"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
@@ -202,9 +202,9 @@ exports[`renders empty stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
                   data-color="mono"
-                  data-variant="plain"
+                  data-variant="text"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -273,9 +273,9 @@ exports[`renders empty stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
                   data-color="mono"
-                  data-variant="plain"
+                  data-variant="text"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -365,9 +365,9 @@ exports[`renders stories 1`] = `
               >
                 <button
                   aria-label="Search"
-                  className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase StoryTableFilter-adornment"
-                  data-color="emphasis"
-                  data-variant="adornment"
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight StoryTableFilter-adornment"
+                  data-color="dark"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
@@ -521,9 +521,9 @@ exports[`renders stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
                   data-color="mono"
-                  data-variant="plain"
+                  data-variant="text"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -592,9 +592,9 @@ exports[`renders stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
                   data-color="mono"
-                  data-variant="plain"
+                  data-variant="text"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
diff --git a/src/core/client/framework/components/CopyButton.tsx b/src/core/client/framework/components/CopyButton.tsx
index 468b8a347..0674d2631 100644
--- a/src/core/client/framework/components/CopyButton.tsx
+++ b/src/core/client/framework/components/CopyButton.tsx
@@ -7,7 +7,6 @@ import { PropTypesOf } from "coral-ui/types";
 
 interface Props extends PropTypesOf<typeof Button> {
   text: string;
-  size?: "small" | "medium" | "large";
 }
 
 interface State {
@@ -40,11 +39,11 @@ class CopyButton extends React.Component<Props> {
   };
 
   public render() {
-    const { text, size, ...rest } = this.props;
+    const { text, color, size, ...rest } = this.props;
     const { copied } = this.state;
     return (
       <CopyToClipboard text={text} onCopy={this.handleCopy}>
-        <Button variant="filled" size={size || "small"} {...rest}>
+        <Button color={color || "mono"} variant="flat" {...rest}>
           {copied ? (
             <Localized id="framework-copyButton-copied">
               <span>Copied!</span>
diff --git a/src/core/client/ui/components/v2/AppBar/AppBar.mdx b/src/core/client/ui/components/v2/AppBar/AppBar.mdx
index a0b6c5a65..6abd6a781 100644
--- a/src/core/client/ui/components/v2/AppBar/AppBar.mdx
+++ b/src/core/client/ui/components/v2/AppBar/AppBar.mdx
@@ -6,7 +6,6 @@ menu: UI Kit
 import { Playground, PropsTable } from "docz";
 
 import { AppBar, Begin, End, Navigation, NavigationItem, Divider } from "./";
-import { Logo } from "../Brand";
 import Flex from "../Flex";
 import Icon from "../Icon";
 import BaseButton from "../BaseButton";
@@ -18,7 +17,6 @@ import BaseButton from "../BaseButton";
 <Playground>
   <AppBar gutterBegin gutterEnd>
     <Begin itemGutter="double">
-      <Logo />
       <Navigation>
         <NavigationItem active>Home</NavigationItem>
         <NavigationItem>Team</NavigationItem>
diff --git a/src/core/client/ui/components/v2/Button/Button.css b/src/core/client/ui/components/v2/Button/Button.css
index 59b7bcc48..ee851aa8a 100644
--- a/src/core/client/ui/components/v2/Button/Button.css
+++ b/src/core/client/ui/components/v2/Button/Button.css
@@ -1,79 +1,109 @@
 /* Design tokens */
 
-$button-default-outline-background: var(--v2-colors-pure-white);
-$button-default-outline-foreground: var(--v2-colors-teal-600);
-$button-default-outline-active: var(--v2-colors-teal-500);
+/* flat button */
+$button-flat-regular-foreground: var(--v2-colors-teal-600);
+$button-flat-mono-foreground: var(--v2-colors-grey-500);
+$button-flat-alert-foreground: var(--v2-colors-red-500);
+$button-flat-alt-foreground: var(--v2-colors-green-500);
+$button-flat-dark-foreground: var(--v2-colors-blue-500);
 
-$button-default-filled-background: var(--v2-colors-teal-600);
-$button-default-filled-foreground: var(--v2-colors-pure-white);
-$button-default-filled-hover: var(--v2-colors-teal-500);
-$button-default-filled-active: var(--v2-colors-teal-400);
+$button-flat-background: var(--v2-colors-pure-white);
 
-$button-alert-outline-background: var(--v2-colors-pure-white);
-$button-alert-outline-foreground: var(--v2-colors-red-500);
-$button-alert-outline-active: var(--v2-colors-red-400);
+$button-flat-regular-background-hover: var(--v2-colors-teal-100);
+$button-flat-mono-background-hover: var(--v2-colors-grey-200);
+$button-flat-alert-background-hover: var(--v2-colors-red-100);
+$button-flat-alt-background-hover: var(--v2-colors-green-100);
+$button-flat-dark-background-hover: var(--v2-colors-blue-100);
 
-$button-alert-filled-background: var(--v2-colors-red-500);
-$button-alert-filled-foreground: var(--v2-colors-pure-white);
-$button-alert-filled-hover: var(--v2-colors-red-400);
-$button-alert-filled-active: var(--v2-colors-red-300);
+$button-flat-regular-background-active: var(--v2-colors-teal-200);
+$button-flat-mono-background-active: var(--v2-colors-grey-300);
+$button-flat-alert-background-active: var(--v2-colors-red-200);
+$button-flat-alt-background-active: var(--v2-colors-green-200);
+$button-flat-dark-background-active: var(--v2-colors-blue-200);
 
-$button-emphasis-outline-background: var(--v2-colors-pure-white);
-$button-emphasis-outline-foreground: var(--v2-colors-blue-500);
-$button-emphasis-outline-active: var(--v2-colors-blue-400);
+$button-flat-foreground-disabled: var(--v2-colors-grey-400);
 
-$button-emphasis-filled-background: var(--v2-colors-blue-500);
-$button-emphasis-filled-foreground: var(--v2-colors-pure-white);
-$button-emphasis-filled-hover: var(--v2-colors-blue-400);
-$button-emphasis-filled-active: var(--v2-colors-blue-300);
+/* regular button */
+$button-regular-foreground: var(--v2-colors-pure-white);
 
-$button-mono-outline-background: var(--v2-colors-pure-white);
-$button-mono-outline-foreground: var(--v2-colors-grey-600);
-$button-mono-outline-active: var(--v2-colors-grey-500);
+$button-regular-regular-background: var(--v2-colors-teal-600);
+$button-regular-mono-background: var(--v2-colors-grey-500);
+$button-regular-alert-background: var(--v2-colors-red-500);
+$button-regular-alt-background: var(--v2-colors-green-500);
+$button-regular-dark-background: var(--v2-colors-blue-500);
 
-$button-mono-filled-background: var(--v2-colors-grey-600);
-$button-mono-filled-foreground: var(--v2-colors-pure-white);
-$button-mono-filled-hover: var(--v2-colors-grey-500);
-$button-mono-filled-active: var(--v2-colors-grey-400);
+$button-regular-regular-background-hover: var(--v2-colors-teal-700);
+$button-regular-mono-background-hover: var(--v2-colors-grey-600);
+$button-regular-alert-background-hover: var(--v2-colors-red-600);
+$button-regular-alt-background-hover: var(--v2-colors-green-600);
+$button-regular-dark-background-hover: var(--v2-colors-blue-600);
 
-$button-adornment-foreground: var(--v2-colors-pure-white);
+$button-regular-regular-background-active: var(--v2-colors-teal-800);
+$button-regular-mono-background-active: var(--v2-colors-grey-700);
+$button-regular-alert-background-active: var(--v2-colors-red-700);
+$button-regular-alt-background-active: var(--v2-colors-green-700);
+$button-regular-dark-background-active: var(--v2-colors-blue-700);
 
-$button-adornment-default-background: var(--v2-colors-teal-600);
-$button-adornment-alert-background: var(--v2-colors-red-500);
-$button-adornment-emphasis-background: var(--v2-colors-blue-500);
-$button-adornment-mono-background: var(--v2-colors-grey-600);
+$button-regular-background-disabled: var(--v2-colors-grey-300);
 
-$button-adornment-default-hover: var(--v2-colors-teal-500);
-$button-adornment-alert-hover: var(--v2-colors-red-400);
-$button-adornment-emphasis-hover: var(--v2-colors-blue-400);
-$button-adornment-mono-hover: var(--v2-colors-grey-400);
+/* outline button */
+$button-outline-background: var(--v2-colors-pure-white);
+$button-outline-background-disabled: var(--v2-colors-grey-300);
+$button-outline-foreground-disabled: var(--v2-colors-pure-white);
+$button-outline-foreground-hover: var(--v2-colors-pure-white);
+$button-outline-foreground-active: var(--v2-colors-pure-white);
 
-$button-adornment-default-active: var(--v2-colors-teal-400);
-$button-adornment-alert-active: var(--v2-colors-red-300);
-$button-adornment-emphasis-active: var(--v2-colors-blue-300);
-$button-adornment-mono-active: var(--v2-colors-grey-300);
+$button-outline-regular-foreground: var(--v2-colors-teal-600);
+$button-outline-mono-foreground: var(--v2-colors-grey-500);
+$button-outline-alert-foreground: var(--v2-colors-red-500);
+$button-outline-alt-foreground: var(--v2-colors-green-500);
+$button-outline-dark-foreground: var(--v2-colors-blue-500);
 
-$button-ghost-default-foreground: var(--v2-colors-teal-600);
-$button-ghost-alert-foreground: var(--v2-colors-red-500);
-$button-ghost-emphasis-foreground: var(--v2-colors-blue-500);
-$button-ghost-mono-foreground: var(--v2-colors-grey-600);
+$button-outline-regular-border: var(--v2-colors-teal-600);
+$button-outline-mono-border: var(--v2-colors-grey-500);
+$button-outline-alert-border: var(--v2-colors-red-500);
+$button-outline-alt-border: var(--v2-colors-green-500);
+$button-outline-dark-border: var(--v2-colors-blue-500);
 
-$button-ghost-active-foreground: var(--v2-colors-pure-white);
+$button-outline-regular-background-hover: var(--v2-colors-teal-600);
+$button-outline-mono-background-hover: var(--v2-colors-grey-500);
+$button-outline-alert-background-hover: var(--v2-colors-red-500);
+$button-outline-alt-background-hover: var(--v2-colors-green-500);
+$button-outline-dark-background-hover: var(--v2-colors-blue-500);
 
-$button-underlined-default-foreground: var(--v2-colors-teal-600);
-$button-underlined-alert-foreground: var(--v2-colors-red-500);
-$button-underlined-emphasis-foreground: var(--v2-colors-blue-500);
-$button-underlined-mono-foreground: var(--v2-colors-grey-600);
+$button-outline-regular-background-active: var(--v2-colors-teal-800);
+$button-outline-mono-background-active: var(--v2-colors-grey-700);
+$button-outline-alert-background-active: var(--v2-colors-red-700);
+$button-outline-alt-background-active: var(--v2-colors-green-700);
+$button-outline-dark-background-active: var(--v2-colors-blue-700);
 
-$button-underlined-default-hover: var(--v2-colors-teal-500);
-$button-underlined-alert-hover: var(--v2-colors-red-400);
-$button-underlined-emphasis-hover: var(--v2-colors-blue-400);
-$button-underlined-mono-hover: var(--v2-colors-grey-500);
+$button-outline-regular-border-active: var(--v2-colors-teal-800);
+$button-outline-mono-border-active: var(--v2-colors-grey-700);
+$button-outline-alert-border-active: var(--v2-colors-red-700);
+$button-outline-alt-border-active: var(--v2-colors-green-700);
+$button-outline-dark-border-active: var(--v2-colors-blue-700);
 
-$button-underlined-default-active: var(--v2-colors-teal-400);
-$button-underlined-alert-active: var(--v2-colors-red-300);
-$button-underlined-emphasis-active: var(--v2-colors-blue-300);
-$button-underlined-mono-active: var(--v2-colors-grey-400);
+/* text button */
+$button-text-background: transparent;
+$button-text-foreground-disabled: var(--v2-colors-pure-white);
+
+$button-text-regular-foreground: var(--v2-colors-teal-600);
+$button-text-mono-foreground: var(--v2-colors-grey-500);
+$button-text-alert-foreground: var(--v2-colors-red-500);
+$button-text-alt-foreground: var(--v2-colors-green-500);
+$button-text-dark-foreground: var(--v2-colors-blue-500);
+
+$button-text-regular-foreground-hover: var(--v2-colors-teal-700);
+$button-text-mono-foreground-hover: var(--v2-colors-grey-600);
+$button-text-alert-foreground-hover: var(--v2-colors-red-600);
+$button-text-alt-foreground-hover: var(--v2-colors-green-600);
+$button-text-dark-foreground-hover: var(--v2-colors-blue-600);
+
+$button-text-regular-foreground-active: var(--v2-colors-teal-800);
+$button-text-mono-foreground-active: var(--v2-colors-grey-700);
+$button-text-alert-foreground-active: var(--v2-colors-red-700);
+$button-text-alt-foreground-active: var(--v2-colors-green-700);
+$button-text-dark-foreground-active: var(--v2-colors-blue-700);
 
 /* Class Definitions */
 
@@ -85,7 +115,14 @@ $button-underlined-mono-active: var(--v2-colors-grey-400);
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  border: 0px solid transparent;
+  border: 1px solid transparent;
+
+  letter-spacing: 0.042em;
+  transition: 0.2s ease-out background-color;
+
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  line-height: var(--v2-line-height-reset);
 
   & > * {
     margin: 0 var(--v2-spacing-1) 0 0;
@@ -95,6 +132,24 @@ $button-underlined-mono-active: var(--v2-colors-grey-400);
   & > *:last-child {
     margin: 0;
   }
+
+  &.iconLeft i {
+    padding-right: var(--v2-spacing-1);
+  }
+
+  &.iconRight i {
+    padding-left: var(--v2-spacing-1);
+  }
+}
+
+.adornmentLeft {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.adornmentRight {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .uppercase {
@@ -112,396 +167,321 @@ $button-underlined-mono-active: var(--v2-colors-grey-400);
   box-sizing: border-box;
 }
 
-.sizeSmall {
-  color: $button-default-outline-foreground;
-  font-family: var(--v2-font-family-primary);
-  font-weight: var(--v2-font-weight-primary-bold);
-  font-size: var(--v2-font-size-2);
-  line-height: 1;
-
-  padding: var(--v2-spacing-1);
-}
-
-.sizeMedium {
-  color: $button-default-outline-foreground;
-  font-family: var(--v2-font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
-  font-size: var(--v2-font-size-2);
-  line-height: 1.28;
-
-  padding: var(--v2-spacing-3) var(--v2-spacing-5);
+.sizeRegular {
+  font-size: var(--v2-font-size-1);
+  &:not(.variantText) {
+    padding: var(--v2-spacing-2) var(--v2-spacing-3);
+    &.iconLeft,
+    &.iconRight {
+      padding-left: var(--v2-spacing-2);
+      padding-right: var(--v2-spacing-2);
+    }
+  }
 }
 
 .sizeLarge {
-  color: $button-default-outline-foreground;
-  font-family: var(--v2-font-family-primary);
-  font-weight: var(--v2-font-weight-primary-semi-bold);
-  font-size: var(--v2-line-height-reset);
-  line-height: 1.25;
-
-  padding: var(--v2-spacing-4) var(--v2-spacing-6);
-}
-
-.variantDefault,
-.variantPlain {
-  &.colorDefault {
-    color: $button-default-outline-foreground;
-  }
-  &.colorAlert {
-    color: $button-alert-outline-foreground;
-  }
-  &.colorEmphasis {
-    color: $button-emphasis-outline-foreground;
-  }
-  &.colorMono {
-    color: $button-mono-outline-foreground;
+  font-size: var(--v2-font-size-2);
+  &:not(.variantText) {
+    padding: var(--v2-spacing-3) var(--v2-spacing-5);
+    &.iconLeft,
+    &.iconRight {
+      padding-left: var(--v2-spacing-4);
+      padding-right: var(--v2-spacing-4);
+    }
   }
 }
 
-.variantDefault {
-  border-width: 1px;
-  &.colorDefault {
-    border-color: $button-default-outline-foreground;
-    background-color: $button-default-outline-background;
-  }
-  &.colorAlert {
-    border-color: $button-alert-outline-foreground;
-    background-color: $button-alert-outline-background;
-  }
-  &.colorEmphasis {
-    border-color: $button-emphasis-outline-foreground;
-    background-color: $button-emphasis-outline-background;
-  }
-  &.colorMono {
-    border-color: $button-mono-outline-foreground;
-    background-color: $button-mono-outline-background;
+.variantRegular {
+  color: $button-regular-foreground;
+
+  &:disabled,
+  &.disabled {
+    background-color: $button-regular-background-disabled;
   }
 
-  &:not(.disabled) {
-    &.colorDefault {
+  &:not(.disabled),
+  &:not(:disabled) {
+    &.colorRegular {
+      background-color: $button-regular-regular-background;
+      &:hover,
       &.mouseHover {
-        background-color: $button-default-outline-foreground;
-        color: $button-default-outline-background;
+        background-color: $button-regular-regular-background-hover;
       }
       &:active,
       &.active {
-        color: $button-default-outline-background;
-        border-color: $button-default-outline-active;
-        background-color: $button-default-outline-active;
+        background-color: $button-regular-regular-background-active;
       }
     }
+
+    &.colorMono {
+      background-color: $button-regular-mono-background;
+      &:hover,
+      &.mouseHover {
+        background-color: $button-regular-mono-background-hover;
+      }
+      &:active,
+      &.active {
+        background-color: $button-regular-mono-background-active;
+      }
+    }
+
     &.colorAlert {
+      background-color: $button-regular-alert-background;
+      &:hover,
       &.mouseHover {
-        color: $button-alert-outline-background;
-        background-color: $button-alert-outline-foreground;
+        background-color: $button-regular-alert-background-hover;
       }
       &:active,
       &.active {
-        color: $button-alert-outline-background;
-        border-color: $button-alert-outline-active;
-        background-color: $button-alert-outline-active;
+        background-color: $button-regular-alert-background-active;
       }
     }
-    &.colorEmphasis {
+
+    &.colorAlt {
+      background-color: $button-regular-alt-background;
+      &:hover,
       &.mouseHover {
-        color: $button-emphasis-outline-background;
-        background-color: $button-emphasis-outline-foreground;
+        background-color: $button-regular-alt-background-hover;
       }
       &:active,
       &.active {
-        border-color: $button-emphasis-outline-active;
-        background-color: $button-emphasis-outline-active;
-        color: $button-emphasis-outline-background;
+        background-color: $button-regular-alt-background-active;
+      }
+    }
+
+    &.colorDark {
+      background-color: $button-regular-dark-background;
+      &:hover,
+      &.mouseHover {
+        background-color: $button-regular-dark-background-hover;
+      }
+      &:active,
+      &.active {
+        background-color: $button-regular-dark-background-active;
+      }
+    }
+  }
+}
+
+.variantFlat {
+  background-color: $button-flat-background;
+
+  &:disabled,
+  &.disabled {
+    color: $button-flat-foreground-disabled;
+  }
+
+  &:not(.disabled),
+  &:not(:disabled) {
+    &.colorRegular {
+      color: $button-flat-regular-foreground;
+      &:hover,
+      &.mouseHover {
+        background-color: $button-flat-regular-background-hover;
+      }
+      &:active,
+      &.active {
+        background-color: $button-flat-regular-background-active;
       }
     }
     &.colorMono {
+      color: $button-flat-mono-foreground;
+      &:hover,
       &.mouseHover {
-        background-color: $button-mono-outline-foreground;
-        color: $button-mono-outline-background;
+        background-color: $button-flat-mono-background-hover;
       }
       &:active,
       &.active {
-        border-color: $button-mono-outline-active;
-        background-color: $button-mono-outline-active;
-        color: $button-mono-outline-background;
-      }
-    }
-  }
-}
-
-.variantPlain {
-  padding: 0;
-}
-
-.variantFilled {
-  border-width: 1px;
-
-  &.colorDefault {
-    border-color: $button-default-filled-background;
-    color: $button-default-filled-foreground;
-    background-color: $button-default-filled-background;
-  }
-  &.colorAlert {
-    border-color: $button-alert-filled-background;
-    color: $button-alert-filled-foreground;
-    background-color: $button-alert-filled-background;
-  }
-  &.colorEmphasis {
-    border-color: $button-emphasis-filled-background;
-    color: $button-emphasis-filled-foreground;
-    background-color: $button-emphasis-filled-background;
-  }
-  &.colorMono {
-    border-color: $button-mono-filled-background;
-    color: $button-mono-filled-foreground;
-    background-color: $button-mono-filled-background;
-  }
-
-  &:not(.disabled) {
-    &.colorDefault {
-      &.mouseHover {
-        border-color: $button-default-filled-hover;
-        color: $button-default-filled-foreground;
-        background-color: $button-default-filled-hover;
-      }
-      &:active,
-      &.active {
-        border-color: $button-default-filled-active;
-        color: $button-default-filled-foreground;
-        background-color: $button-default-filled-active;
+        color: $button-flat-mono-background-active;
       }
     }
     &.colorAlert {
+      color: $button-flat-alert-foreground;
+      &:hover,
       &.mouseHover {
-        border-color: $button-alert-filled-hover;
-        color: $button-alert-filled-foreground;
-        background-color: $button-alert-filled-hover;
+        background-color: $button-flat-alert-background-hover;
       }
       &:active,
       &.active {
-        border-color: $button-alert-filled-active;
-        color: $button-alert-filled-foreground;
-        background-color: $button-alert-filled-active;
+        background-color: $button-flat-alert-background-active;
       }
     }
-    &.colorEmphasis {
+    &.colorAlt {
+      color: $button-flat-alt-foreground;
+      &:hover,
       &.mouseHover {
-        border-color: $button-emphasis-filled-hover;
-        color: $button-emphasis-filled-foreground;
-        background-color: $button-emphasis-filled-hover;
+        background-color: $button-flat-alt-background-hover;
       }
       &:active,
       &.active {
-        border-color: $button-emphasis-filled-active;
-        color: $button-emphasis-filled-foreground;
-        background-color: $button-emphasis-filled-active;
+        background-color: $button-flat-alt-background-active;
       }
     }
-    &.colorMono {
+    &.colorDark {
+      color: $button-flat-dark-foreground;
+      &:hover,
       &.mouseHover {
-        border-color: $button-mono-filled-hover;
-        color: $button-mono-filled-foreground;
-        background-color: $button-mono-filled-hover;
+        background-color: $button-flat-dark-background-hover;
       }
       &:active,
       &.active {
-        border-color: $button-mono-filled-active;
-        color: $button-mono-filled-foreground;
-        background-color: $button-mono-filled-active;
+        background-color: $button-flat-dark-background-active;
       }
     }
   }
 }
 
-.variantAdornment {
-  color: $button-adornment-foreground;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  &.colorDefault {
-    background-color: $button-adornment-default-background;
-    border-color: $button-adornment-default-background;
-  }
-  &.colorAlert {
-    background-color: $button-adornment-alert-background;
-    border-color: $button-adornment-alert-background;
-  }
-  &.colorEmphasis {
-    background-color: $button-adornment-emphasis-background;
-    border-color: $button-adornment-emphasis-background;
-  }
-  &.colorMono {
-    background-color: $button-adornment-mono-background;
-    border-color: $button-adornment-mono-background;
+.variantOutline {
+  background-color: $button-outline-background;
+  &:disabled,
+  &.disabled {
+    color: $button-outline-foreground-disabled;
+    background-color: $button-outline-background-disabled;
   }
 
-  &:not(.disabled) {
-    &.colorDefault {
-      &.mouseHover {
-        background-color: $button-adornment-default-hover;
-        border-color: $button-adornment-default-hover;
-      }
-      &:active,
-      &.active {
-        background-color: $button-adornment-default-active;
-        border-color: $button-adornment-default-active;
-      }
+  &:not(.disabled),
+  &:not(:disabled),
+  &:not(.mouseHover),
+  &:not(:hover),
+  &:not(.active),
+  &:not(:active) {
+    &.colorRegular {
+      color: $button-outline-regular-foreground;
+      border-color: $button-outline-regular-border;
+    }
+    &.colorMono {
+      color: $button-outline-mono-foreground;
+      border-color: $button-outline-mono-border;
     }
     &.colorAlert {
-      &.mouseHover {
-        background-color: $button-adornment-alert-hover;
-        border-color: $button-adornment-alert-hover;
+      color: $button-outline-alert-foreground;
+      border-color: $button-outline-alert-border;
+    }
+    &.colorAlt {
+      color: $button-outline-alt-foreground;
+      border-color: $button-outline-alt-border;
+    }
+    &.colorDark {
+      color: $button-outline-dark-foreground;
+      border-color: $button-outline-dark-border;
+    }
+  }
+
+  &:not(.disabled),
+  &:not(:disabled) {
+    &.mouseHover,
+    &:hover {
+      color: $button-outline-foreground-hover;
+      &.colorRegular {
+        background-color: $button-outline-regular-background-hover;
       }
-      &:active,
-      &.active {
-        background-color: $button-adornment-alert-active;
-        border-color: $button-adornment-alert-active;
+      &.colorMono {
+        background-color: $button-outline-mono-background-hover;
+      }
+      &.colorAlert {
+        background-color: $button-outline-alert-background-hover;
+      }
+      &.colorAlt {
+        background-color: $button-outline-alt-background-hover;
+      }
+      &.colorDark {
+        background-color: $button-outline-dark-background-hover;
       }
     }
-    &.colorEmphasis {
-      &.mouseHover {
-        background-color: $button-adornment-emphasis-hover;
-        border-color: $button-adornment-emphasis-hover;
+
+    &.active,
+    &:active {
+      color: $button-outline-foreground-active;
+      &.colorRegular {
+        background-color: $button-outline-regular-background-active;
+        border-color: $button-outline-regular-border-active;
       }
-      &:active,
-      &.active {
-        background-color: $button-adornment-emphasis-active;
-        border-color: $button-adornment-emphasis-active;
+      &.colorMono {
+        background-color: $button-outline-mono-background-active;
+        border-color: $button-outline-regular-border-active;
       }
-    }
-    &.colorMono {
-      &.mouseHover {
-        background-color: $button-adornment-mono-hover;
-        border-color: $button-adornment-mono-hover;
+      &.colorAlert {
+        background-color: $button-outline-alert-background-active;
+        border-color: $button-outline-alert-border-active;
       }
-      &:active,
-      &.active {
-        background-color: $button-adornment-mono-active;
-        border-color: $button-adornment-mono-active;
+      &.colorAlt {
+        background-color: $button-outline-alt-background-active;
+        border-color: $button-outline-alt-border-active;
+      }
+      &.colorDark {
+        background-color: $button-outline-dark-background-active;
+        border-color: $button-outline-dark-border-active;
       }
     }
   }
 }
 
-.variantGhost {
-  border: 1px solid transparent;
-
-  &.colorDefault {
-    color: $button-ghost-default-foreground;
-  }
-  &.colorAlert {
-    color: $button-ghost-alert-foreground;
-  }
-  &.colorEmphasis {
-    color: $button-ghost-emphasis-foreground;
-  }
-  &.colorMono {
-    color: $button-ghost-mono-foreground;
+.variantText {
+  background-color: $button-text-background;
+  &:disabled,
+  &.disabled {
+    color: $button-text-foreground-disabled;
   }
 
-  &:not(.disabled) {
-    &.colorDefault {
+  &:not(.disabled),
+  &:not(:disabled) {
+    &.colorRegular {
+      color: $button-text-regular-foreground;
+      &:hover,
       &.mouseHover {
-        border: 1px solid currentColor;
+        color: $button-text-regular-foreground-hover;
       }
       &:active,
       &.active {
-        border: 1px solid currentColor;
-        color: $button-ghost-active-foreground;
-        background-color: $button-ghost-default-foreground;
+        color: $button-text-regular-foreground-active;
       }
     }
+
+    &.colorMono {
+      color: $button-text-mono-foreground;
+      &:hover,
+      &.mouseHover {
+        color: $button-text-mono-foreground-hover;
+      }
+      &:active,
+      &.active {
+        color: $button-text-mono-foreground-active;
+      }
+    }
+
+    &.colorAlt {
+      color: $button-text-alt-foreground;
+      &:hover,
+      &.mouseHover {
+        color: $button-text-alt-foreground-hover;
+      }
+      &:active,
+      &.active {
+        color: $button-text-alt-foreground-active;
+      }
+    }
+
     &.colorAlert {
+      color: $button-text-alert-foreground;
+      &:hover,
       &.mouseHover {
-        border: 1px solid currentColor;
+        color: $button-text-alert-foreground-hover;
       }
       &:active,
       &.active {
-        border: 1px solid currentColor;
-        color: $button-ghost-active-foreground;
-        background-color: $button-ghost-alert-foreground;
+        color: $button-text-alert-foreground-active;
       }
     }
-    &.colorEmphasis {
+
+    &.colorDark {
+      color: $button-text-dark-foreground;
+      &:hover,
       &.mouseHover {
-        border: 1px solid currentColor;
+        color: $button-text-dark-foreground-hover;
       }
       &:active,
       &.active {
-        border: 1px solid currentColor;
-        color: $button-ghost-active-foreground;
-        background-color: $button-ghost-emphasis-foreground;
-      }
-    }
-    &.colorMono {
-      &.mouseHover {
-        border: 1px solid currentColor;
-      }
-      &:active,
-      &.active {
-        border: 1px solid currentColor;
-        color: $button-ghost-active-foreground;
-        background-color: $button-ghost-mono-foreground;
-      }
-    }
-  }
-}
-
-.variantUnderlined {
-  padding-right: 0px;
-  padding-left: 0px;
-  border-radius: 0;
-  border-bottom: 1px solid currentColor;
-  padding: 0;
-
-  &.colorDefault {
-    color: $button-underlined-default-foreground;
-  }
-  &.colorAlert {
-    color: $button-underlined-alert-foreground;
-  }
-  &.colorEmphasis {
-    color: $button-underlined-emphasis-foreground;
-  }
-  &.colorMono {
-    color: $button-underlined-mono-foreground;
-  }
-
-  &:not(.disabled) {
-    &.colorDefault {
-      &.mouseHover {
-        color: $button-underlined-default-hover;
-      }
-      &:active,
-      &.active {
-        color: $button-underlined-default-active;
-      }
-    }
-    &.colorAlert {
-      &.mouseHover {
-        color: $button-underlined-alert-hover;
-      }
-      &:active,
-      &.active {
-        color: $button-underlined-alert-active;
-      }
-    }
-    &.colorEmphasis {
-      &.mouseHover {
-        color: $button-underlined-emphasis-hover;
-      }
-      &:active,
-      &.active {
-        color: $button-underlined-emphasis-active;
-      }
-    }
-    &.colorMono {
-      &.mouseHover {
-        color: $button-underlined-mono-hover;
-      }
-      &:active,
-      &.active {
-        color: $button-underlined-mono-active;
+        color: $button-text-dark-foreground-active;
       }
     }
   }
diff --git a/src/core/client/ui/components/v2/Button/Button.spec.tsx b/src/core/client/ui/components/v2/Button/Button.spec.tsx
index 608953104..b522fcac8 100644
--- a/src/core/client/ui/components/v2/Button/Button.spec.tsx
+++ b/src/core/client/ui/components/v2/Button/Button.spec.tsx
@@ -33,7 +33,7 @@ it("forwards ref", () => {
 it("renders a medium sized, alert colored filled button with fullWidth", () => {
   const props: PropTypesOf<typeof Button> = {
     color: "alert",
-    variant: "filled",
+    variant: "regular",
     fullWidth: true,
     classes: {
       colorAlert: "colorAlert",
diff --git a/src/core/client/ui/components/v2/Button/Button.tsx b/src/core/client/ui/components/v2/Button/Button.tsx
index dd0a4c2cd..9887f08d7 100644
--- a/src/core/client/ui/components/v2/Button/Button.tsx
+++ b/src/core/client/ui/components/v2/Button/Button.tsx
@@ -21,19 +21,25 @@ interface Props extends Omit<BaseButtonProps, "ref"> {
   classes: typeof styles & BaseButtonProps["classes"];
 
   /** Size of the button */
-  size?: "small" | "medium" | "large";
+  size?: "regular" | "large";
 
   /** Color of the button */
-  color?: "default" | "alert" | "emphasis" | "mono";
+  color?: "regular" | "alert" | "mono" | "alt" | "dark";
 
   /** Variant of the button */
-  variant?:
-    | "default"
-    | "filled"
-    | "adornment"
-    | "ghost"
-    | "underlined"
-    | "plain";
+  variant?: "regular" | "flat" | "outline" | "text";
+
+  /* button is attached to the LEFT of an input element */
+  adornmentLeft?: boolean;
+
+  /* button is attached to the RIGHT of an input element */
+  adornmentRight?: boolean;
+
+  /* button has a ButtonIcon to the left of the text */
+  iconLeft?: boolean;
+
+  /* button has a ButtonIcon to the right of the text */
+  iconRight?: boolean;
 
   /** If set renders a full width button */
   fullWidth?: boolean;
@@ -52,9 +58,9 @@ interface Props extends Omit<BaseButtonProps, "ref"> {
 
 export class Button extends React.Component<Props> {
   public static defaultProps: Partial<Props> = {
-    size: "medium",
-    variant: "default",
-    color: "default",
+    size: "regular",
+    variant: "regular",
+    color: "regular",
     uppercase: true,
   };
   public render() {
@@ -70,29 +76,35 @@ export class Button extends React.Component<Props> {
       variant,
       type,
       uppercase,
+      iconLeft,
+      iconRight,
+      adornmentLeft,
+      adornmentRight,
       ...rest
     } = this.props;
 
     const rootClassName = cn(
       classes.root,
       {
-        [classes.sizeMedium]: size === "medium",
-        [classes.sizeSmall]: size === "small",
+        [classes.sizeRegular]: size === "regular",
         [classes.sizeLarge]: size === "large",
-        [classes.colorDefault]: color === "default",
+        [classes.colorRegular]: color === "regular",
         [classes.colorAlert]: color === "alert",
-        [classes.colorEmphasis]: color === "emphasis",
+        [classes.colorAlt]: color === "alt",
         [classes.colorMono]: color === "mono",
-        [classes.variantDefault]: variant === "default",
-        [classes.variantFilled]: variant === "filled",
-        [classes.variantAdornment]: variant === "adornment",
-        [classes.variantGhost]: variant === "ghost",
-        [classes.variantUnderlined]: variant === "underlined",
-        [classes.variantPlain]: variant === "plain",
+        [classes.colorDark]: color === "dark",
+        [classes.variantRegular]: variant === "regular",
+        [classes.variantFlat]: variant === "flat",
+        [classes.variantOutline]: variant === "outline",
+        [classes.variantText]: variant === "text",
         [classes.uppercase]: uppercase,
         [classes.fullWidth]: fullWidth,
         [classes.active]: active,
         [classes.disabled]: disabled,
+        [classes.iconLeft]: iconLeft,
+        [classes.iconRight]: iconRight,
+        [classes.adornmentLeft]: adornmentLeft,
+        [classes.adornmentRight]: adornmentRight,
       },
       className
     );
diff --git a/src/core/client/ui/components/v2/Button/ButtonIcon.css b/src/core/client/ui/components/v2/Button/ButtonIcon.css
index 424b6db73..c3a2af639 100644
--- a/src/core/client/ui/components/v2/Button/ButtonIcon.css
+++ b/src/core/client/ui/components/v2/Button/ButtonIcon.css
@@ -1,8 +1,2 @@
 .root {
-  &:first-child {
-    margin-left: -4px;
-  }
-  &:last-child {
-    margin-right: -4px;
-  }
 }
diff --git a/src/core/client/ui/components/v2/Button/__snapshots__/Button.spec.tsx.snap b/src/core/client/ui/components/v2/Button/__snapshots__/Button.spec.tsx.snap
index b6e2d69c0..a0281cc25 100644
--- a/src/core/client/ui/components/v2/Button/__snapshots__/Button.spec.tsx.snap
+++ b/src/core/client/ui/components/v2/Button/__snapshots__/Button.spec.tsx.snap
@@ -4,8 +4,8 @@ exports[`forwards ref 1`] = `
 <ForwardRef(forwardRef)
   className=""
   classes={Object {}}
-  data-color="default"
-  data-variant="default"
+  data-color="regular"
+  data-variant="regular"
 >
   Push me
 </ForwardRef(forwardRef)>
@@ -13,10 +13,10 @@ exports[`forwards ref 1`] = `
 
 exports[`renders a medium sized, alert colored filled button with fullWidth 1`] = `
 <ForwardRef(forwardRef)
-  className="sizeMedium colorAlert variantFilled fullWidth"
+  className="colorAlert fullWidth"
   classes={Object {}}
   data-color="alert"
-  data-variant="filled"
+  data-variant="regular"
 >
   Push me
 </ForwardRef(forwardRef)>
@@ -27,8 +27,8 @@ exports[`renders active state 1`] = `
   className="active"
   classes={Object {}}
   data-active={true}
-  data-color="default"
-  data-variant="default"
+  data-color="regular"
+  data-variant="regular"
 >
   Push me
 </ForwardRef(forwardRef)>
@@ -43,8 +43,8 @@ exports[`renders correctly 1`] = `
       "mouseHover": "mouseHover",
     }
   }
-  data-color="default"
-  data-variant="default"
+  data-color="regular"
+  data-variant="regular"
 >
   Push me
 </ForwardRef(forwardRef)>
diff --git a/src/core/client/ui/components/v2/Modal/Modal.mdx b/src/core/client/ui/components/v2/Modal/Modal.mdx
index 61fd1c278..93bc3d11c 100644
--- a/src/core/client/ui/components/v2/Modal/Modal.mdx
+++ b/src/core/client/ui/components/v2/Modal/Modal.mdx
@@ -8,7 +8,6 @@ import { useState, useCallback } from "react";
 
 import Button from "../Button";
 import Card, { CardCloseButton } from "../Card";
-import Typography from "../Typography";
 import Flex from "../Flex";
 import HorizontalGutter from "../HorizontalGutter";
 import Modal from "./Modal";
@@ -35,9 +34,9 @@ import styles from "./Modal.mdx.css";
               <CardCloseButton onClick={hide} ref={firstFocusableRef} />
               <HorizontalGutter size="double">
                 <HorizontalGutter>
-                  <Typography variant="header2" id="modal-title">
+                  <h2 id="modal-title">
                     Are you sure you want to ban <strong>ButFirstCoffee</strong>?
-                  </Typography>
+                  </h2>
                   <Typography>
                     Once banned, this user will no longer be able to comment,
                     use reactions, or report comments.
diff --git a/src/core/client/ui/components/v2/Popover/Popover.mdx b/src/core/client/ui/components/v2/Popover/Popover.mdx
index 54434116b..14e558b3b 100644
--- a/src/core/client/ui/components/v2/Popover/Popover.mdx
+++ b/src/core/client/ui/components/v2/Popover/Popover.mdx
@@ -7,7 +7,6 @@ import { Playground } from "docz";
 import Popover from "./Popover";
 import Button from "../Button";
 import Flex from "../Flex";
-import Typography from "../Typography";
 import ButtonIcon from "../Button/ButtonIcon";
 import BaseButton from "../BaseButton";
 import ClickOutside from "../ClickOutside";
@@ -22,7 +21,7 @@ import Icon from "../Icon";
 <Playground>
   <Popover
     id="my-popover-1"
-    body={() => <Typography p={2}>This is the body</Typography>}
+    body={() => <h2>This is the body</h2>}
   >
     {({ toggleVisibility, ref }) => (
       <Button
@@ -45,7 +44,7 @@ import Icon from "../Icon";
     placement="top"
     body={({ toggleVisibility }) => (
       <Flex itemGutter="half">
-        <Typography p={2}>This is the body</Typography>
+        <h2>This is the body</h2>
         <Button onClick={toggleVisibility} size="small">
           <ButtonIcon>close</ButtonIcon>
         </Button>
@@ -72,9 +71,9 @@ import Icon from "../Icon";
     id="my-popover-1"
     body={({ toggleVisibility }) => (
       <ClickOutside onClickOutside={toggleVisibility}>
-        <Typography color="textLight" p={2}>
+        <h2>
           I am a Tooltip
-        </Typography>
+        </h2>
       </ClickOutside>
     )}
     dark
diff --git a/src/core/client/ui/theme/variables2.ts b/src/core/client/ui/theme/variables2.ts
index 708a53c98..e6a1dc026 100644
--- a/src/core/client/ui/theme/variables2.ts
+++ b/src/core/client/ui/theme/variables2.ts
@@ -314,7 +314,7 @@ const variables2 = {
     8: "60px",
     9: "84px",
   },
-  roundCorners: "2px",
+  roundCorners: "3px",
 };
 
 export default variables2;