diff --git a/ui/app/pages/token/actionable-message/actionable-message.js b/ui/app/pages/token/actionable-message/actionable-message.js
new file mode 100644
index 000000000..d74179d11
--- /dev/null
+++ b/ui/app/pages/token/actionable-message/actionable-message.js
@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default function ActionableMessage ({
+ shown = true,
+ message = '',
+ actions = [],
+ className = '',
+}) {
+ return (
+ shown
+ ? (
+
+
+ {message}
+
+
+ {
+ actions.map(({ label, onClick, actionClassName }, index) => (
+
+ {label}
+
+ ))
+ }
+
+
+ )
+ : null
+ )
+}
+
+ActionableMessage.propTypes = {
+ shown: PropTypes.bool,
+ message: PropTypes.string.isRequired,
+ actions: PropTypes.shape({
+ label: PropTypes.string,
+ onClick: PropTypes.func,
+ actionClassName: PropTypes.string,
+ }),
+ className: PropTypes.string,
+}
diff --git a/ui/app/pages/token/actionable-message/actionable-message.stories.js b/ui/app/pages/token/actionable-message/actionable-message.stories.js
new file mode 100644
index 000000000..d39747377
--- /dev/null
+++ b/ui/app/pages/token/actionable-message/actionable-message.stories.js
@@ -0,0 +1,69 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { text, boolean } from '@storybook/addon-knobs/react'
+import ActionableMessage from '.'
+
+export default {
+ title: 'ActionableMessage',
+}
+
+export const NoAction = () => (
+
+)
+
+export const OneAction = () => (
+
+)
+
+export const TwoActionsWithClassNames = () => (
+
+)
+
+export const OneActionWithAClass = () => (
+
+)
diff --git a/ui/app/pages/token/actionable-message/index.js b/ui/app/pages/token/actionable-message/index.js
new file mode 100644
index 000000000..c6edbc359
--- /dev/null
+++ b/ui/app/pages/token/actionable-message/index.js
@@ -0,0 +1 @@
+export { default } from './actionable-message'
diff --git a/ui/app/pages/token/actionable-message/index.scss b/ui/app/pages/token/actionable-message/index.scss
new file mode 100644
index 000000000..eabd2001e
--- /dev/null
+++ b/ui/app/pages/token/actionable-message/index.scss
@@ -0,0 +1,41 @@
+.actionable-message {
+ background: $Blue-000;
+ border: 1px solid $Blue-200;
+ border-radius: 8px;
+ padding: 8px 28px 8px 28px;
+ margin-top: 18px;
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+
+ @include H7;
+
+ &__message {
+ color: $Blue-600;
+ }
+
+ &__actions {
+ display: flex;
+ width: 80%;
+ justify-content: space-evenly;
+ align-items: center;
+ margin-top: 10px;
+ color: $Blue-600;
+ }
+
+ &__action {
+ font-weight: bold;
+ cursor: pointer;
+ }
+}
+
+.actionable-message--warning {
+ background: $Yellow-100;
+ border: 1px solid $Yellow-500;
+ justify-content: center;
+
+ .actionable-message__message,
+ .actionable-message__action {
+ color: $Black-100;
+ }
+}
diff --git a/ui/app/pages/token/index.scss b/ui/app/pages/token/index.scss
index 01c548281..9cf06a407 100644
--- a/ui/app/pages/token/index.scss
+++ b/ui/app/pages/token/index.scss
@@ -1,2 +1,3 @@
@import 'fee-card/index';
@import 'exchange-rate-display/index';
+@import 'actionable-message/index';