- Home
- Components
- Modal

# Modal

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

## Props

### Modal


Prop	Type	Default	Description
...Radix props	ComponentProps<typeof DialogPrimitive.Root>	-	All Radix Dialog root props

### ModalContent


Prop	Type	Default	Description
showCloseButton	boolean	true	Whether to render the built-in close button
...Radix props	ComponentProps<typeof DialogPrimitive.Content>	-	All Radix content props

Other parts (ModalTrigger, ModalOverlay, ModalPortal, ModalHeader, ModalTitle, ModalDescription, ModalFooter, ModalClose) are thin wrappers over corresponding Radix components with styling.

### Example

```
<Modal>
  <ModalTrigger asChild>
    <Button>Open</Button>
  </ModalTrigger>
  <ModalContent showCloseButton>
    <ModalHeader>
      <ModalTitle>Title</ModalTitle>
      <ModalDescription>Description</ModalDescription>
    </ModalHeader>
    <ModalFooter>
      <ModalClose asChild><Button variant="secondary">Close</Button></ModalClose>
      <Button>Confirm</Button>
    </ModalFooter>
  </ModalContent>
  
</Modal>
```

## Usage

```
<Modal>
  <ModalTrigger asChild>
    <Button variant="primary">Open Modal</Button>
  </ModalTrigger>
  <ModalContent onOpenAutoFocus={(e) => {
    e.preventDefault();
  }}>
    <ModalHeader>
      <ModalTitle>Edit Profile</ModalTitle>
      <ModalDescription>Update your personal information. Click Save to complete the changes.</ModalDescription>
    </ModalHeader>
    <div className="grid gap-4 py-4">
      <div className="grid grid-cols-6 items-center gap-2">
        <label htmlFor="name" className="text-left text-sm font-medium">Name</label>
        <InputRoot
          id="name"
          defaultValue="Jason"
          className="col-span-5 px-3 py-2"
        />
      </div>
      <div className="grid grid-cols-6 items-center gap-2">
        <label htmlFor="name" className="text-left text-sm font-medium">Mail</label>
        <InputRoot
          id="email"
          defaultValue="jason@example.com"
          className="col-span-5 px-3 py-2"
        />
      </div>
    </div>
    <ModalFooter>
      <ModalClose asChild>
        <Button variant="secondary">cancel</Button>
      </ModalClose>
      <Button>save</Button>
    </ModalFooter>
  </ModalContent>
</Modal>
```