Modal
Modals are overlay windows that appear on top of the main content, demanding user interaction before returning to the page.
They're used for alerts, confirmations, forms, or displaying additional information. Modals focus the user's attention on a specific task or message, and are critical for enhancing user experience by preventing interruptions in the workflow.
Examples
Various examples showcasing different configurations of the component
Examples
Property
Value
Children
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
Title
This is a modal
Cancel text
Cancel
Ok text
Ok
Has cross
true
Header Configuration
Property
Value
Children
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
Title
This is a modal
Cancel text
Cancel
Ok text
Ok
Has cross
true
Subtitle
Here is an optional subtitle
Has back button
true
Alignment header
CENTER
Footer Configuration
Property
Value
Children
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
Title
This is a modal
Cancel text
Cancel
Ok text
Ok
Has cross
true
Subtitle
Here is an optional subtitle
Alignment footer
LEFT
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Header Properties
Property
Description
Default Value
Type
Title
The title of the modal.
String
Subtitle
The subtitle of the modal.
String
Has cross
Whether the modal should have a close (cross) button.
true
Bool
Has back button
Whether the modal should have a back (<-) button.
false
Bool
Alignment
Alignment of the header.
Left
String
Footer Properties
Property
Description
Default Value
Type
Cancel text
Text for the cancel button.
String
Ok text
Text for the OK button.
String
Alignment
Alignment of the footer.
Right
String
Configuration Properties
Property
Description
Default Value
Type
Button text
The text of the button that opens the modal.
Open Modal
String
Size
Size of the modal.
Medium
String
Background
Background color of the modal.
White
String
Flex configuration
Flex
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On submit
Function to be called when the form is submitted.