From 3ef1802e7e93d5c65dc92c6b28c74152f9222eee Mon Sep 17 00:00:00 2001
From: Tomek <tomasz@gitbook.io>
Date: Wed, 9 Sep 2026 12:23:17 +0200
Subject: [PATCH] Add close button for modals in published sites (#4600)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .changeset/rnd-12671-modal-close-button.md    |  5 +++
 .../DocumentView/Integration/contentkit.css   | 23 +++++++++++
 .../react-contentkit/src/ElementModal.tsx     | 40 ++++++++++++++++---
 3 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/rnd-12671-modal-close-button.md

diff --git a/.changeset/rnd-12671-modal-close-button.md b/.changeset/rnd-12671-modal-close-button.md
new file mode 100644
index 000000000..771b704db
--- /dev/null
+++ b/.changeset/rnd-12671-modal-close-button.md
@@ -0,0 +1,5 @@
+---
+"@gitbook/react-contentkit": patch
+---
+
+Show a close button on ContentKit modals rendered on published sites.
diff --git a/packages/gitbook/src/components/DocumentView/Integration/contentkit.css b/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
index 818ea4da4..63f648b25 100644
--- a/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
+++ b/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
@@ -130,15 +130,38 @@
 .contentkit-modal-header {
     @apply flex flex-col gap-2 px-4 py-2;
 }
+.contentkit-modal-header-with-close {
+    @apply flex-row items-start gap-4 px-4 pb-0 pt-4;
+}
+.contentkit-modal-header-content {
+    @apply min-w-0 flex-1;
+}
 
 .contentkit-modal-title {
     @apply text-2xl font-medium text-tint-strong;
 }
+.contentkit-modal-header-with-close .contentkit-modal-subtitle {
+    @apply break-words text-sm text-tint;
+}
+.contentkit-modal-header-with-close .contentkit-modal-title {
+    @apply break-words;
+}
 
 .contentkit-modal-body {
     @apply px-4 py-4;
 }
 
+.contentkit-modal-footer {
+    @apply flex justify-end gap-2 px-4 pb-4;
+}
+
+.contentkit-modal-close {
+    @apply flex size-8 shrink-0 items-center justify-center rounded-full text-tint transition-colors hover:bg-tint-hover hover:text-tint-strong focus-visible:outline-2 focus-visible:outline-primary;
+}
+.contentkit-modal-close-icon {
+    @apply size-4;
+}
+
 .contentkit-modal-header + .contentkit-modal-body {
     @apply pt-0;
 }
diff --git a/packages/react-contentkit/src/ElementModal.tsx b/packages/react-contentkit/src/ElementModal.tsx
index 267393eaf..f8e7606dd 100644
--- a/packages/react-contentkit/src/ElementModal.tsx
+++ b/packages/react-contentkit/src/ElementModal.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 import type { ContentKitModal } from '@gitbook/api';
+import { Icon } from '@gitbook/icons';
 
 import { useContentKitClientContext } from './context';
 import type { ContentKitClientElementProps } from './types';
@@ -18,7 +19,6 @@ export function ElementModal(
     const clientContext = useContentKitClientContext();
 
     // TODO:
-    // - close button
     // - invalid rendering on close?
     // - submit
 
@@ -45,13 +45,41 @@ export function ElementModal(
                     event.stopPropagation();
                 }}
             >
-                <div className={classNames('contentkit-modal-header')}>
-                    {element.title ? (
-                        <h1 className={classNames('contentkit-modal-title')}>{element.title}</h1>
-                    ) : null}
-                    {subtitle ? <div className="contentkit-modal-subtitle">{subtitle}</div> : null}
+                <div
+                    className={classNames(
+                        'contentkit-modal-header',
+                        'contentkit-modal-header-with-close'
+                    )}
+                >
+                    <div className="contentkit-modal-header-content">
+                        {element.title ? (
+                            <h1 className={classNames('contentkit-modal-title')}>
+                                {element.title}
+                            </h1>
+                        ) : null}
+                        {subtitle ? (
+                            <div className="contentkit-modal-subtitle">{subtitle}</div>
+                        ) : null}
+                    </div>
+                    <button
+                        type="button"
+                        aria-label="Close"
+                        className="contentkit-modal-close"
+                        onClick={onClose}
+                    >
+                        <Icon icon="xmark" className="contentkit-modal-close-icon" />
+                    </button>
                 </div>
                 <div className={classNames('contentkit-modal-body')}>{children}</div>
+                <div className="contentkit-modal-footer">
+                    <button
+                        type="button"
+                        className="contentkit-button contentkit-button-confirm contentkit-button-style-secondary"
+                        onClick={onClose}
+                    >
+                        Cancel
+                    </button>
+                </div>
             </div>
         </div>
     );