Modal

Dialog windows for displaying content requiring attention or user interaction.

Examples

Modals

Modals with different sizes and content

Code

<wdc-button (click)="openBasic()">Basic Modal</wdc-button>
<wdc-button (click)="openLarge()" variant="secondary">Large Modal</wdc-button>

<wdc-modal [isOpen]="isBasicOpen" (isOpenChange)="isBasicOpen = $event" title="Basic Modal">
  <p class="text-slate-600 dark:text-slate-400">
    This is a basic modal dialog. It has a title and some content.
  </p>
  <div class="mt-5 sm:mt-6 flex justify-end gap-3">
    <wdc-button (click)="isBasicOpen = false" variant="light">Cancel</wdc-button>
    <wdc-button (click)="isBasicOpen = false">Confirm</wdc-button>
  </div>
</wdc-modal>

API Reference

Input	Type	Default	Description
size	'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'	'md'	Size of the modal.
isOpen	boolean	false	Whether the modal is open or not.
closeOnBackdropClick	boolean	true	Whether to close the modal when clicking on the backdrop.
onClose	void	undefined	Callback function to be called when the modal is closed.