Dialog

API simplified for the Dialog component, allowing to create modal dialogues with minimal configuration.

Base example

<Dialog
  trigger={<Button>Open dialog</Button>}
  title="Dialog title"
  description="Description or instructions for the user."
  content={<div className="py-4">Dialog content</div>}
 
/>

Usage examples

Confirmation

<Dialog
  trigger={<Button variant="primary-destructive">Delete element</Button>}
  title="Confirm deletion"
  description="Are you sure you want to delete this element? This action is irreversible."
  footer={
    <>
    <Button variant={'secondary'}>Annuler</Button>
    <Button variant={'primary-destructive'} >Supprimer</Button>
    </>
  }
/>

Form with action and open-close contrôle


// Component with state and closure management
function FormWithAutoClose() {
  const [open, setOpen] = React.useState(false);
  const [formData, setFormData] = React.useState({ name: "", email: "" });
  const [submitted, setSubmitted] = React.useState(false);

  const handleSubmit = () => {
    // Simulate form submission
    console.log("Submitted data:", formData);
    
    // Show success message
    setSubmitted(true);
    
    // Close dialog after 1 second
    setTimeout(() => {
      setOpen(false);
      // Reset state after closing
      setTimeout(() => setSubmitted(false), 500);
    }, 1000);
  };

  return (

      <Dialog
        open={open}
        onOpenChange={setOpen}
        trigger={<Button variant="secondary" leftIcon={<Settings02/>}>Settings</Button>}
        title="Edit profile"
        description="Make changes to your profile here. Click save when you're done."
        content={
          <div className="py-4">
            <div className="grid gap-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <label htmlFor="form-name" className="text-right">Name</label>
                <input 
                  id="form-name" 
                  className="col-span-3 p-2 border border-tertiary rounded" 
                  value={formData.name}
                  onChange={(e) => setFormData({...formData, name: e.target.value})}
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <label htmlFor="form-email" className="text-right">Email</label>
                <input 
                  id="form-email" 
                  className="col-span-3 p-2 border border-tertiary rounded"
                  value={formData.email}
                  onChange={(e) => setFormData({...formData, email: e.target.value})}
                />
              </div>
            </div>
          </div>
        }
        footer={
          <>
          <Button variant={'secondary'} onClick={()=>setOpen(false)}>Cancel</Button>
          <Button onClick={handleSubmit} type="submit" isLoading={submitted}>Register</Button>
          </>
          
        }
      />
  );
}

API Reference

Props	Type	Default	Description
trigger	React.ReactNode	-	Trigger element to open the dialog
title?	string	-	Dialog title
description?	string	-	Dialog description
content?	React.ReactNode	-	Principal content
footer?	React.ReactNode	-	Footer content
open?	boolean	-	The controlled open state of the dialog. Must be used in conjunction with onOpenChange.
onOpenChange?	(open: boolean) => void	-	Event handler called when the open state of the dialog changes.
showCloseButton?	boolean	true	Whether to show a close button in the top-right corner.
className?	string	-	Additional classes to apply to the dialog content container.
dialogContentClassName?	string	flex flex-col gap-2 text-center sm:text-left	Additional classes to apply to the global content(header, content and footer).
headerClassName?	string	flex flex-col gap-2 text-center sm:text-left	Additional classes to apply to the header containing title and description.
titleClassName?	string	text-lg text-secondary leading-none font-semibold	Additional classes to apply to the title.
descriptionClassName?	string	text-tertiary text-sm	Additional classes to apply to the description.
footerClassName?	string	flex flex-col-reverse gap-2 sm:flex-row sm:justify-end	Additional classes to apply to the footer.