diff --git a/ui/app/components/ui/chip/chip.js b/ui/app/components/ui/chip/chip.js
new file mode 100644
index 000000000..c2281f7d4
--- /dev/null
+++ b/ui/app/components/ui/chip/chip.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { omit } from 'lodash'
+import Typography from '../typography'
+import { COLORS } from '../../../helpers/constants/design-system'
+
+export default function Chip({
+  className,
+  children,
+  borderColor = COLORS.UI1,
+  label,
+  labelProps = {},
+  leftIcon,
+  rightIcon,
+  onClick,
+}) {
+  return (
+    <div
+      onClick={onClick}
+      className={classnames(className, 'chip', {
+        'chip--with-left-icon': Boolean(leftIcon),
+        'chip--with-right-icon': Boolean(rightIcon),
+        [`chip--${borderColor}`]: true,
+      })}
+      role="button"
+      tabIndex={0}
+    >
+      {leftIcon && <div className="chip__left-icon">{leftIcon}</div>}
+      {children ?? (
+        <Typography
+          className="chip__label"
+          variant="h6"
+          tag="span"
+          color="UI4"
+          {...labelProps}
+        >
+          {label}
+        </Typography>
+      )}
+      {rightIcon && <div className="chip__right-icon">{rightIcon}</div>}
+    </div>
+  )
+}
+
+Chip.propTypes = {
+  borderColor: PropTypes.oneOf(Object.values(COLORS)),
+  label: PropTypes.string,
+  children: PropTypes.node,
+  labelProps: PropTypes.shape(omit(Typography.propTypes, ['className'])),
+  leftIcon: PropTypes.node,
+  rightIcon: PropTypes.node,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+}
diff --git a/ui/app/components/ui/chip/chip.scss b/ui/app/components/ui/chip/chip.scss
new file mode 100644
index 000000000..911f5a8ce
--- /dev/null
+++ b/ui/app/components/ui/chip/chip.scss
@@ -0,0 +1,48 @@
+@use "design-system";
+
+.chip {
+  $self: &;
+
+  border-radius: 100px;
+  border: 1px solid design-system.$ui-1;
+  padding: 8px 16px;
+  margin: 0 4px;
+  display: flex;
+  align-items: center;
+  width: max-content;
+
+  &__left-icon,
+  &__right-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  @each $variant, $color in design-system.$color-map {
+    &--#{$variant} {
+      border-color: $color;
+    }
+  }
+
+  &--with-left-icon,
+  &--with-right-icon {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  &--with-left-icon {
+    padding-left: 4px;
+
+    #{$self}__label {
+      margin-left: 8px;
+    }
+  }
+
+
+
+  &--with-right-icon {
+    padding-right: 4px;
+    #{$self}__label {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/ui/app/components/ui/chip/chip.stories.js b/ui/app/components/ui/chip/chip.stories.js
new file mode 100644
index 000000000..e2f3fd5df
--- /dev/null
+++ b/ui/app/components/ui/chip/chip.stories.js
@@ -0,0 +1,82 @@
+/* eslint-disable react/prop-types */
+
+import React from 'react'
+import { select, text } from '@storybook/addon-knobs'
+import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'
+import ApproveIcon from '../icon/approve-icon.component'
+import Identicon from '../identicon/identicon.component'
+import Chip from '.'
+
+export default {
+  title: 'Chip',
+}
+
+export const Plain = ({
+  leftIcon,
+  rightIcon,
+  label = 'Hello',
+  borderColor = COLORS.UI1,
+  fontColor = COLORS.BLACK,
+}) => (
+  <Chip
+    leftIcon={leftIcon}
+    rightIcon={rightIcon}
+    label={text('label', label)}
+    labelProps={{
+      color: select('color', COLORS, fontColor),
+      variant: select('typography', TYPOGRAPHY, TYPOGRAPHY.H6),
+    }}
+    borderColor={select('borderColor', COLORS, borderColor)}
+  />
+)
+
+export const WithLeftIcon = () => (
+  <Plain
+    label="Done!"
+    borderColor={COLORS.SUCCESS3}
+    fontColor={COLORS.SUCCESS3}
+    leftIcon={<ApproveIcon size={24} color="#4cd964" />}
+  />
+)
+
+export const WithRightIcon = () => (
+  <Plain
+    label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+    borderColor={COLORS.UI4}
+    fontColor={COLORS.UI4}
+    rightIcon={
+      <Identicon
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+        diameter={25}
+      />
+    }
+  />
+)
+
+export const WithBothIcons = () => (
+  <Plain
+    label="Account 1"
+    borderColor={COLORS.UI4}
+    fontColor={COLORS.UI4}
+    rightIcon={
+      <svg
+        width="10"
+        height="6"
+        viewBox="0 0 10 6"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.45759 0.857142C9.45759 0.785714 9.42188 0.705357 9.3683 0.651785L8.92188 0.205357C8.8683 0.151785 8.78795 0.116071 8.71652 0.116071C8.64509 0.116071 8.56473 0.151785 8.51116 0.205357L5.00223 3.71429L1.4933 0.205357C1.43973 0.151785 1.35938 0.116071 1.28795 0.116071C1.20759 0.116071 1.13616 0.151785 1.08259 0.205357L0.636161 0.651785C0.582589 0.705357 0.546875 0.785714 0.546875 0.857142C0.546875 0.928571 0.582589 1.00893 0.636161 1.0625L4.79688 5.22321C4.85045 5.27679 4.9308 5.3125 5.00223 5.3125C5.07366 5.3125 5.15402 5.27679 5.20759 5.22321L9.3683 1.0625C9.42188 1.00893 9.45759 0.928571 9.45759 0.857142Z"
+          fill="#24292E"
+        />
+      </svg>
+    }
+    leftIcon={
+      <Identicon
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+        diameter={25}
+      />
+    }
+  />
+)
diff --git a/ui/app/components/ui/chip/index.js b/ui/app/components/ui/chip/index.js
new file mode 100644
index 000000000..54029bc48
--- /dev/null
+++ b/ui/app/components/ui/chip/index.js
@@ -0,0 +1 @@
+export { default } from './chip'
diff --git a/ui/app/components/ui/ui-components.scss b/ui/app/components/ui/ui-components.scss
index 3d5e5446c..f7f18b0a2 100644
--- a/ui/app/components/ui/ui-components.scss
+++ b/ui/app/components/ui/ui-components.scss
@@ -7,6 +7,7 @@
 @import 'button/buttons';
 @import 'card/index';
 @import 'check-box/index';
+@import 'chip/chip';
 @import 'circle-icon/index';
 @import 'currency-display/index';
 @import 'currency-input/index';
diff --git a/ui/app/css/design-system/colors.scss b/ui/app/css/design-system/colors.scss
index a1383b661..b447315f8 100644
--- a/ui/app/css/design-system/colors.scss
+++ b/ui/app/css/design-system/colors.scss
@@ -136,4 +136,5 @@ $color-map: (
   'kovan': $kovan,
   'rinkeby': $rinkeby,
   'goerli': $goerli,
+  'transparent': transparent,
 );
diff --git a/ui/app/helpers/constants/design-system.js b/ui/app/helpers/constants/design-system.js
index 6d6512eba..0d1a42eea 100644
--- a/ui/app/helpers/constants/design-system.js
+++ b/ui/app/helpers/constants/design-system.js
@@ -25,6 +25,7 @@ export const COLORS = {
   KOVAN: 'kovan',
   RINKEBY: 'rinkeby',
   GOERLI: 'goerli',
+  TRANSPARENT: 'transparent',
 }
 
 export const TYPOGRAPHY = {