Modal

Modals are dialog windows that overlay the main content to focus user attention on specific tasks or information.

Preview

Builder

Variant
Sections
Props

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Usage Notes

  • The open prop is bindable and controls the modal's visibility state.
  • Use the header snippet for displaying the modal title or header content.
  • Use the footer snippet for action buttons or additional information.
  • Set closeOnOverlay to true to allow closing the modal by clicking outside of it.
  • Use hideCloseButton to remove the default close button in the header.
  • The onclose callback is triggered when the modal is closed by any method.
  • Use isSolid to apply a solid background instead of a semi-transparent overlay.
  • The modal can typically be closed by pressing the ESC key.