Modal Component

Configuration Options
Theme Options


The modal component can be used to show a modal overlay that opens on top of all existing components.

When you drag the component in, it creates a button component linked to the modal. Clicking the button should open the modal.


Configuration Options

Button Text

Expected Type: String

The text for the companion button that opens the modal. Defaults to Open Modal.

Modal Width

Expected Type: Number

The width in pixels for the modal.

Modal Height

Expected Type: Number

The height in pixels for the modal.


  • Click: Triggers whenever the menu is clicked.
  • Double Click: Triggers whenever the menu is clicked twice in quick succession.
  • Right Click: Triggers whenever the menu is right-clicked.
  • Mouse Enter: Triggers whenever the mouse starts hovering over the component.
  • Mouse Leave: Triggers whenever the mouse stops hovering over the component.

Theme Options

  • Button Background Color: The button's background color. (String | Hex)
  • Button Text Color: The button's text color. (String | Hex)
  • Button Text Align: The button's text alignment. (Left | Center | Right)
  • Button Text Size: The button's text size. (Number | Pixels)
  • Button Text Style: The button's text style. (Bold | Italic | Underline)
  • Button Border: The button's border. (Border)
  • Modal Background Color: The modal's background color. (String | Hex)
  • Modal Shadow: The modal's shadow. (Shadow)
  • Modal Border: The modal's border. (Border)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →