### Sizes

```jsx
import Button from "../button"
import Action from "./action"
import SelectMenu from "../select-menu"
const [activeDefault, setActiveDefault] = React.useState(false)
const [activeSm, setActiveSm] = React.useState(false)
const [activeMd, setActiveMd] = React.useState(false)
const [activeLg, setActiveLg] = React.useState(false)
const [activeFull, setActiveFull] = React.useState(false)
const [activeFullscreen, setActiveFullscreen] = React.useState(false)

const closeModals = () => {
  setActiveDefault(false)
  setActiveSm(false)
  setActiveMd(false)
  setActiveLg(false)
  setActiveFull(false)
  setActiveFullscreen(false)
}

;<div className="flex gap-2">
  <>
    <Button is="secondary" onClick={setActiveDefault}>
      Open default
    </Button>
    {activeDefault && (
      <Modal label="Edit modal" onClose={closeModals}>
        <h1 className="text-gray-800 mb-3">Update some thing</h1>
        <label
          htmlFor="example"
          className="block font-semibold text-gray-800 text-sm mb-1"
        >
          Form label
        </label>
        <input
          type="text"
          id="example"
          name="example"
          defaultValue="Example"
          className="w-full border border-gray-100 text-gray-700 rounded px-2 py-1"
        />
        <SelectMenu
          options={[{ value: 1, label: "Example" }]}
          className="mt-2"
        />
        <Action onClick={closeModals} is="tertiary">
          Cancel
        </Action>
        <Action onClick={closeModals} className="mx-2">
          Don't Save
        </Action>
        <Action is="primary" onClick={closeModals}>
          Save & Continue
        </Action>
      </Modal>
    )}
  </>
  <>
    <Button is="secondary" onClick={setActiveMd}>
      Open md
    </Button>
    {activeMd && (
      <Modal label="Edit md modal" onClose={closeModals} size="md">
        <h1 className="text-gray-800 mb-3">Update some thing</h1>
        <label
          htmlFor="example"
          className="block font-semibold text-gray-800 text-sm mb-1"
        >
          Form label
        </label>
        <input
          type="text"
          id="example"
          name="example"
          defaultValue="Example"
          className="w-full border border-gray-100 text-gray-700 rounded px-2 py-2"
        />
        <SelectMenu
          options={[{ value: 1, label: "Example" }]}
          className="mt-2"
        />
        <Action onClick={closeModals} is="secondary">
          Cancel
        </Action>
        <Action onClick={closeModals} className="mx-2">
          Don't Save
        </Action>
        <Action is="primary" onClick={closeModals}>
          Save & Continue
        </Action>
      </Modal>
    )}
  </>
  <>
    <Button is="secondary" onClick={setActiveLg}>
      Open lg
    </Button>
    {activeLg && (
      <Modal label="Edit lg modal" onClose={closeModals} size="lg">
        <h1 className="text-gray-800 mb-3">Update some thing</h1>
        <label
          htmlFor="example"
          className="block font-semibold text-gray-800 text-sm mb-1"
        >
          Form label
        </label>
        <input
          type="text"
          id="example"
          name="example"
          defaultValue="Example"
          className="w-full border border-gray-100 text-gray-700 rounded px-2 py-1"
        />
        <SelectMenu options={[{ value: 1, label: "Example" }]} />
        <Action onClick={closeModals} is="secondary">
          Cancel
        </Action>
        <Action onClick={closeModals} className="mx-2">
          Don't Save
        </Action>
        <Action is="primary" onClick={closeModals}>
          Save & Continue
        </Action>
      </Modal>
    )}
  </>
  <>
    <Button is="secondary" onClick={setActiveFull}>Open full</Button>
    {activeFull && (
      <Modal label="Edit full modal" onClose={closeModals} size="full">
        <h1 className="text-gray-800 mb-3">Update some thing</h1>
        <label
          htmlFor="example"
          className="block font-semibold text-gray-800 text-sm mb-1"
        >
          Form label
        </label>
        <input
          type="text"
          id="example"
          name="example"
          defaultValue="Example"
          className="w-full border border-gray-100 text-gray-700 rounded px-2 py-1"
        />
        <SelectMenu options={[{ value: 1, label: "Example" }]} />
        <Action onClick={closeModals} is="secondary">
          Cancel
        </Action>
        <Action onClick={closeModals} className="mx-2">
          Don't Save
        </Action>
        <Action is="primary" onClick={closeModals}>
          Save & Continue
        </Action>
      </Modal>
    )}
  </>
  <>
    <Button is="secondary" onClick={setActiveFullscreen}>Open fullscreen</Button>
    {activeFullscreen && (
      <Modal ariaLabel="Edit full modal" onClose={closeModals} size="fullscreen" hideHeader>
        <h1 className="text-gray-800 mb-3">Update some thing</h1>
        <label
          htmlFor="example"
          className="block font-semibold text-gray-800 text-sm mb-1"
        >
          Form label
        </label>
        <input
          type="text"
          id="example"
          name="example"
          defaultValue="Example"
          className="w-full border border-gray-100 text-gray-700 rounded px-2 py-1"
        />
        <SelectMenu options={[{ value: 1, label: "Example" }]} />
        <Action onClick={closeModals} color="plain">
          Cancel
        </Action>
        <Action onClick={closeModals} className="mx-2">
          Don't Save
        </Action>
        <Action color="red" onClick={closeModals}>
          Save & Continue
        </Action>
      </Modal>
    )}
  </>
</div>
```

### Modal without Action

```jsx
import Button from "../button"
const [active, setActive] = React.useState(false)

const close = () => setActive(false)
const open = () => setActive(true)
;<div className="font-sans text-gray-800">
  <Button is="secondary" onClick={open}>Open basic modal</Button>
  {active && (
    <Modal
      label="This modal can be used for just about anything!"
      onClose={close}
    >
      <p>
        The header does not have a border because no actions were passed. If you
        want a border, you will need to pass actions. You can still have buttons
        via the{" "}
        <code className="bg-gray-50 border border-gray-100 p-1 rounded text-sm">{`Button`}</code>{" "}
        component.
      </p>
      <img
        src="https://media.giphy.com/media/s2qXK8wAvkHTO/source.gif"
        alt="oh yeah"
      />
    </Modal>
  )}
</div>
```

### Using the confirm modal

```jsx
import Button from "../button"
import Action from "./action"
import CKIcon from "../ck-icon"
import ConfirmModal from "./confirm-modal"

const [active, setActive] = React.useState(false)
const [activeWithoutPicture, setactiveWithoutPicture] = React.useState(false)
const [activeWithoutLabel, setActiveWithoutLabel] = React.useState(false)
const [activeWithImage, setActiveWithImage] = React.useState(false)
const [activeSingleAction, setActiveSingleAction] = React.useState(false)

const closeModals = () => {
    setActive(false)
    setactiveWithoutPicture(false)
    setActiveWithoutLabel(false)
    setActiveWithImage(false)
    setActiveSingleAction(false)
  }
;<>
  <>
    <Button is="secondary" onClick={setActive} className="mr-2">With icon</Button>
    {active && (
      <ConfirmModal 
        onClose={closeModals} 
        label="Remove domain"
        picture={<CKIcon name="delete" className="w-10 h-10 p-2 rounded-full bg-red-100 text-red-600" />}
      >
        Are you sure you want to remove this domain? This action cannot be undone.
        <Action onClick={closeModals}>Cancel</Action>
        <Action is="primary" onClick={closeModals} destructive>
          Delete
        </Action>
      </ConfirmModal>
    )}
  </>
  <>
    <Button is="secondary" onClick={setactiveWithoutPicture} className="mr-2">Without picture</Button>
    {activeWithoutPicture && (
      <ConfirmModal 
        onClose={closeModals} 
        label="Remove domain"
      >
        Are you sure you want to remove this domain? This action cannot be undone.
        <Action onClick={closeModals}>Cancel</Action>
        <Action is="primary" onClick={closeModals} destructive>
          Delete
        </Action>
      </ConfirmModal>
    )}
  </>
  <>
    <Button is="secondary" onClick={setActiveWithoutLabel} className="mr-2">Without label</Button>
    {activeWithoutLabel && (
      <ConfirmModal 
        onClose={closeModals}
      >
        Are you sure you want to remove this domain? This action cannot be undone.
        <Action onClick={closeModals}>Cancel</Action>
        <Action is="primary" onClick={closeModals} destructive>
          Delete
        </Action>
      </ConfirmModal>
    )}
  </>
  <>
    <Button is="secondary" onClick={setActiveWithImage} className="mr-2">With Image</Button>
    {activeWithImage && (
      <ConfirmModal 
        onClose={closeModals} 
        label="Stop recommending The Sweaty Startup?"
        picture={<img className="w-12 h-12 rounded-full object-cover object-center block" src={"https://cdn.convertkit.com/assets/images/dan.jpg"} alt="Modal Image" />}
      >
        Are you sure you want to stop recommending The Sweaty Startup? You can always apply to recommend them again in
        the future.
        <Action onClick={closeModals} is="secondary">Cancel</Action>
        <Action is="primary" onClick={closeModals} destructive>
          Stop recommending
        </Action>
      </ConfirmModal>
    )}
  </>
  <>
    <Button is="secondary" onClick={setActiveSingleAction} className="mr-2">With single action</Button>
    {activeSingleAction && (
      <ConfirmModal 
        onClose={closeModals} 
        label="Insights is being set up!"
        picture={<CKIcon name="hourglass" className="w-10 h-10 p-2 rounded-full bg-blue-50 text-blue-600" />}
      >
        Soon you will be able to access Insights right from your dashboard. This is just being set up and can take up to
        30 minutes to be ready.
        <Action onClick={closeModals}>Back Home</Action>
      </ConfirmModal>
    )}
  </>
</>
```

To easily use a confirm modal with actions YES/NO, you may use the confirm function

```jsx static
import confirm from "@convertkit/design/modal/confirm"

const result = await confirm("Are you sure?", { confirm: "Yes", cancel: "No" })
```

### Using a modal with a custom title bar

You can pass JSX into the `label` prop if you need a more customized title.

If you do this, you should also pass an `ariaLabel` prop that describes the modal.

```jsx
import Button from "../button"

const [open, setOpen] = React.useState(false)

;<>
  <Button is="secondary" onClick={() => setOpen(true)}>Open modal</Button>
  {open && (
    <Modal
      onClose={() => setOpen(false)}
      label={
        <div className="bg-red-400 text-blue-400 font-bold text-lg">
          So customizable!
        </div>
      }
      ariaLabel="Settings"
    >
      ...
    </Modal>
  )}
</>
```

### Separator

By default, our modal have a separator line between the title and the content only when Actions are used.
If you want to show the separator even when there are no actions, you can use the `separator` prop.

```jsx
import Button from "../button"
import Action from "./action"

const [open1, setOpen1] = React.useState(false)
const [open2, setOpen2] = React.useState(false)
const [open3, setOpen3] = React.useState(false)

;<div className="flex gap-2">
  <Button is="secondary" onClick={() => setOpen1(true)}>No actions</Button>
  <Button is="secondary" onClick={() => setOpen2(true)}>With actions</Button>
  <Button is="secondary" onClick={() => setOpen3(true)}>With separator</Button>
  {open1 && (
    <Modal
      onClose={() => setOpen1(false)}
      label="No actions, no separator"
      ariaLabel="No actions, no separator"
    >
      No actions, no separator (default)
    </Modal>
  )}
  {open2 && (
    <Modal
      onClose={() => setOpen2(false)}
      label="With Actions, with separator"
      ariaLabel="With Actions, with separator"
    >
      With actions, with separator
      <Action>Action</Action>
    </Modal>
  )}
  {open3 && (
    <Modal
      onClose={() => setOpen3(false)}
      label="No actions, with separator"
      ariaLabel="No actions, with separator"
      separator
    >
      No actions, with separator
    </Modal>
  )}
</div>
```
