2 files changed, 71 insertions, 0 deletions
diff --git a/src/view/screens/Storybook/Toasts.tsx b/src/view/screens/Storybook/Toasts.tsx
new file mode 100644
index 000000000..714afdfbd
--- /dev/null
+++ b/src/view/screens/Storybook/Toasts.tsx
@@ -0,0 +1,69 @@
+import {View} from 'react-native'
+
+import {atoms as a} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {H1} from '#/components/Typography'
+import * as Toast from '#/view/com/util/Toast'
+import * as ToastHelpers from '#/view/com/util/ToastHelpers'
+
+export function Toasts() {
+  return (
+    <View style={[a.gap_md]}>
+      <H1>Toasts</H1>
+
+      <View style={[a.gap_sm]}>
+        <Button
+          variant="solid"
+          color="primary"
+          size="small"
+          label="Show success toast"
+          onPress={() =>
+            Toast.show('Operation completed successfully!', 'success')
+          }>
+          <ButtonText>Success!</ButtonText>
+        </Button>
+
+        <Button
+          variant="solid"
+          color="negative"
+          size="small"
+          label="Show error toast"
+          onPress={() => Toast.show('Something went wrong!', 'error')}>
+          <ButtonText>Error</ButtonText>
+        </Button>
+
+        <Button
+          variant="solid"
+          color="secondary"
+          size="small"
+          label="Show warning toast"
+          onPress={() => Toast.show('Please check your input', 'warning')}>
+          <ButtonText>Warning</ButtonText>
+        </Button>
+
+        <Button
+          variant="solid"
+          color="secondary"
+          size="small"
+          label="Show info toast"
+          onPress={() => Toast.show("Here's some helpful information", 'info')}>
+          <ButtonText>Info </ButtonText>
+        </Button>
+
+        <Button
+          variant="outline"
+          color="secondary"
+          size="small"
+          label="Show toast with long message"
+          onPress={() =>
+            Toast.show(
+              'This is a longer message to test how the toast handles multiple lines of text content.',
+              'info',
+            )
+          }>
+          <ButtonText>Long Message </ButtonText>
+        </Button>
+      </View>
+    </View>
+  )
+}
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index a6c2ecdde..afcc1c4e7 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/src/view/screens/Storybook/index.tsx
@@ -20,6 +20,7 @@ import {Settings} from './Settings'
 import {Shadows} from './Shadows'
 import {Spacing} from './Spacing'
 import {Theming} from './Theming'
+import {Toasts} from './Toasts'
 import {Typography} from './Typography'
 
 export function Storybook() {
@@ -122,6 +123,7 @@ function StorybookInner() {
             <Breakpoints />
             <Dialogs />
             <Admonitions />
+            <Toasts />
             <Settings />
 
             <Button