Modal
This components is used to show windows with content over the application
The main difference between FloatingBox 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.
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.
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.
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:
ModalAction
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.
Accessibility
The modal window has some improvements for ease of use from the keyboard. To close the modal user can press on ESC
button on the keyboard.
Altrone Options
This feature was added in Altrone 2.1
In Altrone 2.1, a new feature (called as Altrone Options) 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 |
---|---|---|
|
| Inner elements |
|
| Callback fires when user wants to close the modal |
|
| Title of the modal |
| Size of the modal. Default value is | |
|
| If this is |
| Custom actions for the modal | |
|
| Show close button near the title. Default value is |
|
| Show "Cancel" button. Default value is |
|
| If |
|
| If |
| Surface of the modal | |
| Shadows of the modal | |
|
| Custom CSS class |
History
Altrone 2.2
:updated animations
Altrone 2.1
:added
global.reduceMotion
andmodal.reduceMotion
Altrone Option
Altrone 2.0
:added
surface
propadded
elevation
propadded
disabled
prop forModalAction
Altrone 1.0
: initial release
Last updated