diff --git a/src/components/index.js b/src/components/index.js
index fe2ec843..9a911a52 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -14,6 +14,7 @@ export { default as PageTitle } from './ui/PageTitle';
 export { default as Paragraph } from './ui/Paragraph';
 export { default as Select } from './ui/Select';
 export { default as SkipLink } from './ui/SkipLink';
+export { default as Snackbar } from './ui/Snackbar';
 export { default as Tabs } from './ui/Tabs';
 export { default as Tags } from './ui/Tags';
 export { default as TextField } from './ui/TextField';
diff --git a/src/components/ui/Snackbar/README.md b/src/components/ui/Snackbar/README.md
new file mode 100644
index 00000000..36baf2d2
--- /dev/null
+++ b/src/components/ui/Snackbar/README.md
@@ -0,0 +1,19 @@
+A snackbar is a non-disruptive message that appears to provide feedback to the user.
+
+```jsx
+import { Button } from '@octopusthink/nautilus';
+<div>
+    <div style={{position: 'relative', border: '1px solid white' }}>
+        <Snackbar>This just in: Scotland is rainy</Snackbar>
+    </div>
+    <div style={{position: 'relative', border: '1px solid white' }}>
+        <Snackbar action="#" actionLabel="Enable sunshine" onDismiss="#">This just in: Scotland is rainy</Snackbar>
+    </div>
+    <div style={{position: 'relative', border: '1px solid white' }}>
+        <Snackbar inverse action="#" actionLabel="Enable sunshine" onDismiss="#">This just in: Scotland is rainy and sometimes it has some real long text strings too</Snackbar>
+    </div>
+    <div style={{position: 'relative', border: '1px solid white' }}>
+        <Snackbar inverse action="#" actionLabel="Enable sunshine and also this can be hella long too if you want" onDismiss="#">This just in: Scotland is rainy and sometimes it has some real long text strings too</Snackbar>
+    </div>
+</div>
+```
diff --git a/src/components/ui/Snackbar/index.js b/src/components/ui/Snackbar/index.js
new file mode 100644
index 00000000..4aaae08a
--- /dev/null
+++ b/src/components/ui/Snackbar/index.js
@@ -0,0 +1,144 @@
+import { css } from '@emotion/react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { bodyStyles, toUnits } from '../../../styles';
+import { useTheme } from '../../../themes';
+import Button from '../Button';
+import Paragraph from '../Paragraph';
+
+const Snackbar = (props) => {
+  const theme = useTheme();
+  const { action, actionLabel, children, inverse, onDismiss, unstyled, ...otherProps } = props;
+
+  return (
+    <div
+      css={
+        unstyled
+          ? undefined
+          : css`
+              margin: 0;
+              background-color: ${theme.components.Snackbar.backgroundColor};
+              color: ${theme.components.Snackbar.textColor};
+              padding: ${toUnits(theme.spacing.padding.medium)}
+                ${toUnits(theme.spacing.padding.large)};
+              //border-radius: ${toUnits(theme.radii.small)};
+              //box-shadow: ${theme.shadows.small};
+              border-radius: ${toUnits(theme.spacing.padding.small)};
+              //box-shadow: 0 0 0 0.4rem ${theme.colors.text.dark};
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              //position: absolute;
+              //flex-wrap: wrap;
+              max-width: 100%;
+              position: absolute;
+              top: ${toUnits(theme.spacing.margin.medium)};
+              left: ${toUnits(theme.spacing.margin.medium)};
+              margin-bottom: 40px;
+
+              ${inverse &&
+              css`
+                background-color: ${theme.components.Snackbar.backgroundColorInverse};
+                color: ${theme.components.Snackbar.textColorInverse};
+              `}
+            `
+      }
+      {...otherProps}
+    >
+      <Paragraph
+        unstyled={unstyled}
+        noMargin
+        css={
+          unstyled
+            ? undefined
+            : css`
+                color: ${theme.components.Snackbar.textColor};
+                ${inverse &&
+                css`
+                  color: ${theme.components.Snackbar.textColorInverse};
+                `}
+              `
+        }
+      >
+        {children}
+      </Paragraph>
+
+      {action && (
+        <Button
+          unstyled={unstyled}
+          minimal
+          inverse
+          noMargin
+          onClick={action}
+          css={
+            unstyled
+              ? undefined
+              : css`
+                  color: ${theme.components.Snackbar.actionLinkColor};
+                  padding-left: ${toUnits(theme.spacing.padding.small)};
+                  padding-right: ${toUnits(theme.spacing.padding.medium)};
+                  text-decoration: underline;
+
+                  ${inverse &&
+                  css`
+                    color: ${theme.components.Snackbar.actionLinkColorInverse};
+                  `}
+                `
+          }
+        >
+          {actionLabel}
+        </Button>
+      )}
+      <Button
+        minimal
+        inverse
+        unstyled={unstyled}
+        iconOnly="x"
+        onClick={onDismiss}
+        css={
+          unstyled
+            ? undefined
+            : css`
+                color: ${theme.components.Snackbar.textColor};
+                padding: 0;
+                margin: 0;
+                position: absolute;
+                top: ${toUnits(theme.spacing.padding.small)};
+                right: ${toUnits(theme.spacing.padding.small)};
+
+                ${inverse &&
+                css`
+                  color: ${theme.components.Snackbar.textColorInverse};
+                `}
+              `
+        }
+      />
+    </div>
+  );
+};
+
+Snackbar.defaultProps = {
+  action: undefined,
+  actionLabel: undefined,
+  children: undefined,
+  inverse: false,
+  onDismiss: undefined,
+  unstyled: false,
+};
+
+Snackbar.propTypes = {
+  /** Callback action to run when the action button is clicked. */
+  action: PropTypes.func,
+  /** Label for the (optional) action button. */
+  actionLabel: PropTypes.string,
+  /** @ignore */
+  children: PropTypes.node,
+  /** Inverse container and text colour. Used for dark backgrounds. */
+  inverse: PropTypes.bool,
+  /** Callback action to run when the Snackbar is dismissed */
+  onDismiss: PropTypes.func,
+  /* @ignore Don't output any CSS styles. */
+  unstyled: PropTypes.bool,
+};
+
+export default Snackbar;
diff --git a/src/themes/nautilus/index.js b/src/themes/nautilus/index.js
index e4c5feda..62530b4a 100644
--- a/src/themes/nautilus/index.js
+++ b/src/themes/nautilus/index.js
@@ -220,14 +220,23 @@ export const theme = {
           strokeWidth: 1.125,
         },
       },
+    },
 
-      // TODO: implement these!
-      Tag: {
-        capitalization: 'uppercase', // uppercase, lowercase, sentence, title
-        colorPosition: 'background', // background or border
-        borderRadius: 0,
-        padding: 'toUnits(theme.spacing.padding.xSmall) toUnits(theme.spacing.padding.small)',
-      },
+    // TODO: implement these!
+    Tag: {
+      capitalization: 'uppercase', // uppercase, lowercase, sentence, title
+      colorPosition: 'background', // background or border
+      borderRadius: 0,
+      padding: 'toUnits(theme.spacing.padding.xSmall) toUnits(theme.spacing.padding.small)',
+    },
+
+    Snackbar: {
+      backgroundColor: colors.black,
+      textColor: colors.grey100,
+      actionLinkColor: colors.pink100,
+      backgroundColorInverse: colors.grey100,
+      textColorInverse: colors.black,
+      actionLinkColorInverse: colors.grey900,
     },
   },