Dialog

The Dialog component provides a modal dialog with customizable messages and actions.

+page.svelte

<script lang="ts">import { Dialog } from "@grampro/svelte5-block";
let showDialog = true;
function handleActionOneClick() {
  console.log("Action One Clicked");
  showDialog = false;
}
function handleActionTwoClick() {
  console.log("Action Two Clicked");
  showDialog = false;
}
</script>

<div class="mt-4 flex items-center justify-center">
	<Dialog
		{showDialog}
		dialogMessage="Do you want to proceed?"
		dialogActionOne="Yes"
		dialogActionTwo="No"
		onDialogActionOneClick={handleActionOneClick}
		onDialogActionTwoClick={handleActionTwoClick}
	/>
</div>Copy

Sample

<Dialog
	showDialog
	dialogMessage="Are you sure you want to continue?"
	dialogActionOne="Confirm"
	dialogActionTwo="Cancel"
	onDialogActionOneClick={() => console.log('Confirmed')}
	onDialogActionTwoClick={() => console.log('Cancelled')}
/>Copy

Props