Is there a way to close a dialog?

[isaacfink]

I want to close a dialog with a button, is there a way to do this? ideally I would call a method for full control but even a builder to pass would be fine

[CreedDE]

If you copied the whole code for the dialog, you should have a little x on the top right of the dialog where you can close the dialog.

But if you want a separate close button that exists beside your submit button, you could either call the primitive directly from bits-ui or create your own little component.

Here is an example from my code where I made a component that I can use directly from my own Dialog component.

<div class="flex items-center justify-end gap-4">
	<Dialog.Close>
		<Button type="button">Cancel</Button>
	</Dialog.Close>
	<Button type="submit" variant="primary">Create Stintplan</Button>
</div>

And this is my simple dialog-close.svelte file

<script lang="ts">
	import { Dialog as DialogPrimitives } from 'bits-ui';

	type $$Props = DialogPrimitives.CloseProps;
</script>

<DialogPrimitives.Close {...$$restProps}>
	<slot />
</DialogPrimitives.Close>

[heirro]

Thanks!
I found it, should be hardcoded.

[tmadge]

Another option that I have used is to bind on the open prop on Dialog.Root and use a button to flip it to false.

<script>
  let open = false;
</script>

<button on:click={() => open = true}>Open</button>
<button on:click={() => open = false}>Close</button>

<Dialog.Root bind:open>
  ...
</Dialog.Root>

[MentalGear]

Was missing the bind: part. Should really be in the docs IMO.