From 39156ee9c346b34e28f34b8c8530abef67d3ce89 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Mon, 13 Jul 2026 20:03:52 +0200
Subject: [PATCH] Support button sizes in the button block (#4394)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
---
 .changeset/inline-button-size.md                     |  5 +++++
 bun.lock                                             |  4 ++--
 package.json                                         |  2 +-
 .../components/DocumentView/InlineActionButton.tsx   | 10 +++++++++-
 .../src/components/DocumentView/InlineButton.tsx     | 12 +++++++++++-
 5 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/inline-button-size.md

diff --git a/.changeset/inline-button-size.md b/.changeset/inline-button-size.md
new file mode 100644
index 000000000..7edd4cbb0
--- /dev/null
+++ b/.changeset/inline-button-size.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Button blocks now respect the `size` option, so you can render small, medium, or large buttons.
diff --git a/bun.lock b/bun.lock
index d03076122..1b8096a86 100644
--- a/bun.lock
+++ b/bun.lock
@@ -360,7 +360,7 @@
     "react-dom": "catalog:",
   },
   "catalog": {
-    "@gitbook/api": "0.187.0",
+    "@gitbook/api": "0.188.0",
     "@scalar/api-client-react": "^1.3.46",
     "@tsconfig/node20": "^20.1.6",
     "@tsconfig/strictest": "^2.0.6",
@@ -756,7 +756,7 @@
 
     "@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@7.2.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "7.2.0" } }, "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q=="],
 
-    "@gitbook/api": ["@gitbook/api@0.187.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-ec2TuMm19ycPzFZXUt2D7xSNjbF3vh9Ft3zTgG4Td4UkVuNiB+zpRYmnduqzE0XsiMEwwKLEj/HWMXe+QK4Piw=="],
+    "@gitbook/api": ["@gitbook/api@0.188.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-kZHpDM3XJdf1oZKhxYk3OZsjNHR4ZJrF47JgUxintnEvsW1yS8UvZlq6+dxgalL1k9wGmz3XXhiNv+p7p6egsA=="],
 
     "@gitbook/browser-types": ["@gitbook/browser-types@workspace:packages/browser-types"],
 
diff --git a/package.json b/package.json
index 3f1872296..3f12d5960 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
         "catalog": {
             "@tsconfig/strictest": "^2.0.6",
             "@tsconfig/node20": "^20.1.6",
-            "@gitbook/api": "0.187.0",
+            "@gitbook/api": "0.188.0",
             "@scalar/api-client-react": "^1.3.46",
             "@types/react": "^19.0.0",
             "@types/react-dom": "^19.0.0",
diff --git a/packages/gitbook/src/components/DocumentView/InlineActionButton.tsx b/packages/gitbook/src/components/DocumentView/InlineActionButton.tsx
index 065f6abe1..704d2486c 100644
--- a/packages/gitbook/src/components/DocumentView/InlineActionButton.tsx
+++ b/packages/gitbook/src/components/DocumentView/InlineActionButton.tsx
@@ -4,6 +4,14 @@ import { useAI, useAIChatController, useAIChatState } from '../AI';
 import { useSetSearchState } from '../Search';
 import { Button, type ButtonProps, Input } from '../primitives';
 
+// The Input primitive has no `xsmall`; otherwise it shares the button's size scale.
+const INPUT_SIZE_MAP: Record<NonNullable<ButtonProps['size']>, 'small' | 'medium' | 'large'> = {
+    xsmall: 'small',
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+};
+
 export function InlineActionButton(
     props: { action: 'ask' | 'search'; query?: string } & { buttonProps: ButtonProps } // TODO: Type this properly: Pick<api.DocumentInlineButton, 'action' | 'query'> & { buttonProps: ButtonProps }
 ) {
@@ -42,7 +50,7 @@ export function InlineActionButton(
             <Input
                 inline
                 label={buttonProps.label as string}
-                sizing="medium"
+                sizing={INPUT_SIZE_MAP[buttonProps.size ?? 'medium']}
                 className="inline-flex max-w-full grow"
                 submitButton={{
                     label: tString(language, action === 'ask' ? 'send' : 'search'),
diff --git a/packages/gitbook/src/components/DocumentView/InlineButton.tsx b/packages/gitbook/src/components/DocumentView/InlineButton.tsx
index b8479d223..27f552f90 100644
--- a/packages/gitbook/src/components/DocumentView/InlineButton.tsx
+++ b/packages/gitbook/src/components/DocumentView/InlineButton.tsx
@@ -9,6 +9,16 @@ import type { InlineProps } from './Inline';
 import { InlineActionButton } from './InlineActionButton';
 import { NotFoundRefHoverCard } from './NotFoundRefHoverCard';
 
+// Editor button sizes render one step smaller here; the editor default (`large`) keeps the previous `medium`.
+const BUTTON_SIZE_MAP: Record<
+    NonNullable<api.DocumentInlineButton['data']['size']>,
+    ButtonProps['size']
+> = {
+    small: 'xsmall',
+    medium: 'small',
+    large: 'medium',
+};
+
 export function InlineButton(props: InlineProps<api.DocumentInlineButton>) {
     const { inline, context } = props;
 
@@ -16,7 +26,7 @@ export function InlineButton(props: InlineProps<api.DocumentInlineButton>) {
         label: inline.data.label,
         variant: inline.data.kind,
         icon: inline.data.icon as IconName | undefined,
-        size: 'medium',
+        size: BUTTON_SIZE_MAP[inline.data.size ?? 'large'],
     };
 
     const ButtonImplementation = () => {