# [Usage](../../../usage.md) > [Components](../basics.md) > [Visuals](../basics.md) > Modal

Dialog overlay for focused forms or confirmations without leaving the page. Use it for create/edit dialogs and confirm flows; use [simple_popup](../../utilities/frontend/simple_popup.md) for lightweight hover hints and a plain [Form](../forms/form.md) page when the workflow deserves its own URL.

![image](img/modal_1.png)

```php
{!!
  \KFramework\Components\Visual\Button::make('open modal')
    ->setModal('mod1')
!!}

{!!
    \KFramework\Components\Visual\Modal::make('mod1')
        ->setDimension('medium-small')
        ->setLabel('test modal')
        ->setPreIcon('cog')
        ->setSchema([
            \KFramework\Components\Forms\Input::make()
                ->setLabel('Name')
                ->setColumnSpan(1),
            \KFramework\Components\Forms\Input::make()
                ->setLabel('Surname')
                ->setColumnSpan(1),
            \KFramework\Components\Forms\Input::make()
                ->setLabel('Email')
                ->setColumnSpan(2)
        ])
        ->setColumns(2)
        ->setURL('/test-post-route')
!!}
```

**End-to-end example:** quick-create customer dialog wired to a button.
```php
// Blade:
{!!
  \KFramework\Components\Visual\Button::make('New customer')->setType('primary')->setModal('new-customer')
!!}
{!!
    \KFramework\Components\Visual\Modal::make('new-customer')
        ->setLabel('New customer')
        ->setColumns(2)
        ->setURL('/customers')
        ->setSchema([
            \KFramework\Components\Forms\Input::make('name')->setLabel('Name')->setRequired()->setColumnSpan(2),
            \KFramework\Components\Forms\Input::make('email')->setLabel('E-mail')->setColumnSpan(2),
        ])
!!}

// Controller:
use KFramework\Components\Visual\Modal;
use KFramework\Components\Forms\Input;

$modal = Modal::make('new-customer')
    ->setLabel('New customer')
    ->setURL('/customers')
    ->setSchema([Input::make('name')->setLabel('Name')->setRequired()]);

return view('customers.index', compact('modal'));
```

---
## Usage

- Blade:
```php
{!! \KFramework\Components\Visual\Modal::make() !!}
```
- Controller:
```php
Modal::make()
```

---
## Standard attributes

- `uuid`
- `id` | `name`
  - A `Modal` can be opened by its `id` with the JavaScript function `showModal('modal_id')`, or with a `Button` with its method `->setModal('modal_id')`. Setting the `name` will override the `id`.
- `classes`
- `extraAttributes`
- `label`
- `content`
- `schema`
- `values`
- `defaults`
- `preIcon`
- `columns`
- `url` — POST target submitted from the modal form; permissions can auto-disable submit.
- `disableCancel`
- `disableSubmit`
- `closeable` — set with `->setCloseable(false)` to prevent Escape, backdrop click, cancel and header close dismissal; form modals still close on successful submission.
- `progressBar`
- `confirmationMessage`
- `dimension`
  - Will set the dimension of the modal, available dimensions:
    - `full`
    - `large`
    - `medium-large`
    - `medium` -> default
    - `medium-small`
    - `small`

See their usage and description [here](../basics.md).

## See also
- [Components basics](../basics.md)
- [Button](button.md), [Form](../forms/form.md), [Card](card.md)
- [schema](../shared_attributes/schema.md), [dimension](../shared_attributes/dimension.md), [url](../shared_attributes/url.md), [closeable](../shared_attributes/closeable.md)
- [simple_popup](../../utilities/frontend/simple_popup.md)