Alert Dialog

A modal dialog for displaying alerts and requiring user confirmation

Variants


Code Svelte
1
2    <script lang="ts">
3        import { AlertDialogPrimitives, Button } from "@kareyes/aether";
4
5        const { AlertDialogProvider, getAlertDialogContext } = AlertDialogPrimitives;
6        type AlertDialogContext = AlertDialogPrimitives.AlertDialogContext;
7        let result = $state<string>("");
8        
9        
10        function showDefaultAlert(dialog: AlertDialogContext) {
11            dialog.open({
12                variant: "default",
13                title: "Default Alert",
14                description: "This is a default alert dialog with standard styling.",
15                onAction: () => {
16                    result = "Default: Action clicked";
17                },
18            });
19        }
20
21        function showDestructiveAlert(dialog: AlertDialogContext) {
22            dialog.open({
23                variant: "destructive",
24                title: "Delete Account",
25                description:
26                    "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
27                icon: Trash2,
28                actionText: "Delete",
29                onAction: () => {
30                    result = "Destructive: Account deleted";
31                },
32            });
33        }
34
35        function showSuccessAlert(dialog: AlertDialogContext) {
36            dialog.open({
37                variant: "success",
38                title: "Success!",
39                description: "Your changes have been saved successfully.",
40                icon: CheckCircle2,
41                actionText: "Great!",
42                showCancel: false,
43                onAction: () => {
44                    result = "Success: Confirmed";
45                },
46            });
47        }
48
49        function showWarningAlert(dialog: AlertDialogContext) {
50            dialog.open({
51                variant: "warning",
52                title: "Warning",
53                description: "You have unsaved changes. Are you sure you want to continue?",
54                icon: AlertTriangle,
55                actionText: "Continue",
56                onAction: () => {
57                    result = "Warning: Continued";
58                },
59            });
60        }
61
62        function showInfoAlert(dialog: AlertDialogContext) {
63            dialog.open({
64                variant: "info",
65                title: "Information",
66                description: "Here's some important information you should know about.",
67                icon: Info,
68                actionText: "Got it",
69                showCancel: false,
70            });
71        }
72    </script>
73
74    <AlertDialogProvider>
75	<div class="container mx-auto max-w-4xl space-y-8 p-8">
76		<div class="space-y-2">
77			<h1 class="text-3xl font-bold">Alert Dialog Implementation</h1>
78			<p class="text-muted-foreground">
79				Examples of programmatically triggered alert dialogs with
80				various variants and configurations.
81			</p>
82		</div>
83        {#snippet AlertDialogButtons()}
84        			{@const dialog = getAlertDialogContext()}
85
86			<div class="space-y-6">
87				<!-- Variants Section -->
88				<div class="space-y-3">
89					<h2 class="text-xl font-semibold">Variants</h2>
90					<div class="flex flex-wrap gap-2">
91						<Button
92							onclick={() => dialog && showDefaultAlert(dialog)}
93							>Default</Button
94						>
95
96						<Button
97							variant="destructive"
98							onclick={() =>
99								dialog && showDestructiveAlert(dialog)}
100						>
101							Destructive
102						</Button>
103
104						<Button
105							color="success"
106							onclick={() => dialog && showSuccessAlert(dialog)}
107						>
108							Success
109						</Button>
110
111						<Button
112							color="warning"
113							onclick={() => dialog && showWarningAlert(dialog)}
114						>
115							Warning
116						</Button>
117
118						<Button
119							color="info"
120							onclick={() => dialog && showInfoAlert(dialog)}
121							>Info</Button
122						>
123					</div>
124				</div>
125        
126        {/snippet}
127        {@render AlertDialogButtons()}
128        </div>
129    </AlertDialogProvider>
130

Sizes


Code Svelte
1
2        <script lang="ts">	
3            import { AlertDialogPrimitives, Button } from "@kareyes/aether";
4
5            const { AlertDialogProvider, getAlertDialogContext } = AlertDialogPrimitives;
6            type AlertDialogContext = AlertDialogPrimitives.AlertDialogContext;
7            let result = $state<string>("");
8            
9            function showSmallDialog(dialog: AlertDialogContext) {
10                dialog.open({
11                    size: "sm",
12                    title: "Small Dialog",
13                    description: "This is a small alert dialog.",
14                    icon: Info,
15                });
16            }
17
18            function showDefaultSizeDialog(dialog: AlertDialogContext) {
19                dialog.open({
20                    size: "default",
21                    title: "Default Size Dialog",
22                    description: "This is a default size alert dialog.",
23                    icon: Info,
24                });
25            }
26
27            function showLargeDialog(dialog: AlertDialogContext) {
28                dialog.open({
29                    size: "lg",
30                    title: "Large Dialog",
31                    description:
32                        "This is a large alert dialog with more space for content. You can use this when you need to display more detailed information to the user.",
33                    icon: Info,
34                });
35            }
36        </script>
37
38    <AlertDialogProvider>
39        <div class="container mx-auto max-w-4xl space-y-8 p-8">
40            <div class="space-y-2">
41                <h1 class="text-3xl font-bold">Alert Dialog Implementation</h1>
42                <p class="text-muted-foreground">
43                    Examples of programmatically triggered alert dialogs with
44                    various variants and configurations.
45                </p>
46            </div>
47            {#snippet AlertDialogButtons()}
48                {@const dialog = getAlertDialogContext()}
49
50               <div class="space-y-3">
51					<h2 class="text-xl font-semibold">Sizes</h2>
52					<div class="flex flex-wrap gap-2">
53						<Button
54							variant="outline"
55							onclick={() => dialog && showSmallDialog(dialog)}
56						>
57							Small
58						</Button>
59
60						<Button
61							variant="outline"
62							onclick={() =>
63								dialog && showDefaultSizeDialog(dialog)}
64						>
65							Default
66						</Button>
67
68						<Button
69							variant="outline"
70							onclick={() => dialog && showLargeDialog(dialog)}
71						>
72							Large
73						</Button>
74					</div>
75				</div>
76                    </div>
77            
78            {/snippet}
79            {@render AlertDialogButtons()}
80        </div>
81    </AlertDialogProvider>
82

Configuration Options


Code Svelte
1
2    <script lang="ts">
3        import { AlertDialogPrimitives, Button } from "@kareyes/aether";
4
5        const { AlertDialogProvider, getAlertDialogContext } = AlertDialogPrimitives;
6        type AlertDialogContext = AlertDialogPrimitives.AlertDialogContext;
7        let result = $state<string>("");
8            
9
10        function showNoCancelDialog(dialog: AlertDialogContext) {
11            dialog.open({
12                title: "No Cancel Button",
13                description: "This dialog only has an action button.",
14                showCancel: false,
15            });
16        }
17
18        function showNoActionDialog(dialog: AlertDialogContext) {
19            dialog.open({
20                title: "No Action Button",
21                description: "This dialog only has a cancel button.",
22                showAction: false,
23            });
24        }
25
26        function showCustomTextDialog(dialog: AlertDialogContext) {
27            dialog.open({
28                title: "Custom Button Text",
29                description: "This dialog has custom button labels.",
30                cancelText: "No, go back",
31                actionText: "Yes, proceed",
32                icon: AlertCircle,
33            });
34        }
35
36        function showCallbacksDialog(dialog: AlertDialogContext) {
37            dialog.open({
38                title: "With Callbacks",
39                description: "This dialog has callback functions for both buttons.",
40                onCancel: () => {
41                    result = "Cancelled";
42                },
43                onAction: () => {
44                    result = "Confirmed";
45                },
46            });
47        }
48    </script>
49
50    
51    <AlertDialogProvider>
52        <div class="container mx-auto max-w-4xl space-y-8 p-8">
53            <div class="space-y-2">
54                <h1 class="text-3xl font-bold">Alert Dialog Implementation</h1>
55                <p class="text-muted-foreground">
56                    Examples of programmatically triggered alert dialogs with
57                    various variants and configurations.
58                </p>
59            </div>
60            {#snippet AlertDialogButtons()}
61                {@const dialog = getAlertDialogContext()}
62
63				<div class="space-y-3 border-foreground p-4 rounded-md border">
64					<h2 class="text-xl font-semibold">Configuration Options</h2>
65					<div class="flex flex-wrap gap-2">
66						<Button
67							variant="outline"
68							onclick={() => dialog && showNoCancelDialog(dialog)}
69						>
70							No Cancel
71						</Button>
72
73						<Button
74							variant="outline"
75							onclick={() => dialog && showNoActionDialog(dialog)}
76						>
77							No Action
78						</Button>
79
80						<Button
81							variant="outline"
82							onclick={() =>
83								dialog && showCustomTextDialog(dialog)}
84						>
85							Custom Text
86						</Button>
87
88						<Button
89							variant="outline"
90							onclick={() =>
91								dialog && showCallbacksDialog(dialog)}
92						>
93							With Callbacks
94						</Button>
95					</div>
96				</div>
97                    </div>
98            
99            {/snippet}
100            {@render AlertDialogButtons()}
101        </div>
102    </AlertDialogProvider>
103

Practical Examples


Code Svelte
1
2    <script lang="ts">
3        import { AlertDialogPrimitives, Button } from "@kareyes/aether";
4
5        const { AlertDialogProvider, getAlertDialogContext } = AlertDialogPrimitives;
6        type AlertDialogContext = AlertDialogPrimitives.AlertDialogContext;
7        let result = $state<string>("");
8            
9        function showDeleteFileDialog(dialog: AlertDialogContext) {
10                dialog.open({
11                    variant: "destructive",
12                    title: "Delete File",
13                    description: "Are you sure you want to delete this file? This action cannot be undone.",
14                    icon: Trash2,
15                    actionText: "Delete File",
16                    cancelText: "Keep File",
17                    onAction: () => {
18                        result = "File deleted";
19                    },
20                    onCancel: () => {
21                        result = "File kept";
22                    },
23                });
24            }
25
26            function showSavePromptDialog(dialog: AlertDialogContext) {
27                dialog.open({
28                    variant: "warning",
29                    title: "Unsaved Changes",
30                    description:
31                        "You have unsaved changes that will be lost. Do you want to save before leaving?",
32                    icon: Save,
33                    actionText: "Save Changes",
34                    cancelText: "Discard",
35                    onAction: () => {
36                        result = "Changes saved";
37                    },
38                    onCancel: () => {
39                        result = "Changes discarded";
40                    },
41                });
42            }
43
44            function showPaymentSuccessDialog(dialog: AlertDialogContext) {
45                dialog.open({
46                    variant: "success",
47                    size: "sm",
48                    title: "Payment Successful",
49                    description: "Your payment has been processed successfully.",
50                    icon: CheckCircle2,
51                    actionText: "Continue",
52                    showCancel: false,
53                    onAction: () => {
54                        result = "Payment confirmed";
55                    },
56                });
57            }
58    </script>
59
60        <AlertDialogProvider>
61        <div class="container mx-auto max-w-4xl space-y-8 p-8">
62            <div class="space-y-2">
63                <h1 class="text-3xl font-bold">Alert Dialog Implementation</h1>
64                <p class="text-muted-foreground">
65                    Examples of programmatically triggered alert dialogs with
66                    various variants and configurations.
67                </p>
68            </div>
69            {#snippet AlertDialogButtons()}
70                {@const dialog = getAlertDialogContext()}
71
72				<div class="space-y-3 border-foreground p-4 rounded-md border">
73					<h2 class="text-xl font-semibold">Practical Examples</h2>
74					<div class="flex flex-wrap gap-2">
75						<Button
76							onclick={() =>
77								dialog && showDeleteFileDialog(dialog)}
78							>Delete File</Button
79						>
80
81						<Button
82							variant="outline"
83							onclick={() =>
84								dialog && showSavePromptDialog(dialog)}
85						>
86							Save Prompt
87						</Button>
88
89						<Button
90							color="success"
91							onclick={() =>
92								dialog && showPaymentSuccessDialog(dialog)}
93						>
94							Payment Success
95						</Button>
96					</div>
97				</div>
98
99				<!-- Result Display -->
100				{#if result}
101					<div class="rounded-lg border bg-muted p-4">
102						<p class="text-sm font-medium">Last Action:</p>
103						<p class="text-sm text-muted-foreground">{result}</p>
104					</div>
105				{/if}
106                    </div>
107            
108            {/snippet}
109            {@render AlertDialogButtons()}
110        </div>
111    </AlertDialogProvider>
112