GitbookIO · zenoachtig · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025
diff --git a/.changeset/gold-geese-camp.md b/.changeset/gold-geese-camp.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Update button sizing
diff --git a/packages/gitbook/src/components/AIChat/AIChat.tsx b/packages/gitbook/src/components/AIChat/AIChat.tsx
@@ -96,7 +96,6 @@ export function AIChat() {
                                 icon="close"
                                 label={tString(language, 'close')}
                                 variant="blank"
-                                size="default"
                             />
                         </EmbeddableFrameButtons>
                     </EmbeddableFrameHeader>

diff --git a/packages/gitbook/src/components/AIChat/AIChatButton.tsx b/packages/gitbook/src/components/AIChat/AIChatButton.tsx
@@ -23,7 +23,7 @@ export function AIChatButton(props: {
             iconOnly={!showLabel}
             size="medium"
             variant="header"
-            className="h-9 px-2.5 @max-2xl:[&_.button-content]:hidden"
+            className="@max-2xl:[&_.button-content]:hidden"
             label={
                 <div className="flex items-center gap-2">
                     {t(language, 'ai_chat_ask', assistant.label)}

diff --git a/packages/gitbook/src/components/AIChat/AIChatControlButton.tsx b/packages/gitbook/src/components/AIChat/AIChatControlButton.tsx
@@ -22,7 +22,6 @@ export function AIChatControlButton() {
             icon="trash-can"
             label={t(language, 'ai_chat_clear_conversation')}
             variant="blank"
-            size="default"
             className="animate-blur-in-slow"
         />
     ) : null;

diff --git a/packages/gitbook/src/components/AIChat/AIChatInput.tsx b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
@@ -148,7 +148,7 @@ export function AIChatInput(props: {
                 </HoverCardRoot>
                 <Button
                     label={tString(language, 'send')}
-                    size="medium"
+                    size="small"
                     className="ml-auto"
                     disabled={disabled || !value.trim()}
                     onClick={() => onSubmit(value)}

diff --git a/packages/gitbook/src/components/AIChat/AIChatToolConfirmations.tsx b/packages/gitbook/src/components/AIChat/AIChatToolConfirmations.tsx
@@ -43,7 +43,7 @@ export function AIChatToolConfirmations(props: {
                         tabIndex={index}
                         label={tool.label}
                         className="w-full justify-center"
-                        size={index === 0 ? 'default' : 'medium'}
+                        size={index === 0 ? 'large' : 'medium'}
                         variant={index === 0 ? 'primary' : 'secondary'}
                         icon={tool.icon}
                     />

diff --git a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
@@ -90,7 +90,6 @@ export function AnnouncementBanner(props: {
                             icon="close"
                             label={tString(language, 'close')}
                             variant="blank"
-                            size="default"
                             onClick={dismissAnnouncement}
                             className={`absolute top-0 right-4 mt-2 mr-2 circular-corners:rounded-lg rounded-sm straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
                         />

diff --git a/packages/gitbook/src/components/Cookies/CookiesToast.tsx b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
@@ -61,10 +61,11 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 'lg:chat-open:mr-80',
                 'xl:chat-open:mr-100',
                 'transition-all',
-                'duration-300'
+                'duration-300',
+                'text-sm'
             )}
         >
-            <p id={describedById} className={tcls('text-sm')}>
+            <p id={describedById}>
                 {t(
                     language,
                     'cookies_prompt',
@@ -81,10 +82,10 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 onClick={() => setShow(false)}
                 className={tcls('absolute', 'top-2', 'right-2', 'hover:bg-tint-hover')}
             />
-            <div className={tcls('mt-3', 'flex', 'flex-row', 'gap-2')}>
+            <div className="mt-3 flex flex-row gap-2 text-xs">
                 <Button
                     variant="primary"
-                    size="small"
+                    size="medium"
                     aria-label={tString(language, 'cookies_accept')}
                     onClick={() => {
                         onUpdateState(true);
@@ -93,7 +94,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 />
                 <Button
                     variant="secondary"
-                    size="small"
+                    size="medium"
                     aria-label={tString(language, 'cookies_reject')}
                     onClick={() => {
                         onUpdateState(false);

diff --git a/packages/gitbook/src/components/DocumentView/InlineButton.tsx b/packages/gitbook/src/components/DocumentView/InlineButton.tsx
@@ -22,6 +22,7 @@ export async function InlineButton(props: InlineProps<api.DocumentInlineButton>)
                 label={inline.data.label}
                 // TODO: use a variant specifically for user-defined buttons.
                 variant={inline.data.kind}
+                size="medium"
                 className="leading-normal"
                 disabled={href === undefined}
                 icon={inline.data.icon as IconName | undefined}

diff --git a/packages/gitbook/src/components/Embeddable/EmbeddableDocsPageControlButtons.tsx b/packages/gitbook/src/components/Embeddable/EmbeddableDocsPageControlButtons.tsx
@@ -15,7 +15,6 @@ export function EmbeddableDocsPageControlButtons(props: { href: string }) {
             target="_blank"
             iconOnly
             variant="blank"
-            size="default"
         />
     );
 }
diff --git a/packages/gitbook/src/components/Embeddable/EmbeddableIframeAPI.tsx b/packages/gitbook/src/components/Embeddable/EmbeddableIframeAPI.tsx
@@ -113,7 +113,7 @@ export function EmbeddableIframeButtons() {
             {actions.map((action, index) => (
                 <Button
                     key={action.label}
-                    size="default"
+                    size="large"
                     variant="blank"
                     icon={action?.icon ?? 'square-question'}
                     label={action?.label}
@@ -195,7 +195,7 @@ export function EmbeddableIframeTabs(props: {
                     key={tab.key}
                     data-testid={`embed-tab-${tab.key}`}
                     label={tab.label}
-                    size="default"
+                    size="large"
                     variant="blank"
                     icon={tab.icon}
                     active={tab.key === active}

diff --git a/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx b/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
@@ -48,7 +48,6 @@ export function HeaderMobileMenu(props: ButtonProps) {
             icon="bars"
             iconOnly
             variant="blank"
-            size="default"
             label={tString(language, 'table_of_contents_button_label')}
             onClick={toggleNavigation}
             active={isOpen}

diff --git a/packages/gitbook/src/components/ThemeToggler/ThemeToggler.tsx b/packages/gitbook/src/components/ThemeToggler/ThemeToggler.tsx
@@ -65,7 +65,7 @@ function ThemeButton(props: {
             label={title}
             aria-checked={active}
             variant="blank"
-            size="default"
+            size="medium"
             className={
                 active
                     ? 'bg-primary theme-muted:bg-primary-hover text-primary-strong ring-primary hover:bg-primary contrast-more:text-primary-strong contrast-more:ring-1 [html.sidebar-filled.theme-bold.tint_&]:bg-primary-hover'

diff --git a/packages/gitbook/src/components/primitives/Button.tsx b/packages/gitbook/src/components/primitives/Button.tsx
@@ -14,7 +14,7 @@ export type ButtonProps = {
     variant?: 'primary' | 'secondary' | 'blank' | 'header';
     icon?: IconName | React.ReactNode;
     iconOnly?: boolean;
-    size?: 'default' | 'medium' | 'small' | 'xsmall';
+    size?: 'large' | 'medium' | 'small' | 'xsmall';
     className?: ClassValue;
     label?: string | React.ReactNode;
     trailing?: React.ReactNode;
@@ -29,11 +29,12 @@ export const variantClasses = {
         'bg-primary-original',
         'text-contrast-primary-original',
         'hover:bg-primary-solid-hover',
+        'hover:border-primary-solid-hover',
         'hover:text-contrast-primary-solid-hover',
-        'border-0',
+        'border-primary-original',
         'contrast-more:bg-primary-solid',
         'contrast-more:text-contrast-primary-solid',
-        'contrast-more:border',
+        'disabled:border-primary-2',
         'disabled:bg-primary-subtle',
         'disabled:text-primary/8',
     ],
@@ -102,7 +103,7 @@ export const Button = React.forwardRef<
         {
             href,
             variant = 'primary',
-            size = 'default',
+            size = 'medium',
             className,
             insights,
             target,
@@ -119,13 +120,13 @@ export const Button = React.forwardRef<
         ref
     ) => {
         const sizes = {
-            default: ['text-base', 'font-semibold', iconOnly ? 'px-2' : 'px-5', 'py-2'],
-            medium: ['text-sm', iconOnly ? 'px-2' : 'px-3.5', 'py-1.5'],
-            small: ['text-xs', 'py-2', iconOnly ? 'px-2' : 'px-3'],
-            xsmall: ['text-xs', 'py-1', iconOnly ? 'px-1.5' : 'px-2'],
+            large: ['text-base font-semibold py-3', iconOnly ? 'px-3' : 'px-6'],
+            medium: ['py-2', iconOnly ? 'text-base px-2' : 'px-4'],
+            small: ['text-sm py-1.5', iconOnly ? 'px-1.5' : 'px-3'],
+            xsmall: ['text-xs py-1', iconOnly ? 'px-1.5' : 'px-2', 'rounded-corners:rounded-lg'],
         };
 
-        const sizeClasses = sizes[size] || sizes.default;
+        const sizeClasses = sizes[size] || sizes.large;
 
         const domClassName = tcls(
             variantClasses[variant],

diff --git a/packages/gitbook/src/components/primitives/styles.ts b/packages/gitbook/src/components/primitives/styles.ts
@@ -5,8 +5,9 @@ export const ButtonStyles = [
     'group/button',
     'inline-flex',
     'items-center',
+    'align-middle',
     'gap-2',
-    'rounded-md',
+    'rounded-xl',
     'straight-corners:rounded-none',
     'circular-corners:rounded-3xl',
 
@@ -22,9 +23,13 @@ export const ButtonStyles = [
     'shadow-tint/6',
     'dark:shadow-tint-1',
 
+    'not-focus-visible:outline-0',
     'contrast-more:border-tint-12',
-    'contrast-more:hover:border-2',
+    'contrast-more:hover:outline-2',
+    'contrast-more:hover:outline-tint-12',
     'contrast-more:hover:border-tint-12',
+    'contrast-more:focus-visible:border-tint-12',
+    'contrast-more:focus-visible:outline-tint-12',
 
     'hover:depth-subtle:-translate-y-px',
     'focus-visible:depth-subtle:-translate-y-px',