> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/containers/modal.md).

# Modal

The main difference between [FloatingBox](/altrone-ui/components/containers/floatingbox.md) and Modal is that FloatingBox requires targetElement to position around which it will be positioned. Modal haven't got this requirement. Modal always shows in the center of the screen. 

Content of the modal can be different. It can be just a plain text or form or something else. Also you can you modal just for confirming actions. For example, when a user has clicked to delete an item, it would be good if you ask them for confirmation. Modal is great for this action.

{% hint style="info" %}
To control the visibility of the Modal you have to use conditional rendering. When Modal is exist on the page - it visible. You should provide closing logic in **`onClose`** callback. 
{% endhint %}

```tsx
import { Modal, Button, Paragraph, Role } from 'altrone-ui';

const [visible, setVisible] = useState(false);

return <div>
    <Button onClick={() => setVisible(true)}>Show the modal</Button>
    {visible && <Modal 
        title="Confirm the action"
        onClose={() => setVisible(false)}
        actions={[{
            label: 'Confirm',
            role: Role.success,
            onClick: () => setVisible(false)
        }]}
    >
        <Paragraph>Are you sure?</Paragraph>
    </Modal>}
</div>
```

{% hint style="warning" %}
Altrone always makes sure that the user has the opportunity to close the modal. Even when you hide close and cancel buttons and disabled closing on overlay Altrone shows Cancel button anyway. **You must make it so that the user has at least one visible way to close the modal window.**&#x20;
{% endhint %}

## Actions

By default Modal has only one action - "Cancel". This action is used to close the modal. But you can add extra actions to your modal via `actions` prop. Action is an object with following structure:

### <mark style="color:blue;">ModalAction</mark>

```typescript
interface ModalAction {
    label: string;
    onClick: () => void;
    leftIcon?: JSX.Element; // icon on the left side of the button
    rightIcon?: JSX.Element; // icon on the right side of the button
    align?: Align; // Alignment of the action. Possible options are start and end. When you set start  the action will be rendered in the left part of the modal. Default value is end. 
    role?: Role; // role of the button
    disabled?: boolean; // [NEW - 2.0] makes this action as disabled.
}
```

By default, all your actions will be placed in the right corner after "Cancel" action. But you can also place your actions in the left corner. Use `align` with `start` value to do this.&#x20;

## Accessibility

The modal window has some improvements for ease of use from the keyboard. To close the modal user can press on <mark style="color:orange;">**`ESC`**</mark> button on the keyboard.&#x20;

## Altrone Options

{% hint style="info" %}
This feature was added in **Altrone 2.1**
{% endhint %}

In **Altrone 2.1**, a new feature (called as [Altrone Options](/altrone-ui/usage.md)) was introduced, allowing users to define default values for certain properties within this component. To achieve this, you can leverage either `global.reduceMotion` or `modal.reduceMotion`, effectively deactivating transitions for all modal windows throughout your application.

## Properties

| Property                                              | Type                                                | Description                                                                              |
| ----------------------------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **`children`**<mark style="color:red;">**`*`**</mark> | `ReactNode`                                         | Inner elements                                                                           |
| **`onClose`**<mark style="color:red;">**`*`**</mark>  | `() => void`                                        | Callback fires when user wants to close the modal                                        |
| **`title`**                                           | `string`                                            | Title of the modal                                                                       |
| **`size`**                                            | [`Size`](/altrone-ui/utils/enums/size.md)           | Size of the modal. Default value is `medium`                                             |
| **`fluid`**                                           | `boolean`                                           | If this is `true` modal will take the full width                                         |
| **`actions`**                                         | [`ModalAction`](#modalaction)`[]`                   | Custom actions for the modal                                                             |
| **`showClose`**                                       | `boolean`                                           | Show close button near the title. Default value is `true`                                |
| **`showCancel`**                                      | `boolean`                                           | Show "Cancel" button. Default value is `true`                                            |
| **`closeOnOverlay`**                                  | `boolean`                                           | If `true` the modal will be closed when user clicked on overlay. Default value is `true` |
| **`reduceMotion`**                                    | `boolean`                                           | If `true` the modal doesn't have any transitions. Default value is `false`               |
| **`surface`**                                         | [`Surface`](/altrone-ui/utils/enums/surface.md)     | Surface of the modal                                                                     |
| **`elevation`**                                       | [`Elevation`](/altrone-ui/utils/enums/elevation.md) | Shadows of the modal                                                                     |
| **`className`**                                       | `string`                                            | Custom CSS class                                                                         |

## History

* **`Altrone 2.2`**:
  * updated animations
* **`Altrone 2.1`**:
  * added `global.reduceMotion` and `modal.reduceMotion` Altrone Option
* **`Altrone 2.0`**:
  * added `surface` prop
  * added `elevation` prop
  * added `disabled` prop for [`ModalAction`](#modalaction)
* **`Altrone 1.0`**: initial release