From 4542a09ab73642be7386cfe51e4644d4d5740a80 Mon Sep 17 00:00:00 2001
From: vineyardbovines <spencerfpope@gmail.com>
Date: Mon, 13 Apr 2026 08:25:18 -0400
Subject: [PATCH] add storybook example

---
 src/view/screens/Storybook/Dialogs.tsx | 46 ++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
index 99bcef7840..67cf19aa60 100644
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -5,6 +5,8 @@ import {useDialogStateControlContext} from '#/state/dialogs'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
+import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
 import {H3, P, Text} from '#/components/Typography'
@@ -14,6 +16,8 @@ export function Dialogs() {
   const scrollable = Dialog.useDialogControl()
   const basic = Dialog.useDialogControl()
   const prompt = Prompt.usePromptControl()
+  const alertPrompt = Prompt.usePromptControl()
+  const alertPromptCustom = Prompt.usePromptControl()
   const withMenu = Dialog.useDialogControl()
   const testDialog = Dialog.useDialogControl()
   const {closeAllDialogs} = useDialogStateControlContext()
@@ -111,6 +115,24 @@ export function Dialogs() {
         <ButtonText>Open prompt</ButtonText>
       </Button>
 
+      <Button
+        variant="solid"
+        color="negative"
+        size="small"
+        onPress={() => alertPrompt.open()}
+        label="Open alert prompt">
+        <ButtonText>Open alert prompt (Basic)</ButtonText>
+      </Button>
+
+      <Button
+        variant="solid"
+        color="negative"
+        size="small"
+        onPress={() => alertPromptCustom.open()}
+        label="Open alert prompt with custom content">
+        <ButtonText>Open alert prompt (custom content)</ButtonText>
+      </Button>
+
       <Button
         variant="solid"
         color="primary"
@@ -175,6 +197,30 @@ export function Dialogs() {
         </Prompt.Actions>
       </Prompt.Outer>
 
+      <Prompt.Basic
+        control={alertPrompt}
+        type="alert"
+        icon={Trash}
+        title="Delete this post?"
+        description="This action cannot be undone. The post will be permanently removed from your profile and from everyone's feeds."
+        confirmButtonCta="Delete"
+        confirmButtonColor="negative"
+        onConfirm={() => {}}
+      />
+
+      <Prompt.Outer control={alertPromptCustom} type="alert">
+        <Prompt.Icon icon={Warning} color="negative" />
+        <Prompt.TitleText>Are you sure?</Prompt.TitleText>
+        <Prompt.DescriptionText>
+          This is the `alert` variant of the prompt. It renders a centered modal
+          on all platforms and supports an optional icon above the title.
+        </Prompt.DescriptionText>
+        <Prompt.Actions>
+          <Prompt.Action cta="Continue" color="negative" onPress={() => {}} />
+          <Prompt.Cancel />
+        </Prompt.Actions>
+      </Prompt.Outer>
+
       <Dialog.Outer control={basic}>
         <Dialog.Inner label="test">
           <H3 nativeID="dialog-title">Dialog</H3>