diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -141,21 +141,23 @@
 }
 
 div.failedSend {
-  text-transform: uppercase;
   display: flex;
   justify-content: flex-end;
   flex-shrink: 0;
-  font-size: 14px;
   margin-right: 30px;
   padding-bottom: 6px;
 }
-span.deliveryFailed {
+
+.deliveryFailed {
+  text-transform: uppercase;
+  font-size: 14px;
   padding: 0 3px;
-  color: #555555;
+  color: var(--fg);
 }
-a.retrySend {
-  padding: 0 3px;
-  cursor: pointer;
+
+.retryButtonText {
+  text-transform: uppercase;
+  font-size: 14px;
 }
 
 div.messageBox > div.imageGrid {
diff --git a/web/chat/chat-thread-composer.css b/web/chat/chat-thread-composer.css
--- a/web/chat/chat-thread-composer.css
+++ b/web/chat/chat-thread-composer.css
@@ -47,21 +47,23 @@
   flex-direction: column;
   overflow: auto;
   padding: 0 12px 8px;
+  list-style-type: none;
 }
 
-li.searchResultsItem {
+.searchResultsItem {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  cursor: pointer;
 }
 
-li.searchResultsItem:hover {
+.searchResultsItem:hover {
   background-color: var(--thread-creation-search-item-bg-hover);
 }
 
+.searchResultsButton {
+  justify-content: space-between;
+  flex: 1;
+  padding: 8px 12px;
+}
+
 div.userName {
   color: var(--fg);
 }
diff --git a/web/chat/chat-thread-composer.react.js b/web/chat/chat-thread-composer.react.js
--- a/web/chat/chat-thread-composer.react.js
+++ b/web/chat/chat-thread-composer.react.js
@@ -8,6 +8,7 @@
 import { threadIsPending } from 'lib/shared/thread-utils';
 import type { AccountUserInfo, UserListItem } from 'lib/types/user-types';
 
+import Button from '../components/button.react';
 import Label from '../components/label.react';
 import Search from '../components/search.react';
 import type { InputState } from '../input/input-state';
@@ -92,13 +93,15 @@
     return (
       <ul className={css.searchResultsContainer}>
         {userListItems.map((userSearchResult: UserListItem) => (
-          <li
-            className={css.searchResultsItem}
-            key={userSearchResult.id}
-            onClick={() => onSelectUserFromSearch(userSearchResult.id)}
-          >
-            <div className={css.userName}>{userSearchResult.username}</div>
-            <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
+          <li key={userSearchResult.id} className={css.searchResultsItem}>
+            <Button
+              variant="text"
+              onClick={() => onSelectUserFromSearch(userSearchResult.id)}
+              className={css.searchResultsButton}
+            >
+              <div className={css.userName}>{userSearchResult.username}</div>
+              <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
+            </Button>
           </li>
         ))}
       </ul>
diff --git a/web/chat/failed-send.react.js b/web/chat/failed-send.react.js
--- a/web/chat/failed-send.react.js
+++ b/web/chat/failed-send.react.js
@@ -12,6 +12,7 @@
 } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
+import Button from '../components/button.react';
 import { type InputState, InputStateContext } from '../input/input-state';
 import { useSelector } from '../redux/redux-utils';
 import css from './chat-message-list.css';
@@ -79,28 +80,23 @@
   }
 
   render() {
-    const threadColor = {
-      color: `#${this.props.threadInfo.color}`,
-    };
     return (
       <div className={css.failedSend}>
-        <span>Delivery failed.</span>
-        <a
-          onClick={this.retrySend}
-          className={{
-            ...css.retrySend,
-            ...threadColor,
+        <span className={css.deliveryFailed}>Delivery failed.</span>
+        <Button
+          variant="text"
+          buttonColor={{
+            color: `#${this.props.threadInfo.color}`,
           }}
+          onClick={this.retrySend}
         >
-          {'Retry?'}
-        </a>
+          <span className={css.retryButtonText}>Retry?</span>
+        </Button>
       </div>
     );
   }
 
-  retrySend = (event: SyntheticEvent<HTMLAnchorElement>) => {
-    event.stopPropagation();
-
+  retrySend = () => {
     const { inputState } = this.props;
     invariant(inputState, 'inputState should be set in FailedSend');
 
diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -4,6 +4,7 @@
 
   position: relative;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   border: var(--border-width) solid transparent;
@@ -64,8 +65,16 @@
 }
 
 .round {
+  background: var(--settings-btn-bg);
   width: 30px;
   height: 30px;
   border-radius: 50%;
   padding: 0;
 }
+
+.text {
+  background: transparent;
+  white-space: nowrap;
+  padding: 0;
+  border: none;
+}
diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -5,7 +5,7 @@
 
 import css from './button.css';
 
-export type ButtonVariant = 'filled' | 'outline' | 'round';
+export type ButtonVariant = 'filled' | 'outline' | 'round' | 'text';
 export type ButtonColor = {
   +backgroundColor?: string,
   +color?: string,
@@ -49,12 +49,12 @@
 
   const btnCls = classnames(css.btn, css[variant]);
 
-  let style;
+  let style = {};
   if (buttonColor) {
     style = buttonColor;
   } else if (variant === 'outline') {
     style = buttonThemes.outline;
-  } else {
+  } else if (variant === 'filled' || variant === 'round') {
     style = buttonThemes.standard;
   }
 
diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -41,14 +41,9 @@
   color: var(--fg);
 }
 
-.button {
+.buttonText {
   color: var(--account-button-color);
-  background-color: transparent;
-  font-size: var(--m-font-16);
-  border: none;
-  cursor: pointer;
   line-height: var(--line-height-text);
-  white-space: nowrap;
 }
 
 .passwordContainer {
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -10,6 +10,7 @@
   useServerCall,
 } from 'lib/utils/action-utils';
 
+import Button from '../components/button.react';
 import { useSelector } from '../redux/redux-utils';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './account-settings.css';
@@ -62,9 +63,9 @@
               <span className={css.logoutLabel}>{'Logged in as '}</span>
               <span className={css.username}>{username}</span>
             </p>
-            <button className={css.button} onClick={logOutUser}>
-              Log out
-            </button>
+            <Button variant="text" onClick={logOutUser}>
+              <p className={css.buttonText}>Log out</p>
+            </Button>
           </li>
           <li>
             <span>Password</span>
@@ -80,15 +81,15 @@
           </li>
           <li>
             <span>Friend List</span>
-            <button className={css.button} onClick={openFriendList}>
-              See List
-            </button>
+            <Button variant="text" onClick={openFriendList}>
+              <p className={css.buttonText}>See List</p>
+            </Button>
           </li>
           <li>
             <span>Block List</span>
-            <button className={css.button} onClick={openBlockList}>
-              See List
-            </button>
+            <Button variant="text" onClick={openBlockList}>
+              <p className={css.buttonText}>See List</p>
+            </Button>
           </li>
         </ul>
       </div>
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -1,17 +1,21 @@
 // @flow
 
-import classnames from 'classnames';
 import * as React from 'react';
 
 import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt';
 import { userRelationshipStatus } from 'lib/types/relationship-types';
 
+import Button from '../../components/button.react';
 import MenuItem from '../../components/menu-item.react';
 import Menu from '../../components/menu.react';
 import SWMansionIcon from '../../SWMansionIcon.react';
 import css from './user-list-row.css';
 import type { UserRowProps } from './user-list.react';
 
+const dangerButtonColor = {
+  color: 'var(--btn-bg-danger)',
+};
+
 function FriendListRow(props: UserRowProps): React.Node {
   const { userInfo, onMenuVisibilityChange } = props;
 
@@ -19,12 +23,14 @@
   const buttons = React.useMemo(() => {
     if (userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT) {
       return (
-        <button
-          className={classnames([css.button, css.destructive])}
+        <Button
+          variant="text"
+          className={css.button}
+          buttonColor={dangerButtonColor}
           onClick={unfriendUser}
         >
           Cancel request
-        </button>
+        </Button>
       );
     }
     if (
@@ -32,15 +38,17 @@
     ) {
       return (
         <>
-          <button className={css.button} onClick={friendUser}>
+          <Button variant="text" className={css.button} onClick={friendUser}>
             Accept
-          </button>
-          <button
-            className={classnames([css.button, css.destructive])}
+          </Button>
+          <Button
+            variant="text"
+            className={css.button}
+            buttonColor={dangerButtonColor}
             onClick={unfriendUser}
           >
             Reject
-          </button>
+          </Button>
         </>
       );
     }
diff --git a/web/settings/relationship/user-list-row.css b/web/settings/relationship/user-list-row.css
--- a/web/settings/relationship/user-list-row.css
+++ b/web/settings/relationship/user-list-row.css
@@ -24,14 +24,6 @@
   font-size: var(--s-font-14);
   line-height: var(--line-height-text);
   color: var(--btn-bg-filled);
-  cursor: pointer;
-  background: none;
-  border: none;
-  white-space: nowrap;
-}
-
-.destructive {
-  color: var(--btn-bg-danger);
 }
 
 .edit_menu {