Dialog

#Overview

The Dialog API provides access to native UI elements like alerts, toasts, and sharing interfaces.

Import

Copied!

use Native\Mobile\Facades\Dialog;

use Native\Mobile\Facades\Dialog;

Copied!

import { dialog, on, off, Events } from '#nativephp';

import { dialog, on, off, Events } from '#nativephp';

#Methods

#`alert()`

Displays a native alert dialog with customizable buttons.

Parameters:

string $title - The alert title
string $message - The alert message
array $buttons - Array of button labels (max 3 buttons)

Button Positioning:

1 button - Positive (OK/Confirm)
2 buttons - Negative (Cancel) + Positive (OK/Confirm)
3 buttons - Negative (Cancel) + Neutral (Maybe) + Positive (OK/Confirm)

Alert Dialog

Copied!

Dialog::alert(
    'Confirm Action',
    'Are you sure you want to delete this item?',
    ['Cancel', 'Delete']
);

Dialog::alert(
    'Confirm Action',
    'Are you sure you want to delete this item?',
    ['Cancel', 'Delete']
);

Copied!

// Simple usage
await dialog.alert('Confirm Action', 'Are you sure you want to delete this item?', ['Cancel', 'Delete']);
 
// Fluent builder API
await dialog.alert()
    .title('Confirm Action')
    .message('Are you sure you want to delete this item?')
    .buttons(['Cancel', 'Delete']);
 
// Quick confirm dialog (OK/Cancel)
await dialog.alert()
    .confirm('Confirm Action', 'Are you sure?');
 
// Quick destructive confirm (Cancel/Delete)
await dialog.alert()
    .confirmDelete('Delete Item', 'This action cannot be undone.');

// Simple usage
await dialog.alert('Confirm Action', 'Are you sure you want to delete this item?', ['Cancel', 'Delete']);
// Fluent builder API
await dialog.alert()
.title('Confirm Action')
.message('Are you sure you want to delete this item?')
.buttons(['Cancel', 'Delete']);
// Quick confirm dialog (OK/Cancel)
await dialog.alert()
.confirm('Confirm Action', 'Are you sure?');
// Quick destructive confirm (Cancel/Delete)
await dialog.alert()
.confirmDelete('Delete Item', 'This action cannot be undone.');

#`toast()`

Displays a brief toast notification message.

Parameters:

string $message - The message to display

Toast Notification

Copied!

Dialog::toast('Item saved successfully!');

Dialog::toast('Item saved successfully!');

Copied!

await dialog.toast('Item saved successfully!');

await dialog.toast('Item saved successfully!');

Good toast messages

Short and clear
Great for confirmations and status updates
Don't rely on them for critical information
Avoid showing multiple toasts in quick succession

#`share()`

Opens the native sharing interface.

Parameters:

string $title - The share dialog title
string $text - Text content to share
string $url - URL to share

Copied!

Dialog::share(
    'Check this out!',
    'I found this amazing Laravel package for mobile development',
    'https://nativephp.com'
);

Dialog::share(
    'Check this out!',
    'I found this amazing Laravel package for mobile development',
    'https://nativephp.com'
);

#Events

#`ButtonPressed`

Fired when a button is pressed in an alert dialog.

Payload:

int $index - Index of the pressed button (0-based)
string $label - Label/text of the pressed button

ButtonPressed Event

Copied!

use Native\Mobile\Attributes\OnNative;
use Native\Mobile\Events\Alert\ButtonPressed;
 
#[OnNative(ButtonPressed::class)]
public function handleAlertButton($index, $label)
{
    switch ($index) {
        case 0:
            // First button (usually Cancel)
            Dialog::toast("You pressed '{$label}'");
            break;
        case 1:
            // Second button (usually OK/Confirm)
            $this->performAction();
            Dialog::toast("You pressed '{$label}'");
            break;
    }
}

use Native\Mobile\Attributes\OnNative;
use Native\Mobile\Events\Alert\ButtonPressed;
#[OnNative(ButtonPressed::class)]
public function handleAlertButton($index, $label)
{
switch ($index) {
case 0:
// First button (usually Cancel)
Dialog::toast("You pressed '{$label}'");
break;
case 1:
// Second button (usually OK/Confirm)
$this->performAction();
Dialog::toast("You pressed '{$label}'");
break;
}
}

Copied!

import { dialog, on, off, Events } from '#nativephp';
import { ref, onMounted, onUnmounted } from 'vue';
 
const buttonLabel = ref('');
 
const handleButtonPressed = (payload) => {
    const { index, label } = payload;
    buttonLabel.value = label;
 
    if (index === 0) {
        dialog.toast(`You pressed '${label}'`);
    } else if (index === 1) {
        performAction();
        dialog.toast(`You pressed '${label}'`);
    }
};
 
onMounted(() => {
    on(Events.Alert.ButtonPressed, handleButtonPressed);
});
 
onUnmounted(() => {
    off(Events.Alert.ButtonPressed, handleButtonPressed);
});

import { dialog, on, off, Events } from '#nativephp';
import { ref, onMounted, onUnmounted } from 'vue';
const buttonLabel = ref('');
const handleButtonPressed = (payload) => {
const { index, label } = payload;
buttonLabel.value = label;
    
        
            Copied!
            
        
        if (index === 0) {
    dialog.toast(`You pressed &#39;${label}&#39;`);
} else if (index === 1) {
    performAction();
    dialog.toast(`You pressed &#39;${label}&#39;`);
}

if (index === 0) {
    dialog.toast(`You pressed &#39;${label}&#39;`);
} else if (index === 1) {
    performAction();
    dialog.toast(`You pressed &#39;${label}&#39;`);
}
    
};
onMounted(() => {
on(Events.Alert.ButtonPressed, handleButtonPressed);
});
onUnmounted(() => {
off(Events.Alert.ButtonPressed, handleButtonPressed);
});

Copied!

import { dialog, on, off, Events } from '#nativephp';
import { useState, useEffect } from 'react';
 
const [buttonLabel, setButtonLabel] = useState('');
 
const handleButtonPressed = (payload) => {
    const { index, label } = payload;
    setButtonLabel(label);
 
    if (index === 0) {
        dialog.toast(`You pressed '${label}'`);
    } else if (index === 1) {
        performAction();
        dialog.toast(`You pressed '${label}'`);
    }
};
 
useEffect(() => {
    on(Events.Alert.ButtonPressed, handleButtonPressed);
 
    return () => {
        off(Events.Alert.ButtonPressed, handleButtonPressed);
    };
}, []);

import { dialog, on, off, Events } from '#nativephp';
import { useState, useEffect } from 'react';
const [buttonLabel, setButtonLabel] = useState('');
const handleButtonPressed = (payload) => {
const { index, label } = payload;
setButtonLabel(label);
    
        
            Copied!
            
        
        if (index === 0) {
    dialog.toast(`You pressed &#39;${label}&#39;`);
} else if (index === 1) {
    performAction();
    dialog.toast(`You pressed &#39;${label}&#39;`);
}

if (index === 0) {
    dialog.toast(`You pressed &#39;${label}&#39;`);
} else if (index === 1) {
    performAction();
    dialog.toast(`You pressed &#39;${label}&#39;`);
}
    
};
useEffect(() => {
on(Events.Alert.ButtonPressed, handleButtonPressed);
    
        
            Copied!
            
        
        return () =&gt; {
    off(Events.Alert.ButtonPressed, handleButtonPressed);
};

return () =&gt; {
    off(Events.Alert.ButtonPressed, handleButtonPressed);
};
    
}, []);

Dialog

On this page

#Overview

#Methods

#alert()

#toast()

Good toast messages

#share()

#Events

#ButtonPressed

#`alert()`

#`toast()`

#`share()`

#`ButtonPressed`