diff --git a/app/soapbox/components/ui/toast/toast.tsx b/app/soapbox/components/ui/toast/toast.tsx
index 981df1132..9668f4e4a 100644
--- a/app/soapbox/components/ui/toast/toast.tsx
+++ b/app/soapbox/components/ui/toast/toast.tsx
@@ -142,4 +142,7 @@ const Toast = (props: IToast) => {
   );
 };
 
-export default Toast;
\ No newline at end of file
+export {
+  Toast as default,
+  Toast,
+};
\ No newline at end of file
diff --git a/stories/Toast.stories.tsx b/stories/Toast.stories.tsx
new file mode 100644
index 000000000..69ab4c75b
--- /dev/null
+++ b/stories/Toast.stories.tsx
@@ -0,0 +1,37 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+
+import { Toast } from 'soapbox/components/ui';
+
+export default {
+  title: 'UI/Toast',
+  component: Toast,
+  argTypes: {
+    t: { defaultValue: { visible: true, dismiss: () => {} }, table: { disable: true } },
+    message: { type: 'string', defaultValue: 'Toast' },
+    type: { defaultValue: 'success' },
+    action: { table: { disable: true } },
+  },
+} as ComponentMeta<typeof Toast>;
+
+const Template: ComponentStory<typeof Toast> = (args) => (
+  <IntlProvider locale='en'>
+    <Toast {...args} />
+  </IntlProvider>
+);
+
+export const Success = Template.bind({});
+Success.args = {
+  type: 'success',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  type: 'error',
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  type: 'info',
+};
\ No newline at end of file