Powerful suite of Blade components for TALL Stack apps.

Dialog

Dialog component.

1. Insert the Dialog component on your main layout.
<html>
<body>
<x-dialog />
 
<!--... -->
</body>
</html>
2. Use the Interactions trait in your Livewire component.
use TallStackUi\Traits\Interactions;
 
class CreateUser extends Component
{
use Interactions;
 
// ...
}
3. Dispatch the Dialog from a method.
public function save(): void
{
$this->dialog()->success('...')->send();
$this->dialog()->error('...')->send();
$this->dialog()->warning('...')->send();
$this->dialog()->info('...')->send();
}

This is an example. You can't dispatch all at the same time.

$this->dialog()->success('Success', 'This is a success message.')->send();
$this->dialog()->error('Error', 'This is an error message.')->send();
$this->dialog()->warning('Warning', 'This is a warning message.')->send();
$this->dialog()->info('Info', 'This is an info message.')->send();

Interacting with actions.

public function save(): void
{
$this->dialog()
->question('Warning!', 'Are you sure?')
->confirm('Confirm', 'confirmed', 'Confirmed Successfully')
->cancel('Cancel', 'cancelled', 'Cancelled Successfully')
->send();
}
 
public function confirmed(string $message): void
{
$this->dialog()->success('Success', $message)->send();
}
 
public function cancelled(string $message): void
{
$this->dialog()->error('Cancelled', $message)->send();
}

As of version 1.10.0, the Dialog has been improved to allow more flexibility in the format of use:

public function save(): void
{
// 1. The methods `confirm()` and `cancel()` are optional.
$this->dialog()
->question('Warning!', 'Are you sure?')
->send();
 
// 2. You can set only `confirm()` or `cancel()`.
// If you set only one, the other will be set as default.
$this->dialog()
->question('Warning!', 'Are you sure?')
->confirm('Confirm', 'confirmed', 'Confirmed Successfully')
->send();
 
// 3. You can make `confirm()` and `cancel()`
// as static buttons just by defining the text.
$this->dialog()
->question('Warning!', 'Are you sure?')
->confirm('Confirm')
->cancel('Cancel')
->send();
 
// 4. You can set only the method and parameters
// to use the original text in the buttons.
$this->dialog()
->question('Warning!', 'Are you sure?')
->confirm(method: 'confirmed', params: 'Confirmed Successfully')
->cancel(method: 'cancelled', params: 'Cancelled Successfully')
->send();
 
// 5. You can ask for a confirmation with other Dialog types
$this->dialog()
->success('Success!', 'Process completed successfully.')
->confirm('Undo', 'undo')
->cancel('Ok')
->send();
}

An option to listen to events.

<!-- The listeners receive the dialog object through $event.detail -->
<div x-on:dialog:accepted.window="alert($event.detail.description)"
x-on:dialog:rejected.window="alert($event.detail.description)"
x-on:dialog:dismissed.window="show($event.detail.description)">
...
</div>

We recommend that you use listeners in one place, whether in the base layout or once per component.

JavaScript API to interact with Dialog.

<div>
<x-button color="green" onclick="show()">Success</x-button>
<x-button color="red" onclick="error()">Error</x-button>
<x-button color="yellow" onclick="warning()">Warning</x-button>
<x-button color="info" onclick="info()">Info</x-button>
<x-button color="secondary" onclick="confirm()">Confirmation</x-button>
 
<script>
show = () => $interaction('dialog')
.success('Success', 'This is a success message.')
.send();
 
error = () => $interaction('dialog')
.error('Success', 'This is a error message.')
.send();
 
warning = () => $interaction('dialog')
.warning('Success', 'This is a warning message.')
.send();
 
info = () => $interaction('dialog')
.info('Success', 'This is a info message.')
.send();
 
// To use confirmations the use and interact with methods of
// a Livewire component, it is necessary to pass the id of
// the component where the method is defined. You need to
// do this by interacting with the `wireable()` method.
 
const component = Livewire.find('your-component-id-goes-here').id;
 
confirm = () => $interaction('dialog')
.wireable(component)
.question('Warning', 'Are you sure?')
.confirm('Confirm', 'confirmed', 'Confirmed Successfully')
.cancel('Cancel', 'cancelled', 'Cancelled Successfully')
.send();
 
// Alternatively, you can pass the component id as an
// empty string to use the FIRST LIVEWIRE COMPONENT OF THE PAGE.
 
confirm = () => $interaction('dialog')
.wireable()
.question('Warning', 'Are you sure?')
.confirm('Confirm', 'confirmed', 'Confirmed Successfully')
.cancel('Cancel', 'cancelled', 'Cancelled Successfully')
.send();
</script>
</div>

Starting from version 1.5.3 you can customize Dialog colors through deep personalization.

This component contains settings available in the configuration file. Click here to learn more.
Previous
Tooltip
Next
Toast

Code highlighting provided by Torchlight