From 44f41510fa3c6294bafbb7a7bca12087114dbc2c Mon Sep 17 00:00:00 2001
From: Claire Chabas <claire.chabas@gmail.com>
Date: Mon, 4 Aug 2025 15:22:59 +0200
Subject: [PATCH] Fix close buttons tooltips (#3525)

---
 .changeset/chilly-hats-promise.md             |  5 ++++
 .../Announcement/AnnouncementBanner.tsx       | 17 ++++++-----
 .../src/components/Cookies/CookiesToast.tsx   | 29 +++++--------------
 3 files changed, 21 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/chilly-hats-promise.md

diff --git a/.changeset/chilly-hats-promise.md b/.changeset/chilly-hats-promise.md
new file mode 100644
index 000000000..3cc1ff2f8
--- /dev/null
+++ b/.changeset/chilly-hats-promise.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix close buttons tooltips
diff --git a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
index ec08bc423..68d3f1e0a 100644
--- a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
+++ b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
@@ -7,7 +7,7 @@ import { tcls } from '@/lib/tailwind';
 import { type CustomizationAnnouncement, SiteInsightsLinkPosition } from '@gitbook/api';
 import { Icon, type IconName } from '@gitbook/icons';
 import { CONTAINER_STYLE } from '../layout';
-import { Link } from '../primitives';
+import { Button, Link } from '../primitives';
 import { LinkStyles } from '../primitives/styles';
 import { ANNOUNCEMENT_CSS_CLASS, ANNOUNCEMENT_STORAGE_KEY } from './constants';
 
@@ -86,14 +86,15 @@ export function AnnouncementBanner(props: {
                             </div>
                         </Tag>
                         {closeable ? (
-                            <button
-                                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}`}
-                                type="button"
+                            <Button
+                                iconOnly
+                                icon="close"
+                                label={tString(language, 'close')}
+                                variant="blank"
+                                size="default"
                                 onClick={dismissAnnouncement}
-                                title={tString(language, 'close')}
-                            >
-                                <Icon icon="close" className="size-4" />
-                            </button>
+                                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}`}
+                            />
                         ) : null}
                     </div>
                 </div>
diff --git a/packages/gitbook/src/components/Cookies/CookiesToast.tsx b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
index 52003748c..caba3a2cf 100644
--- a/packages/gitbook/src/components/Cookies/CookiesToast.tsx
+++ b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
@@ -1,6 +1,4 @@
 'use client';
-
-import { Icon } from '@gitbook/icons';
 import * as React from 'react';
 
 import { Button, StyledLink } from '@/components/primitives';
@@ -75,27 +73,14 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                     </StyledLink>
                 )}
             </p>
-            <button
-                type="button"
+            <Button
+                iconOnly
+                icon="close"
+                label={tString(language, 'close')}
+                variant="blank"
                 onClick={() => setShow(false)}
-                aria-label={tString(language, 'close')}
-                className={tcls(
-                    'absolute',
-                    'top-3',
-                    'right-3',
-                    'w-6',
-                    'h-6',
-                    'flex',
-                    'justify-center',
-                    'items-center',
-                    'rounded-xs',
-                    'circular-corners:rounded-full',
-                    'hover:bg-tint-hover'
-                )}
-                title={tString(language, 'close')}
-            >
-                <Icon icon="xmark" className={tcls('size-4')} />
-            </button>
+                className={tcls('absolute', 'top-2', 'right-2', 'hover:bg-tint-hover')}
+            />
             <div className={tcls('mt-3', 'flex', 'flex-row', 'gap-2')}>
                 <Button
                     variant="primary"