Select a background color for the page:

Basic Modal

Click the button below to open the modal:

Basic Modal Example

This is the content of a basic modal dialog. It demonstrates the default styling and behavior.

  • Modal with custom title
  • Content slot for flexible content
  • Automatic close button

Modal with Custom Content Area

Click to open a modal with custom content styling:

Custom Styled Modal

This modal has a custom content area with additional padding and background color.

Nested content panel inside the modal.

You can pass any HTML content through the slot.

Large Modal Example

Click to open a larger modal:

Large Modal with More Content

This is a larger modal that can accommodate more complex content layouts.

Left Panel

Content in the left section.

Right Panel

Content in the right section.

Footer content area with border separator.

Modal with Custom Title Styling

Click to open a modal with custom title styling:

Custom Title Styling

This modal features a custom styled title with larger font, bold weight, color, and underline.

The titleClass prop allows complete customization of the heading element.