Select a background color for the page:

Simple ModalButton

Simple Modal

This is a simple modal opened by a button with icon.

The ModalButton component combines a trigger button and modal in one.

ModalButton with Custom ID

Custom ID Modal

Modal with explicit ID for advanced usage.

  • Custom button size
  • Explicit ID prop
  • Different variant

Nested ModalButton

Parent Modal

This is a parent modal containing a nested child modal.

Nested Child Modal

Nested modal inside parent modal.

Demonstrates modal stacking and management.

Each modal has its own independent state.

Content below the nested modal trigger.

ModalButton with Custom Content Area

Custom Content Modal

Modal with custom content area styling.

Custom section 1

Custom section 2

Multiple ModalButtons

Modal 1

Content for Modal 1.

Modal 2

Content for Modal 2.

Modal 3

Content for Modal 3.