diff --git a/src/Components/InlineConfirmationButton/InlineConfirmationButton.js b/src/Components/InlineConfirmationButton/InlineConfirmationButton.js
new file mode 100644
index 00000000..01e7cf4b
--- /dev/null
+++ b/src/Components/InlineConfirmationButton/InlineConfirmationButton.js
@@ -0,0 +1,217 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+
+import Block from '../Block/Block';
+import Button from '../Button/Button';
+import ButtonGroup from '../ButtonGroup/ButtonGroup';
+import PropTypes from 'prop-types';
+import Text from '../Text/Text';
+
+const propTypes = {
+  /**
+   * Additional classes to apply to container
+   */
+  className: PropTypes.string,
+  /**
+   * Disables the button, making it inoperable
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The text for the confirmation button, visible after the initial button is pressed.
+   * Clicking the button with this label with confirm the action and execute the `handleConfirmation` function.
+   */
+  confirmBtnLabel: PropTypes.string.isRequired,
+  /**
+   * Name of the [icon](/#/Components/Icon) to place before the button label text
+   */
+  icon: PropTypes.string,
+  /**
+   * Name of the [icon](/#/Components/Icon) to add after the button label text
+   */
+  iconAfterText: PropTypes.string,
+  /**
+   * The text for the rejection button, visible after the initial button is pressed.
+   * Clicking the button with this label will result in no action being taken.
+   */
+  rejectBtnLabel: PropTypes.string.isRequired,
+  /**
+   * The text displayed after the initial button is pressed.
+   */
+  confirmationText: PropTypes.string.isRequired,
+  /**
+   * Time in milliseconds, the confirmation message should
+   * stay visible until it hides itself
+   */
+  confirmDelay: PropTypes.number.isRequired,
+  /**
+   * The function to execute if the confirmation button is pressed.
+   */
+  handleConfirmation: PropTypes.func.isRequired,
+  /**
+   * Changes the size of the button, giving it more or less padding and font size
+   * @type {PropTypes.Requireable<Size>}
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Make the button have more visual weight to identify the primary call to action
+   */
+  primary: PropTypes.bool,
+  /**
+   * Indicate that the button will perform a destructive action
+   */
+  danger: PropTypes.bool,
+  /**
+   * Render the button as inline text without padding
+   */
+  plain: PropTypes.bool,
+  /**
+   * Button takes up the full width of its parent container
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Contents of the initial button
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Callback when button is pressed
+   */
+  onClick: PropTypes.func,
+  /**
+   * Callback when button receives focus
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Callback when focus leaves button
+   */
+  onBlur: PropTypes.func,
+};
+
+const defaultProps = {
+  disabled: false,
+  confirmBtnLabel: 'Yes',
+  confirmDelay: 5000,
+  rejectBtnLabel: 'No',
+  confirmationText: 'Are you sure?',
+};
+
+const variants = {
+  popUp: () => {
+    return {
+      opacity: [0, 1],
+      x: [24, 0],
+      transition: {
+        duration: 0.2,
+        delay: 0.1,
+      },
+    };
+  },
+};
+
+/**
+ * Inline confirmation buttons may be used when an additional
+ * response is required by the user to perform an action
+ * (deleting or changing the state). This is a less disruptive
+ * alternative to using a [Modal](/#/Components/Modal)
+ * to confirm an action, because the confirmation is displayed in
+ * the button's original on screen location.
+ */
+
+const InlineConfirmationButton = React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    confirmationText,
+    confirmBtnLabel,
+    confirmDelay,
+    danger,
+    disabled,
+    fullWidth,
+    handleConfirmation,
+    icon,
+    iconAfterText,
+    onClick,
+    onFocus,
+    onBlur,
+    plain,
+    primary,
+    rejectBtnLabel,
+    size,
+  } = props;
+  const [initiated, setInitiated] = useState(false);
+
+  const handleClick = () => {
+    setInitiated(true);
+
+    onClick && onClick();
+  };
+
+  useEffect(() => {
+    if (!initiated) return;
+
+    const cancelConfirm = setTimeout(() => {
+      setInitiated(false);
+    }, confirmDelay);
+    return () => {
+      clearTimeout(cancelConfirm);
+    };
+  }, [confirmDelay, initiated]);
+
+  if (!initiated) {
+    return (
+      <Button
+        size={size}
+        primary={primary || danger}
+        danger={danger}
+        disabled={disabled}
+        fullWidth={fullWidth}
+        icon={icon}
+        iconAfterText={iconAfterText}
+        onClick={handleClick}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        plain={plain}
+        className={className}
+        ref={ref}
+      >
+        {children}
+      </Button>
+    );
+  }
+  return (
+    // TODO: make style options configurable
+    <motion.div
+      style={{ opacity: 0 }}
+      animate="popUp"
+      variants={variants}
+      className={className}
+    >
+      <Block alignItems="center" itemSpacing="2">
+        <Text size={size === 'small' ? 6 : size === 'large' ? 4 : 5}>
+          {confirmationText}
+        </Text>
+        <ButtonGroup>
+          <Button size={size} onClick={() => setInitiated(false)}>
+            {rejectBtnLabel}
+          </Button>
+          <Button
+            size={size}
+            primary
+            danger={danger}
+            onClick={() => {
+              handleConfirmation();
+              setInitiated(false);
+            }}
+          >
+            {confirmBtnLabel}
+          </Button>
+        </ButtonGroup>
+      </Block>
+    </motion.div>
+  );
+});
+
+InlineConfirmationButton.propTypes = propTypes;
+InlineConfirmationButton.defaultProps = defaultProps;
+InlineConfirmationButton.displayName = 'InlineConfirmationButton';
+
+export default InlineConfirmationButton;
diff --git a/src/Components/InlineConfirmationButton/InlineConfirmationButton.test.js b/src/Components/InlineConfirmationButton/InlineConfirmationButton.test.js
new file mode 100644
index 00000000..6c541827
--- /dev/null
+++ b/src/Components/InlineConfirmationButton/InlineConfirmationButton.test.js
@@ -0,0 +1,136 @@
+import React from 'react';
+import { render, fireEvent, wait } from '@testing-library/react';
+
+import InlineConfirmationButton from './InlineConfirmationButton';
+
+describe('InlineConfirmationButton', () => {
+  it('renders expected elements with default values and wires up onClick and handleConfirmation', async () => {
+    const handlerFn = jest.fn();
+    const clickFn = jest.fn();
+    const label = 'the button label';
+
+    const { getByText } = render(
+      <InlineConfirmationButton
+        onClick={clickFn}
+        handleConfirmation={handlerFn}
+      >
+        {label}
+      </InlineConfirmationButton>,
+    );
+
+    expect(getByText(label)).toBeDefined();
+    fireEvent.click(getByText(label));
+    expect(clickFn).toHaveBeenCalled();
+    await wait(() =>
+      expect(getByText('Are you sure?')).toBeDefined(),
+    );
+    expect(getByText('No')).toBeDefined();
+    expect(getByText('Yes')).toBeDefined();
+    fireEvent.click(getByText('Yes'));
+    expect(handlerFn).toHaveBeenCalled();
+  });
+
+  it('renders expected elements with prop values and wires handleConfirmation function', async () => {
+    const handlerFn = jest.fn();
+    const confirmTxt = 'confirmation text';
+    const label = 'the button label';
+    const confirmBtnLabel = 'confirm';
+    const rejectBtnLabel = 'reject';
+
+    const { getByText } = render(
+      <InlineConfirmationButton
+        handleConfirmation={handlerFn}
+        confirmationText={confirmTxt}
+        confirmBtnLabel={confirmBtnLabel}
+        rejectBtnLabel={rejectBtnLabel}
+      >
+        {label}
+      </InlineConfirmationButton>,
+    );
+
+    expect(getByText(label)).toBeDefined();
+    fireEvent.click(getByText(label));
+    await wait(() => expect(getByText(confirmTxt)).toBeDefined());
+    expect(getByText(rejectBtnLabel)).toBeDefined();
+    expect(getByText(confirmBtnLabel)).toBeDefined();
+    fireEvent.click(getByText(confirmBtnLabel));
+    expect(handlerFn).toHaveBeenCalled();
+  });
+
+  it('renders initial button when confirmation is rejected', async () => {
+    const handlerFn = jest.fn();
+    const label = 'the button label';
+
+    const { getByText } = render(
+      <InlineConfirmationButton handleConfirmation={handlerFn}>
+        {label}
+      </InlineConfirmationButton>,
+    );
+
+    expect(getByText(label)).toBeDefined();
+    fireEvent.click(getByText(label));
+    await wait(() =>
+      expect(getByText('Are you sure?')).toBeDefined(),
+    );
+    fireEvent.click(getByText('No'));
+    expect(getByText(label)).toBeDefined();
+  });
+
+  it('applies the small size to the buttons and text', async () => {
+    const handlerFn = jest.fn();
+    const label = 'the button label';
+
+    const { getByText } = render(
+      <InlineConfirmationButton
+        size="small"
+        handleConfirmation={handlerFn}
+      >
+        {label}
+      </InlineConfirmationButton>,
+    );
+
+    expect(document.getElementsByClassName('btn-sm')).toHaveLength(1);
+    fireEvent.click(getByText(label));
+    expect(document.getElementsByClassName('fs-6')).toHaveLength(1);
+    expect(document.getElementsByClassName('btn-sm')).toHaveLength(2);
+  });
+
+  it('applies the large size to the buttons and text', async () => {
+    const handlerFn = jest.fn();
+    const label = 'the button label';
+
+    const { getByText } = render(
+      <InlineConfirmationButton
+        size="large"
+        handleConfirmation={handlerFn}
+      >
+        {label}
+      </InlineConfirmationButton>,
+    );
+
+    expect(document.getElementsByClassName('btn-lg')).toHaveLength(1);
+    fireEvent.click(getByText(label));
+    expect(document.getElementsByClassName('fs-4')).toHaveLength(1);
+    expect(document.getElementsByClassName('btn-lg')).toHaveLength(2);
+  });
+
+  it('renders initial button after waiting for the confirmDelay', async () => {
+    const handlerFn = jest.fn();
+    const label = 'the button label';
+
+    const { getByText } = render(
+      <InlineConfirmationButton
+        handleConfirmation={handlerFn}
+        confirmDelay={1000}
+      >
+        {label}
+      </InlineConfirmationButton>,
+    );
+    fireEvent.click(getByText(label));
+    await wait(() =>
+      expect(getByText('Are you sure?')).toBeDefined(),
+    );
+    // wait for original button to appear
+    await wait(() => expect(getByText(label)).toBeDefined());
+  });
+});
diff --git a/src/Components/InlineConfirmationButton/Readme.md b/src/Components/InlineConfirmationButton/Readme.md
new file mode 100644
index 00000000..295ba8ff
--- /dev/null
+++ b/src/Components/InlineConfirmationButton/Readme.md
@@ -0,0 +1,53 @@
+## Examples
+
+```js
+import Block from '../Block/Block';
+
+<Block direction="column" alignItems="start" itemSpacing="5">
+  <InlineConfirmationButton
+    handleConfirmation={() => alert('confirmed')}
+    danger
+  >
+    Danger Confirm
+  </InlineConfirmationButton>
+  <InlineConfirmationButton
+    handleConfirmation={() => alert('confirmed')}
+  >
+    Default Confirm
+  </InlineConfirmationButton>
+  <InlineConfirmationButton
+    handleConfirmation={() => alert('confirmed')}
+    primary
+  >
+    Primary Confirm
+  </InlineConfirmationButton>
+  <InlineConfirmationButton
+    handleConfirmation={() => alert('confirmed')}
+    plain
+  >
+    Plain Confirm
+  </InlineConfirmationButton>
+  <InlineConfirmationButton
+    handleConfirmation={() => alert('confirmed')}
+    plain
+    danger
+  >
+    Plain Danger Confirm
+  </InlineConfirmationButton>
+</Block>;
+```
+
+### Customize the Text
+
+```jsx
+<InlineConfirmationButton
+  confirmationText="Are you sure you want to delete this object?"
+  confirmBtnLabel="Heck yeah, delete it!"
+  rejectBtnLabel="Nope"
+  confirmDelay={7000}
+  handleConfirmation={() => alert('confirmed')}
+  danger
+>
+  Delete Object
+</InlineConfirmationButton>
+```
diff --git a/src/Components/InlineConfirmationButton/stories.js b/src/Components/InlineConfirmationButton/stories.js
new file mode 100644
index 00000000..a5840300
--- /dev/null
+++ b/src/Components/InlineConfirmationButton/stories.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import InlineConfirmationButton from './InlineConfirmationButton';
+import Block from '../Block/Block';
+
+storiesOf('InlineConfirm', module).add('all', () => (
+  <Block displayBlock itemSpacing="5">
+    <div>
+      <InlineConfirmationButton
+        size="large"
+        confirmationText="This will create a new widget. Are you sure?"
+        handleConfirmation={action('confirmed')}
+      >
+        default large
+      </InlineConfirmationButton>
+    </div>
+    <div>
+      <InlineConfirmationButton
+        confirmationText="This will create a new widget. Are you sure?"
+        handleConfirmation={action('confirmed')}
+      >
+        default medium
+      </InlineConfirmationButton>
+    </div>
+    <div>
+      <InlineConfirmationButton
+        size="small"
+        confirmationText="This will create a new widget. Are you sure?"
+        handleConfirmation={action('confirmed')}
+      >
+        default small
+      </InlineConfirmationButton>
+    </div>
+    <div>
+      <InlineConfirmationButton
+        size="large"
+        primary
+        confirmationText="This will create a new widget. Are you sure?"
+        handleConfirmation={action('confirmed')}
+      >
+        primary large
+      </InlineConfirmationButton>
+    </div>
+    <div>
+      <InlineConfirmationButton
+        primary
+        confirmationText="This will create a new widget. Are you sure?"
+        handleConfirmation={action('confirmed')}
+      >
+        primary medium
+      </InlineConfirmationButton>
+    </div>
+    <div>
+      <InlineConfirmationButton
+        primary
+        size="small"
+        confirmationText="This will create a new widget. Are you sure?"
+        handleConfirmation={action('confirmed')}
+      >
+        primary small
+      </InlineConfirmationButton>
+    </div>
+
+    <div>
+      <InlineConfirmationButton
+        size="large"
+        danger
+        confirmationText="This will delete a new widget. Press delete to confirm."
+        handleConfirmation={action('delete confirmed')}
+        confirmBtnLabel="delete"
+      >
+        destructive large
+      </InlineConfirmationButton>
+    </div>
+    <div>
+      <InlineConfirmationButton
+        danger
+        confirmationText="This will delete a new widget. Press delete to confirm."
+        handleConfirmation={action('delete confirmed')}
+        confirmBtnLabel="delete"
+      >
+        destructive medium
+      </InlineConfirmationButton>
+    </div>
+    <div>
+      <InlineConfirmationButton
+        size="small"
+        danger
+        confirmationText="This will delete a new widget. Press delete to confirm."
+        handleConfirmation={action('delete confirmed')}
+        confirmBtnLabel="delete"
+      >
+        destructive small
+      </InlineConfirmationButton>
+    </div>
+    <div>
+      <InlineConfirmationButton
+        confirmationText="Are you sure?"
+        handleConfirmation={action('confirmed')}
+        icon="add-bold"
+        iconAfterText="question-circle"
+      >
+        With icons
+      </InlineConfirmationButton>
+    </div>
+  </Block>
+));