Enterprise UI Kit

Modal

Modal with size options: sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full-screen.

How to use

Modal sizes: sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full-screen. Copy the examples below.

1. Import

tsx

import { Modal, Button } from "@/app/components/ui";
import type { ModalSize } from "@/app/components/ui";

2. Basic usage

tsx

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Modal title"
  size="md"
>
  <p>Modal content.</p>
</Modal>

3. All size types

Modal size variantstsx

// Small
<Modal open={open} onClose={() => setOpen(false)} title="Small" size="sm">
  <p>Content.</p>
</Modal>

// Medium (default)
<Modal open={open} onClose={() => setOpen(false)} title="Medium" size="md">
  <p>Content.</p>
</Modal>

// Large
<Modal open={open} onClose={() => setOpen(false)} title="Large" size="lg">
  <p>Content.</p>
</Modal>

// Extra large
<Modal open={open} onClose={() => setOpen(false)} title="XL" size="xl">
  <p>Content.</p>
</Modal>

// 2xl, 3xl, 4xl, 5xl, 6xl, 7xl
<Modal open={open} onClose={() => setOpen(false)} title="2xl" size="2xl">
  <p>Content.</p>
</Modal>

// Full screen
<Modal open={open} onClose={() => setOpen(false)} title="Full screen" size="full-screen">
  <p>Full screen modal content.</p>
</Modal>