diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
index 2df69e11b..5e0e9d6ad 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
@@ -125,9 +125,7 @@ export const PageHeaderToggleCommandMenuButton = () => {
animatedSvg={
}
- data-click-outside-id={
- PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID
- }
+ dataClickOutsideId={PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID}
dataTestId="page-header-command-menu-button"
size={isMobile ? 'medium' : 'small'}
variant="secondary"
diff --git a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
index 0b97cb3b3..b331ceced 100644
--- a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
@@ -31,6 +31,8 @@ const StyledButton = styled.button<
| 'justify'
| 'to'
| 'target'
+ | 'dataClickOutsideId'
+ | 'dataGloballyPreventClickOutside'
>
>`
align-items: center;
@@ -404,6 +406,8 @@ export const AnimatedButton = ({
ariaLabel,
animate,
transition,
+ dataClickOutsideId,
+ dataGloballyPreventClickOutside,
}: AnimatedButtonProps) => {
const theme = useTheme();
const isMobile = useIsMobile();
@@ -428,6 +432,8 @@ export const AnimatedButton = ({
target={target}
data-testid={dataTestId}
aria-label={ariaLabel}
+ data-click-outside-id={dataClickOutsideId}
+ data-globally-prevent-click-outside={dataGloballyPreventClickOutside}
>
{Icon && (
diff --git a/packages/twenty-ui/src/input/button/components/Button/Button.tsx b/packages/twenty-ui/src/input/button/components/Button/Button.tsx
index ad08b0d07..8292d413d 100644
--- a/packages/twenty-ui/src/input/button/components/Button/Button.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button/Button.tsx
@@ -6,6 +6,7 @@ import { ButtonHotkeys } from '@ui/input/button/components/Button/internal/Butto
import { ButtonIcon } from '@ui/input/button/components/Button/internal/ButtonIcon';
import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSoon';
import { useIsMobile } from '@ui/utilities';
+import { ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { isDefined } from 'twenty-shared/utils';
@@ -37,7 +38,8 @@ export type ButtonProps = {
hotkeys?: string[];
ariaLabel?: string;
isLoading?: boolean;
-} & React.ComponentProps<'button'>;
+} & Pick, 'type'> &
+ ClickOutsideAttributes;
const StyledButton = styled('button', {
shouldForwardProp: (prop) =>
@@ -434,6 +436,8 @@ export const Button = ({
to,
target,
dataTestId,
+ dataClickOutsideId,
+ dataGloballyPreventClickOutside,
hotkeys,
ariaLabel,
type,
@@ -467,6 +471,8 @@ export const Button = ({
as={to ? Link : 'button'}
target={target}
data-testid={dataTestId}
+ data-click-outside-id={dataClickOutsideId}
+ data-globally-prevent-click-outside={dataGloballyPreventClickOutside}
aria-label={ariaLabel}
type={type}
isLoading={isLoading}
diff --git a/packages/twenty-ui/src/utilities/types/ClickOutsideAttributes.ts b/packages/twenty-ui/src/utilities/types/ClickOutsideAttributes.ts
new file mode 100644
index 000000000..39f538b57
--- /dev/null
+++ b/packages/twenty-ui/src/utilities/types/ClickOutsideAttributes.ts
@@ -0,0 +1,4 @@
+export type ClickOutsideAttributes = {
+ dataClickOutsideId?: string;
+ dataGloballyPreventClickOutside?: boolean;
+};