@@ -20,20 +20,18 @@ Displays a native alert dialog with customizable buttons.
2020** Parameters:**
2121- ` string $title ` - The alert title
2222- ` string $message ` - The alert message
23- - ` array $buttons ` - Array of button configurations
24- - ` callable $callback ` - Callback function for button presses
23+ - ` array $buttons ` - Array of button labels (max 3 buttons)
24+
25+ ** Button Positioning:**
26+ - ** 1 button** - Positive (OK/Confirm)
27+ - ** 2 buttons** - Negative (Cancel) + Positive (OK/Confirm)
28+ - ** 3 buttons** - Negative (Cancel) + Neutral (Maybe) + Positive (OK/Confirm)
2529
2630``` php
2731Dialog::alert(
2832 'Confirm Action',
2933 'Are you sure you want to delete this item?',
30- [
31- ['text' => 'Cancel', 'style' => 'cancel'],
32- ['text' => 'Delete', 'style' => 'destructive']
33- ],
34- function($buttonIndex) {
35- // Handle button press
36- }
34+ ['Cancel', 'Delete']
3735);
3836```
3937
@@ -71,22 +69,26 @@ Dialog::share(
7169
7270Fired when a button is pressed in an alert dialog.
7371
74- ** Payload:** ` int $buttonIndex ` - Index of the pressed button (0-based)
72+ ** Payload:**
73+ - ` int $index ` - Index of the pressed button (0-based)
74+ - ` string $label ` - Label/text of the pressed button
7575
7676``` php
7777use Livewire\Attributes\On;
7878use Native\Mobile\Events\Alert\ButtonPressed;
7979
8080#[On('native:' . ButtonPressed::class)]
81- public function handleAlertButton(int $buttonIndex )
81+ public function handleAlertButton($index, $label )
8282{
83- switch ($buttonIndex ) {
83+ switch ($index ) {
8484 case 0:
8585 // First button (usually Cancel)
86+ Dialog::toast("You pressed '{$label}'");
8687 break;
8788 case 1:
8889 // Second button (usually OK/Confirm)
8990 $this->performAction();
91+ Dialog::toast("You pressed '{$label}'");
9092 break;
9193 }
9294}
@@ -112,24 +114,21 @@ class ItemManager extends Component
112114 Dialog::alert(
113115 'Delete Item',
114116 'This action cannot be undone. Are you sure?',
115- [
116- ['text' => 'Cancel', 'style' => 'cancel'],
117- ['text' => 'Delete', 'style' => 'destructive']
118- ],
119- null
117+ ['Cancel', 'Delete']
120118 );
121119 }
122120
123121 #[On('native:' . ButtonPressed::class)]
124- public function handleDeleteConfirmation(int $buttonIndex )
122+ public function handleDeleteConfirmation($index, $label )
125123 {
126- if ($buttonIndex === 1 && $this->itemToDelete) {
124+ if ($index === 1 && $this->itemToDelete) {
127125 // User confirmed deletion
128126 $this->performDelete($this->itemToDelete);
129127 Dialog::toast('Item deleted successfully');
130128 $this->itemToDelete = null;
131129 } else {
132130 // User cancelled
131+ Dialog::toast("You pressed '{$label}'");
133132 $this->itemToDelete = null;
134133 }
135134 }
@@ -163,31 +162,36 @@ class ItemManager extends Component
163162}
164163```
165164
166- ## Alert Button Styles
167-
168- ### iOS Button Styles
169- - ` 'default' ` - Standard blue button
170- - ` 'cancel' ` - Bold cancel button (usually on the left)
171- - ` 'destructive' ` - Red destructive action button
172-
173- ### Android Button Styles
174- - ` 'positive' ` - Primary action button
175- - ` 'negative' ` - Cancel/dismiss button
176- - ` 'neutral' ` - Additional option button
165+ ## Alert Button Examples
177166
167+ ### Simple Confirmation
178168``` php
179- // Cross-platform alert with proper styling
180169Dialog::alert(
181170 'Delete Account',
182171 'This will permanently delete your account and all data.',
183- [
184- ['text' => 'Cancel', 'style' => 'cancel'],
185- ['text' => 'Delete', 'style' => 'destructive']
186- ],
187- null
172+ ['Cancel', 'Delete']
188173);
189174```
190175
176+ ### Three Button Options
177+ ``` php
178+ Dialog::alert(
179+ 'Save Changes',
180+ 'Do you want to save your changes before closing?',
181+ ['Cancel', 'Don\'t Save', 'Save']
182+ );
183+ ```
184+
185+ ### Single Button Alert
186+ ``` php
187+ Dialog::alert(
188+ 'Welcome!',
189+ 'Thanks for downloading our app!',
190+ ['OK']
191+ );
192+ ```
193+
194+
191195## Toast Guidelines
192196
193197### Best Practices
0 commit comments