Migrate to twenty-ui - input/button (#7994)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7529](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7529).

 --- 

### Description

- Migrated all button components to `twenty-ui`    \
  \
  `Button`\
  `ButtonGroup`\
  `ColorPickerButton`\
  `FloatingButton`\
  `FloatingButtonGroup`\
  `FloatingIconButton`\
  `FloatingIconButtonGroup`\
  `IconButton`\
  `IconButtonGroup`\
  `LightButton`\
  `LightIconButton`\
  `LightIconButtonGroup`\
  `MainButton`\
  \
  Fixes twentyhq/private-issues#89

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/activities/blocks/components/FileBlock.tsx

@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { ChangeEvent, useRef } from 'react';
 
-import { Button } from '@/ui/input/button/components/Button';
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
+import { Button } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 

packages/twenty-front/src/modules/activities/emails/components/EmailThreadBottomBar.tsx

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
-import { IconArrowBackUp, IconUserCircle } from 'twenty-ui';
+import { Button, IconArrowBackUp, IconUserCircle } from 'twenty-ui';
-
-import { Button } from '@/ui/input/button/components/Button';
 
 const StyledThreadBottomBar = styled.div`
   align-items: center;

packages/twenty-front/src/modules/activities/emails/right-drawer/components/IntermediaryMessages.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
-import { IconArrowsVertical } from 'twenty-ui';
+import { Button, IconArrowsVertical } from 'twenty-ui';
 
 import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
 import { EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender';
-import { Button } from '@/ui/input/button/components/Button';
 
 const StyledButtonContainer = styled.div`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -9,12 +9,11 @@ import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMe
 import { IntermediaryMessages } from '@/activities/emails/right-drawer/components/IntermediaryMessages';
 import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hooks/useRightDrawerEmailThread';
 import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
-import { Button } from '@/ui/input/button/components/Button';
 import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
 import { messageThreadState } from '@/ui/layout/right-drawer/states/messageThreadState';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { IconArrowBackUp } from 'twenty-ui';
+import { Button, IconArrowBackUp } from 'twenty-ui';
 
 const StyledWrapper = styled.div`
   display: flex;

packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx

@@ -3,9 +3,9 @@ import {
   IconDownload,
   IconPencil,
   IconTrash,
+  LightIconButton,
 } from 'twenty-ui';
 
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

packages/twenty-front/src/modules/activities/files/components/Attachments.tsx

@@ -6,6 +6,7 @@ import {
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
+  Button,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
   IconPlus,
 } from 'twenty-ui';
@@ -16,7 +17,6 @@ import { DropZone } from '@/activities/files/components/DropZone';
 import { useAttachments } from '@/activities/files/hooks/useAttachments';
 import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { Button } from '@/ui/input/button/components/Button';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledAttachmentsContainer = styled.div`

packages/twenty-front/src/modules/activities/notes/components/Notes.tsx

@@ -1,3 +1,9 @@
+import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { NoteList } from '@/activities/notes/components/NoteList';
+import { useNotes } from '@/activities/notes/hooks/useNotes';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import styled from '@emotion/styled';
 import {
   AnimatedPlaceholder,
@@ -5,18 +11,11 @@ import {
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
+  Button,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
   IconPlus,
 } from 'twenty-ui';
 
-import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
-import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
-import { NoteList } from '@/activities/notes/components/NoteList';
-import { useNotes } from '@/activities/notes/hooks/useNotes';
-import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { Button } from '@/ui/input/button/components/Button';
-
 const StyledNotesContainer = styled.div`
   display: flex;
   flex: 1;

packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx

@@ -1,10 +1,9 @@
 import { isNonEmptyArray } from '@sniptt/guards';
-import { IconPlus } from 'twenty-ui';
+import { Button, IconPlus } from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { Button } from '@/ui/input/button/components/Button';
 
 export const AddTaskButton = ({
   activityTargetableObjects,

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -6,6 +6,7 @@ import {
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
+  Button,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
   IconPlus,
 } from 'twenty-ui';
@@ -15,11 +16,9 @@ import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateAct
 import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/TasksTabListComponentId';
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { Button } from '@/ui/input/button/components/Button';
-import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
-
 import { Task } from '@/activities/types/Task';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import groupBy from 'lodash.groupby';
 import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';

packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineCreateButtonGroup.tsx

@@ -1,10 +1,13 @@
-import { useSetRecoilState } from 'recoil';
-import { IconCheckbox, IconNotes, IconPaperclip } from 'twenty-ui';
-
-import { Button } from '@/ui/input/button/components/Button';
-import { ButtonGroup } from '@/ui/input/button/components/ButtonGroup';
 import { TAB_LIST_COMPONENT_ID } from '@/ui/layout/show-page/components/ShowPageSubContainer';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { useSetRecoilState } from 'recoil';
+import {
+  Button,
+  ButtonGroup,
+  IconCheckbox,
+  IconNotes,
+  IconPaperclip,
+} from 'twenty-ui';
 
 export const TimelineCreateButtonGroup = ({
   isInRightDrawer = false,

packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCardToggleButton.tsx

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
-import { IconChevronDown, IconChevronUp } from 'twenty-ui';
+import { IconButton, IconChevronDown, IconChevronUp } from 'twenty-ui';
-
-import { IconButton } from '@/ui/input/button/components/IconButton';
 
 type EventCardToggleButtonProps = {
   isOpen: boolean;

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -1,12 +1,3 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
-import { useMemo, useState } from 'react';
-import { Controller } from 'react-hook-form';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { Key } from 'ts-key-enum';
-import { ActionLink, IconGoogle, IconKey, IconMicrosoft } from 'twenty-ui';
-
 import { FooterNote } from '@/auth/sign-in-up/components/FooterNote';
 import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator';
 import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
@@ -19,8 +10,21 @@ import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCapt
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { captchaProviderState } from '@/client-config/states/captchaProviderState';
 import { Loader } from '@/ui/feedback/loader/components/Loader';
-import { MainButton } from '@/ui/input/button/components/MainButton';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { useMemo, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+import {
+  ActionLink,
+  IconGoogle,
+  IconKey,
+  IconMicrosoft,
+  MainButton,
+} from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledContentContainer = styled.div`

packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx

@@ -16,7 +16,6 @@ import { getCompanyDomainName } from '@/object-metadata/utils/getCompanyDomainNa
 import { useSearchRecords } from '@/object-record/hooks/useSearchRecords';
 import { Opportunity } from '@/opportunities/types/Opportunity';
 import { Person } from '@/people/types/Person';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -30,7 +29,14 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { useMemo, useRef } from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { Avatar, IconNotes, IconSparkles, IconX, isDefined } from 'twenty-ui';
+import {
+  Avatar,
+  IconNotes,
+  IconSparkles,
+  IconX,
+  LightIconButton,
+  isDefined,
+} from 'twenty-ui';
 import { useDebounce } from 'use-debounce';
 import { getLogoUrlFromDomainName } from '~/utils';
 

packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx

@@ -9,11 +9,10 @@ import {
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
+  Button,
   IconRefresh,
   THEME_LIGHT,
 } from 'twenty-ui';
-
-import { Button } from '@/ui/input/button/components/Button';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 type GenericErrorFallbackProps = FallbackProps;

packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@/ui/input/button/components/Button';
 import styled from '@emotion/styled';
-import { Banner, BannerVariant, IconComponent } from 'twenty-ui';
+import { Banner, BannerVariant, Button, IconComponent } from 'twenty-ui';
 
 const StyledBanner = styled(Banner)`
   position: absolute;

packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuDialog.tsx

@@ -1,6 +1,4 @@
-import { IconX } from 'twenty-ui';
+import { IconButton, IconX } from 'twenty-ui';
-
-import { IconButton } from '@/ui/input/button/components/IconButton';
 
 import {
   StyledContainer,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx

@@ -1,8 +1,7 @@
-import { IconPlus } from 'twenty-ui';
+import { IconPlus, LightButton } from 'twenty-ui';
 
 import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
-import { LightButton } from '@/ui/input/button/components/LightButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
 type AddObjectFilterFromDetailsButtonProps = {

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -17,7 +17,6 @@ import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
@@ -33,6 +32,7 @@ import {
   ChipSize,
   IconEye,
   IconEyeOff,
+  LightIconButton,
 } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 import { useAddNewCard } from '../../record-board-column/hooks/useAddNewCard';

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { useContext, useState } from 'react';
-import { IconDotsVertical, IconPlus, Tag } from 'twenty-ui';
+import { IconDotsVertical, IconPlus, LightIconButton, Tag } from 'twenty-ui';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
@@ -12,7 +12,6 @@ import { useIsOpportunitiesCompanyFieldDisabled } from '@/object-record/record-b
 import { RecordBoardColumnHotkeyScope } from '@/object-record/record-board/types/BoardColumnHotkeyScope';
 import { RecordBoardColumnDefinitionType } from '@/object-record/record-board/types/RecordBoardColumnDefinition';
 import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 
 const StyledHeader = styled.div`

packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx

@@ -1,10 +1,9 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCopy } from 'twenty-ui';
+import { IconCopy, LightIconButton } from 'twenty-ui';
 
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 
 const StyledButtonContainer = styled.div`
   padding: 0 ${({ theme }) => theme.spacing(1)};

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 import React, { useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
-import { IconCheck, IconPlus } from 'twenty-ui';
+import { IconCheck, IconPlus, LightIconButton } from 'twenty-ui';
 
 import { PhoneRecord } from '@/object-record/record-field/types/FieldMetadata';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import {
   DropdownMenuInput,

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx

@@ -7,7 +7,6 @@ import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/
 import { RecordIndexPageKanbanAddMenuItem } from '@/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { recordIndexKanbanFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState';
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -15,7 +14,7 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import styled from '@emotion/styled';
 import { useCallback, useContext } from 'react';
 import { useRecoilValue } from 'recoil';
-import { IconPlus } from 'twenty-ui';
+import { IconButton, IconPlus } from 'twenty-ui';
 
 const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
   width: 100%;

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
-import { AnimatedContainer, IconComponent } from 'twenty-ui';
+import {
-
+  AnimatedContainer,
-import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
+  FloatingIconButton,
+  IconComponent,
+} from 'twenty-ui';
 
 const StyledInlineCellButtonContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx

@@ -9,6 +9,7 @@ import {
   IconDotsVertical,
   IconTrash,
   IconUnlink,
+  LightIconButton,
 } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -33,7 +34,6 @@ import { RecordDetailRecordsListItem } from '@/object-record/record-show/record-
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import qs from 'qs';
 import { useCallback, useContext } from 'react';
 import { useRecoilValue } from 'recoil';
-import { IconForbid, IconPencil, IconPlus } from 'twenty-ui';
+import { IconForbid, IconPencil, IconPlus, LightIconButton } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
@@ -26,7 +26,6 @@ import { EntityForSelect } from '@/object-record/relation-picker/types/EntityFor
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx

@@ -1,6 +1,5 @@
 import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
-import { Button } from '@/ui/input/button/components/Button';
 import { useContext } from 'react';
 import {
   AnimatedPlaceholder,
@@ -9,6 +8,7 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   AnimatedPlaceholderType,
+  Button,
   IconComponent,
 } from 'twenty-ui';
 

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
-import { AnimatedContainer, IconComponent } from 'twenty-ui';
+import {
-
+  AnimatedContainer,
-import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
+  FloatingIconButton,
+  IconComponent,
+} from 'twenty-ui';
 
 const StyledButtonContainer = styled.div`
   margin: ${({ theme }) => theme.spacing(1)};

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useCallback, useMemo, useState } from 'react';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
-import { IconPlus } from 'twenty-ui';
+import { IconPlus, LightIconButton } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
@@ -12,7 +12,6 @@ import { useTableColumns } from '@/object-record/record-table/hooks/useTableColu
 import { RecordTableColumnHeadWithDropdown } from '@/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown';
 import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx

@@ -1,12 +1,12 @@
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
 import { Key } from 'ts-key-enum';
 import { z } from 'zod';
 
-import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { Button } from 'twenty-ui';
 import { isDomain } from '~/utils/is-domain';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx

@@ -1,9 +1,7 @@
-import { IconX, OverflowingTextWithTooltip } from 'twenty-ui';
-
 import { BlocklistItem } from '@/accounts/types/BlocklistItem';
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { IconButton, IconX, OverflowingTextWithTooltip } from 'twenty-ui';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
 
 type SettingsAccountsBlocklistTableRowProps = {

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import { IconGoogle } from 'twenty-ui';
+import { Button, IconGoogle } from 'twenty-ui';
 
 import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { Button } from '@/ui/input/button/components/Button';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { CardHeader } from '@/ui/layout/card/components/CardHeader';

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx

@@ -5,13 +5,13 @@ import {
   IconMail,
   IconRefresh,
   IconTrash,
+  LightIconButton,
 } from 'twenty-ui';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
 import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx

@@ -1,4 +1,4 @@
-import { LightButton } from '@/ui/input/button/components/LightButton';
+import { LightButton } from 'twenty-ui';
 
 type CancelButtonProps = {
   onCancel?: () => void;

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx

@@ -1,6 +1,4 @@
-import { IconDeviceFloppy } from 'twenty-ui';
+import { Button, IconDeviceFloppy } from 'twenty-ui';
-
-import { Button } from '@/ui/input/button/components/Button';
 
 type SaveButtonProps = {
   onSave?: () => void;

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx

@@ -1,5 +1,4 @@
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
-import { Button } from '@/ui/input/button/components/Button';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -13,7 +12,7 @@ import {
   useParams,
   useSearchParams,
 } from 'react-router-dom';
-import { IconChevronDown, isDefined } from 'twenty-ui';
+import { Button, IconChevronDown, isDefined } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberDecimalInput.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 
-import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { IconInfoCircle, IconMinus, IconPlus } from 'twenty-ui';
+import { Button, IconInfoCircle, IconMinus, IconPlus } from 'twenty-ui';
 import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null';
 
 type SettingsDataModelFieldNumberDecimalsInputProps = {

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
 import { Controller, useFormContext } from 'react-hook-form';
-import { IconPlus, IconTool, MAIN_COLORS } from 'twenty-ui';
+import { IconPlus, IconTool, LightButton, MAIN_COLORS } from 'twenty-ui';
 import { z } from 'zod';
 
 import {
@@ -14,7 +14,6 @@ import { selectFieldDefaultValueSchema } from '@/object-record/record-field/vali
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { generateNewSelectOption } from '@/settings/data-model/fields/forms/select/utils/generateNewSelectOption';
 import { isSelectOptionDefaultValue } from '@/settings/data-model/utils/isSelectOptionDefaultValue';
-import { LightButton } from '@/ui/input/button/components/LightButton';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

@@ -8,6 +8,7 @@ import {
   IconGripVertical,
   IconTrash,
   IconX,
+  LightIconButton,
   MAIN_COLOR_NAMES,
 } from 'twenty-ui';
 import { v4 } from 'uuid';
@@ -16,7 +17,6 @@ import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataIt
 import { EXPANDED_WIDTH_ANIMATION_VARIANTS } from '@/settings/constants/ExpandedWidthAnimationVariants';
 import { OPTION_VALUE_MAXIMUM_LENGTH } from '@/settings/data-model/constants/OptionValueMaximumLength';
 import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx

@@ -1,3 +1,7 @@
+import { SettingsDataModelOverviewEffect } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect';
+import { SettingsDataModelOverviewObject } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject';
+import { SettingsDataModelOverviewRelationMarkers } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewRelationMarkers';
+import { calculateHandlePosition } from '@/settings/data-model/graph-overview/utils/calculateHandlePosition';
 import styled from '@emotion/styled';
 import { useCallback, useState } from 'react';
 import ReactFlow, {
@@ -13,6 +17,8 @@ import ReactFlow, {
   useReactFlow,
 } from 'reactflow';
 import {
+  Button,
+  IconButtonGroup,
   IconLock,
   IconLockOpen,
   IconMaximize,
@@ -20,17 +26,8 @@ import {
   IconPlus,
   IconX,
 } from 'twenty-ui';
-
-import { SettingsDataModelOverviewEffect } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect';
-import { SettingsDataModelOverviewObject } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject';
-import { SettingsDataModelOverviewRelationMarkers } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewRelationMarkers';
-import { calculateHandlePosition } from '@/settings/data-model/graph-overview/utils/calculateHandlePosition';
-import { Button } from '@/ui/input/button/components/Button';
-import { IconButtonGroup } from '@/ui/input/button/components/IconButtonGroup';
 import { isDefined } from '~/utils/isDefined';
 
-import 'reactflow/dist/style.css';
-
 const NodeTypes = {
   object: SettingsDataModelOverviewObject,
 };

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx

@@ -4,9 +4,9 @@ import {
   IconEye,
   IconPencil,
   IconTextSize,
+  LightIconButton,
 } from 'twenty-ui';
 
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx

@@ -4,9 +4,9 @@ import {
   IconEye,
   IconPencil,
   IconTrash,
+  LightIconButton,
 } from 'twenty-ui';
 
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -1,22 +1,11 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { useMemo } from 'react';
-import { IconMinus, IconPlus, isDefined, useIcons } from 'twenty-ui';
-
-import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
-import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
-import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
-import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
-
-import { RELATION_TYPES } from '../../constants/RelationTypes';
-
 import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
+import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
+import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
 import { useDeleteRecordFromCache } from '@/object-record/cache/hooks/useDeleteRecordFromCache';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
@@ -24,13 +13,26 @@ import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown';
 import { SettingsObjectFieldInactiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown';
 import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { View } from '@/views/types/View';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
+import {
+  IconMinus,
+  IconPlus,
+  LightIconButton,
+  isDefined,
+  useIcons,
+} from 'twenty-ui';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
+import { RELATION_TYPES } from '../../constants/RelationTypes';
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
 
 type SettingsObjectFieldItemTableRowProps = {

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx

@@ -1,6 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconArchive, IconDotsVertical, IconPencil, useIcons } from 'twenty-ui';
+import {
+  IconArchive,
+  IconDotsVertical,
+  IconPencil,
+  LightIconButton,
+  useIcons,
+} from 'twenty-ui';
 
 import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
 import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
@@ -8,7 +14,6 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
 import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
 import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
-import { IconEye } from 'twenty-ui';
+import { FloatingButton, IconEye } from 'twenty-ui';
 
-import { FloatingButton } from '@/ui/input/button/components/FloatingButton';
 import { Card } from '@/ui/layout/card/components/Card';
 
 import { SettingsPath } from '@/types/SettingsPath';

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx

@@ -1,6 +1,10 @@
-import { IconArchiveOff, IconDotsVertical, IconTrash } from 'twenty-ui';
+import {
+  IconArchiveOff,
+  IconDotsVertical,
+  IconTrash,
+  LightIconButton,
+} from 'twenty-ui';
 
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

packages/twenty-front/src/modules/settings/developers/components/ApiKeyInput.tsx

@@ -1,10 +1,9 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCopy } from 'twenty-ui';
+import { Button, IconCopy } from 'twenty-ui';
 
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx

@@ -1,6 +1,4 @@
-import { IconBook2 } from 'twenty-ui';
+import { Button, IconBook2 } from 'twenty-ui';
-
-import { Button } from '@/ui/input/button/components/Button';
 
 export const SettingsReadDocumentationButton = () => {
   return (

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx

@@ -1,11 +1,10 @@
-import { Link } from 'react-router-dom';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconArrowUpRight, IconBolt, IconPlus, Pill } from 'twenty-ui';
+import { Link } from 'react-router-dom';
+import { Button, IconArrowUpRight, IconBolt, IconPlus, Pill } from 'twenty-ui';
 
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 import { Status } from '@/ui/display/status/components/Status';
-import { Button } from '@/ui/input/button/components/Button';
 import { isDefined } from '~/utils/isDefined';
 
 interface SettingsIntegrationComponentProps {

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSchemaUpdate.tsx

@@ -1,8 +1,7 @@
 import { FetchResult } from '@apollo/client';
 import styled from '@emotion/styled';
-import { IconReload } from 'twenty-ui';
+import { Button, IconReload } from 'twenty-ui';
 
-import { Button } from '@/ui/input/button/components/Button';
 import { SyncRemoteTableSchemaChangesMutation } from '~/generated-metadata/graphql';
 
 const StyledText = styled.h3`

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx

@@ -1,19 +1,18 @@
+import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
+import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import styled from '@emotion/styled';
 import {
   IconDotsVertical,
   IconPencil,
   IconTrash,
+  LightIconButton,
   UndecoratedLink,
 } from 'twenty-ui';
 
-import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
-import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-
 type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
   databaseLogoUrl: string;
   connectionId: string;

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard.tsx

@@ -1,11 +1,10 @@
-import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
-import { IconChevronRight } from 'twenty-ui';
+import { useNavigate } from 'react-router-dom';
+import { IconChevronRight, LightIconButton } from 'twenty-ui';
 
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { RemoteServer } from '~/generated-metadata/graphql';
 
 type SettingsIntegrationDatabaseConnectionsListCardProps = {

packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx

@@ -1,10 +1,9 @@
 import { useRecoilValue } from 'recoil';
-import { H2Title } from 'twenty-ui';
+import { Button, H2Title } from 'twenty-ui';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Button } from '@/ui/input/button/components/Button';
 import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
 
 export const ChangePassword = () => {

packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -1,10 +1,9 @@
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { H2Title } from 'twenty-ui';
+import { Button, H2Title } from 'twenty-ui';
 
 import { useAuth } from '@/auth/hooks/useAuth';
 import { currentUserState } from '@/auth/states/currentUserState';
-import { Button } from '@/ui/input/button/components/Button';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useDeleteUserAccountMutation } from '~/generated/graphql';
 

packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -1,12 +1,11 @@
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { H2Title, IconTrash } from 'twenty-ui';
+import { Button, H2Title, IconTrash } from 'twenty-ui';
 
 import { useAuth } from '@/auth/hooks/useAuth';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
-import { Button } from '@/ui/input/button/components/Button';
 export const DeleteWorkspace = () => {
   const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] =
     useState(false);

packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx

@@ -1,14 +1,12 @@
 /* @license Enterprise */
 
-import styled from '@emotion/styled';
-
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Button } from '@/ui/input/button/components/Button';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { CardHeader } from '@/ui/layout/card/components/CardHeader';
-import { IconKey } from 'twenty-ui';
+import styled from '@emotion/styled';
+import { Button, IconKey } from 'twenty-ui';
 
 const StyledHeader = styled(CardHeader)`
   align-items: center;

packages/twenty-front/src/modules/settings/security/components/SettingsSSOOIDCForm.tsx

@@ -2,13 +2,12 @@
 
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Section } from '@/ui/layout/section/components/Section';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Controller, useFormContext } from 'react-hook-form';
-import { H2Title, IconCopy } from 'twenty-ui';
+import { Button, H2Title, IconCopy } from 'twenty-ui';
 
 const StyledInputsContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx

@@ -4,7 +4,6 @@ import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSepa
 import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Section } from '@/ui/layout/section/components/Section';
 import { useTheme } from '@emotion/react';
@@ -12,6 +11,7 @@ import styled from '@emotion/styled';
 import { ChangeEvent, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import {
+  Button,
   H2Title,
   IconCheck,
   IconCopy,

packages/twenty-front/src/modules/settings/security/components/SettingsSecuritySSORowDropdownMenu.tsx

@@ -1,13 +1,17 @@
 /* @license Enterprise */
 
-import { IconArchive, IconDotsVertical, IconTrash } from 'twenty-ui';
+import {
+  IconArchive,
+  IconDotsVertical,
+  IconTrash,
+  LightIconButton,
+} from 'twenty-ui';
 
 import { useDeleteSSOIdentityProvider } from '@/settings/security/hooks/useDeleteSSOIdentityProvider';
 import { useUpdateSSOIdentityProvider } from '@/settings/security/hooks/useUpdateSSOIdentityProvider';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProviders.state';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty.tsx

@@ -1,6 +1,5 @@
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Button } from '@/ui/input/button/components/Button';
 import styled from '@emotion/styled';
 import {
   AnimatedPlaceholder,
@@ -8,6 +7,7 @@ import {
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
+  Button,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
   IconPlus,
 } from 'twenty-ui';

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx

@@ -6,7 +6,6 @@ import { SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/settings/s
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Button } from '@/ui/input/button/components/Button';
 import { CoreEditorHeader } from '@/ui/input/code-editor/components/CodeEditorHeader';
 import { Section } from '@/ui/layout/section/components/Section';
 import { TabList } from '@/ui/layout/tab/components/TabList';
@@ -16,7 +15,13 @@ import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { H2Title, IconGitCommit, IconPlayerPlay, IconRestore } from 'twenty-ui';
+import {
+  Button,
+  H2Title,
+  IconGitCommit,
+  IconPlayerPlay,
+  IconRestore,
+} from 'twenty-ui';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
 
 const StyledTabList = styled(TabList)`

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionSettingsTab.tsx

@@ -4,14 +4,13 @@ import { ServerlessFunctionFormValues } from '@/settings/serverless-functions/ho
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Button } from '@/ui/input/button/components/Button';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { Section } from '@/ui/layout/section/components/Section';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Key } from 'ts-key-enum';
-import { H2Title } from 'twenty-ui';
+import { Button, H2Title } from 'twenty-ui';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
 import { SettingsServerlessFunctionTabEnvironmentVariablesSection } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection';
 

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx

@@ -1,23 +1,23 @@
-import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { EnvironmentVariable } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection';
-import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import styled from '@emotion/styled';
+import { useState } from 'react';
 import {
   IconCheck,
   IconDotsVertical,
   IconPencil,
   IconTrash,
   IconX,
+  LightIconButton,
   OverflowingTextWithTooltip,
 } from 'twenty-ui';
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import React, { useState } from 'react';
-import styled from '@emotion/styled';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { EnvironmentVariable } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection';
 
 const StyledEditModeTableRow = styled(TableRow)`
   grid-template-columns: 180px auto 56px;

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection.tsx

@@ -1,16 +1,21 @@
-import dotenv from 'dotenv';
-import { H2Title, IconPlus, IconSearch, MOBILE_VIEWPORT } from 'twenty-ui';
-import { Table } from '@/ui/layout/table/components/Table';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { Section } from '@/ui/layout/section/components/Section';
-import { TextInput } from '@/ui/input/components/TextInput';
-import styled from '@emotion/styled';
-import React, { useMemo, useState } from 'react';
-import { TableBody } from '@/ui/layout/table/components/TableBody';
-import { Button } from '@/ui/input/button/components/Button';
-import { ServerlessFunctionFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { SettingsServerlessFunctionTabEnvironmentVariableTableRow } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow';
+import { ServerlessFunctionFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Section } from '@/ui/layout/section/components/Section';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableBody } from '@/ui/layout/table/components/TableBody';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import styled from '@emotion/styled';
+import dotenv from 'dotenv';
+import { useMemo, useState } from 'react';
+import {
+  Button,
+  H2Title,
+  IconPlus,
+  IconSearch,
+  MOBILE_VIEWPORT,
+} from 'twenty-ui';
 import { v4 } from 'uuid';
 
 const StyledSearchInput = styled(TextInput)`

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx

@@ -1,5 +1,5 @@
 import { Section } from '@/ui/layout/section/components/Section';
-import { H2Title, IconPlayerPlay } from 'twenty-ui';
+import { Button, H2Title, IconPlayerPlay } from 'twenty-ui';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { SettingsServerlessFunctionCodeEditorContainer } from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditorContainer';
@@ -10,7 +10,6 @@ import { settingsServerlessFunctionOutputState } from '@/settings/serverless-fun
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Button } from '@/ui/input/button/components/Button';
 import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
 import { CoreEditorHeader } from '@/ui/input/code-editor/components/CodeEditorHeader';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';

packages/twenty-front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
-import { IconX } from 'twenty-ui';
+import { IconButton, IconX } from 'twenty-ui';
 
 import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
 
 const StyledCloseButtonContainer = styled.div`

packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
-import { MainButton } from '@/ui/input/button/components/MainButton';
+import { MainButton } from 'twenty-ui';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx

@@ -7,7 +7,7 @@ import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpre
 import { readFileAsync } from '@/spreadsheet-import/utils/readFilesAsync';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { MainButton } from '@/ui/input/button/components/MainButton';
+import { MainButton } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -1,3 +1,20 @@
+import { Heading } from '@/spreadsheet-import/components/Heading';
+import { SpreadsheetImportTable } from '@/spreadsheet-import/components/SpreadsheetImportTable';
+import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
+import {
+  ColumnType,
+  Columns,
+} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
+import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
+import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
+import {
+  ImportValidationResult,
+  ImportedStructuredRow,
+} from '@/spreadsheet-import/types';
+import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations';
+import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import styled from '@emotion/styled';
 import {
   Dispatch,
@@ -8,28 +25,8 @@ import {
 } from 'react';
 // @ts-expect-error Todo: remove usage of react-data-grid`
 import { RowsChangeData } from 'react-data-grid';
-import { IconTrash, Toggle } from 'twenty-ui';
+import { Button, IconTrash, Toggle } from 'twenty-ui';
-
-import { Heading } from '@/spreadsheet-import/components/Heading';
-import { SpreadsheetImportTable } from '@/spreadsheet-import/components/SpreadsheetImportTable';
-import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
-import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import {
-  Columns,
-  ColumnType,
-} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
-import {
-  ImportedStructuredRow,
-  ImportValidationResult,
-} from '@/spreadsheet-import/types';
-import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations';
-import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
-import { Button } from '@/ui/input/button/components/Button';
 import { isDefined } from '~/utils/isDefined';
-
-import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
-import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
-import { Modal } from '@/ui/layout/modal/components/Modal';
 import { generateColumns } from './components/columns';
 import { ImportedStructuredRowMetadata } from './types';
 

packages/twenty-front/src/modules/support/components/SupportButton.tsx

@@ -1,9 +1,8 @@
 import styled from '@emotion/styled';
-import { IconHelpCircle } from 'twenty-ui';
+import { Button, IconHelpCircle } from 'twenty-ui';
 
 import { SupportButtonSkeletonLoader } from '@/support/components/SupportButtonSkeletonLoader';
 import { useSupportChat } from '@/support/hooks/useSupportChat';
-import { Button } from '@/ui/input/button/components/Button';
 
 const StyledButtonContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/ui/display/info/components/Info.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconInfoCircle } from 'twenty-ui';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button, IconInfoCircle } from 'twenty-ui';
 
 import { AppPath } from '@/types/AppPath';
-import { Button } from '@/ui/input/button/components/Button';
 
 export type InfoAccent = 'blue' | 'danger';
 export type InfoProps = {

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx

@@ -3,8 +3,8 @@ import { motion } from 'framer-motion';
 import { useCallback } from 'react';
 import { Key } from 'ts-key-enum';
 
-import { Button } from '@/ui/input/button/components/Button';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { Button } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 import { DialogHotkeyScope } from '../types/DialogHotkeyScope';

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -7,13 +7,13 @@ import {
   IconInfoCircle,
   IconSquareRoundedCheck,
   IconX,
+  LightButton,
+  LightIconButton,
   MOBILE_VIEWPORT,
 } from 'twenty-ui';
 
 import { ProgressBar } from '@/ui/feedback/progress-bar/components/ProgressBar';
 import { useProgressAnimation } from '@/ui/feedback/progress-bar/hooks/useProgressAnimation';
-import { LightButton } from '@/ui/input/button/components/LightButton';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { isDefined } from '~/utils/isDefined';
 
 export enum SnackBarVariant {

packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx

@@ -1,12 +1,10 @@
+import styled from '@emotion/styled';
 import { useRef, useState } from 'react';
 import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
 import TextareaAutosize from 'react-textarea-autosize';
-import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
-import { IconArrowRight } from 'twenty-ui';
+import { Button, IconArrowRight, RoundedIconButton } from 'twenty-ui';
 
-import { Button } from '@/ui/input/button/components/Button';
-import { RoundedIconButton } from '@/ui/input/button/components/RoundedIconButton';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,7 +1,14 @@
 import styled from '@emotion/styled';
 import { useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { IconApps, IconComponent, useIcons } from 'twenty-ui';
+import {
+  IconApps,
+  IconComponent,
+  useIcons,
+  IconButton,
+  IconButtonVariant,
+  LightIconButton,
+} from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -14,8 +21,6 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { arrayToChunks } from '~/utils/array/arrayToChunks';
 
-import { IconButton, IconButtonVariant } from '../button/components/IconButton';
-import { LightIconButton } from '../button/components/LightIconButton';
 import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
 
 export type IconPickerProps = {

packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx

@@ -1,8 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import React, { useMemo } from 'react';
-import { IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui';
+import { Button, IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui';
-import { Button } from '@/ui/input/button/components/Button';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/ui/input/components/internal/date/components/AbsoluteDatePickerHeader.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
-import { IconChevronLeft, IconChevronRight } from 'twenty-ui';
+import { IconChevronLeft, IconChevronRight, LightIconButton } from 'twenty-ui';
 
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Select } from '@/ui/input/components/Select';
 import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput';
 

packages/twenty-front/src/modules/ui/layout/bottom-bar/components/__stories__/BottomBar.stories.tsx

@@ -1,11 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { IconPlus } from 'twenty-ui';
-
-import { Button } from '@/ui/input/button/components/Button';
 import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
 import styled from '@emotion/styled';
+import { Meta, StoryObj } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
+import { Button, IconPlus } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx

@@ -1,9 +1,7 @@
-import { ComponentProps, MouseEvent } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { ComponentProps, MouseEvent } from 'react';
-
+import { IconComponent, LightIconButton } from 'twenty-ui';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 
 const StyledHeader = styled.li`
   align-items: center;

packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -3,9 +3,8 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { PlayFunction } from '@storybook/types';
 import { useState } from 'react';
-import { Avatar, ComponentDecorator } from 'twenty-ui';
+import { Avatar, Button, ComponentDecorator } from 'twenty-ui';
 
-import { Button } from '@/ui/input/button/components/Button';
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import { ReactNode, useState } from 'react';
-import { H1Title, H1TitleFontColor } from 'twenty-ui';
+import { Button, ButtonAccent, H1Title, H1TitleFontColor } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 
-import { Button, ButtonAccent } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 
 import { Modal, ModalVariants } from '@/ui/layout/modal/components/Modal';

packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx

@@ -1,6 +1,4 @@
-import { IconPlus } from 'twenty-ui';
+import { IconButton, IconPlus } from 'twenty-ui';
-
-import { IconButton } from '@/ui/input/button/components/IconButton';
 
 type PageAddButtonProps = {
   onClick: () => void;

packages/twenty-front/src/modules/ui/layout/page/components/PageFavoriteButton.tsx

@@ -1,6 +1,4 @@
-import { IconHeart } from 'twenty-ui';
+import { IconButton, IconHeart } from 'twenty-ui';
-
-import { IconButton } from '@/ui/input/button/components/IconButton';
 
 type PageFavoriteButtonProps = {
   isFavorite: boolean;

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 import { useRecoilValue } from 'recoil';
 import {
+  IconButton,
   IconChevronDown,
   IconChevronUp,
   IconComponent,
@@ -11,7 +12,6 @@ import {
   OverflowingTextWithTooltip,
 } from 'twenty-ui';
 
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
 
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -1,6 +1,4 @@
-import { IconX } from 'twenty-ui';
+import { IconX, LightIconButton } from 'twenty-ui';
-
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 
 import { useRightDrawer } from '../hooks/useRightDrawer';
 

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx

@@ -1,6 +1,5 @@
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { IconExternalLink, UndecoratedLink } from 'twenty-ui';
+import { IconExternalLink, LightIconButton, UndecoratedLink } from 'twenty-ui';
 
 export const RightDrawerTopBarExpandButton = ({ to }: { to: string }) => {
   const { closeRightDrawer } = useRightDrawer();

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarMinimizeButton.tsx

@@ -1,6 +1,5 @@
-import { IconMinus } from 'twenty-ui';
+import { IconMinus, LightIconButton } from 'twenty-ui';
 
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 
 export const RightDrawerTopBarMinimizeButton = () => {

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
-import { IconCheckbox, IconNotes, IconPlus } from 'twenty-ui';
+import { IconButton, IconCheckbox, IconNotes, IconPlus } from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID } from '@/ui/layout/show-page/constants/ShowPageAddButtonDropdownId';

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx

@@ -1,11 +1,15 @@
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { IconDotsVertical, IconRestore, IconTrash } from 'twenty-ui';
+import {
+  IconButton,
+  IconDotsVertical,
+  IconRestore,
+  IconTrash,
+} from 'twenty-ui';
 
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx

@@ -1,9 +1,11 @@
 import { useTheme } from '@emotion/react';
 import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
-import { IconChevronRight, IconComponent } from 'twenty-ui';
+import {
-
+  IconChevronRight,
-import { LightIconButtonProps } from '@/ui/input/button/components/LightIconButton';
+  IconComponent,
-import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
+  LightIconButtonGroup,
+  LightIconButtonProps,
+} from 'twenty-ui';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemAvatar.tsx

@@ -5,13 +5,12 @@ import {
   AvatarProps,
   IconChevronRight,
   IconComponent,
-  isDefined,
+  LightIconButtonGroup,
+  LightIconButtonProps,
   OverflowingTextWithTooltip,
+  isDefined,
 } from 'twenty-ui';
 
-import { LightIconButtonProps } from '@/ui/input/button/components/LightIconButton';
-import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
-
 import {
   StyledHoverableMenuItemBase,
   StyledMenuItemLeftContent,

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx

@@ -1,6 +1,4 @@
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, LightIconButtonGroup } from 'twenty-ui';
-
-import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx

@@ -1,8 +1,8 @@
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 import {
+  IconButton,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
 } from 'twenty-ui';

packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx

@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
-import { IconChevronDown, IconPlus } from 'twenty-ui';
+import { Button, ButtonGroup, IconChevronDown, IconPlus } from 'twenty-ui';
 
-import { Button } from '@/ui/input/button/components/Button';
-import { ButtonGroup } from '@/ui/input/button/components/ButtonGroup';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateButton.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@/ui/input/button/components/Button';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewType } from '@/views/types/ViewType';
 import { useCreateViewFromCurrentState } from '@/views/view-picker/hooks/useCreateViewFromCurrentState';
@@ -8,6 +7,7 @@ import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
 import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
 import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
 import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
+import { Button } from 'twenty-ui';
 
 export const ViewPickerCreateButton = () => {
   const { availableFieldsForKanban, navigateToSelectSettings } =

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerEditButton.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@/ui/input/button/components/Button';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewType } from '@/views/types/ViewType';
 import { useCreateViewFromCurrentState } from '@/views/view-picker/hooks/useCreateViewFromCurrentState';
@@ -8,6 +7,7 @@ import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
 import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
 import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
 import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
+import { Button } from 'twenty-ui';
 
 export const ViewPickerEditButton = () => {
   const { availableFieldsForKanban, navigateToSelectSettings } =

packages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowHeader.tsx

@@ -1,9 +1,9 @@
-import { Button } from '@/ui/input/button/components/Button';
 import { useActivateWorkflowVersion } from '@/workflow/hooks/useActivateWorkflowVersion';
 import { useDeactivateWorkflowVersion } from '@/workflow/hooks/useDeactivateWorkflowVersion';
 import { useDeleteOneWorkflowVersion } from '@/workflow/hooks/useDeleteOneWorkflowVersion';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import {
+  Button,
   IconPlayerPlay,
   IconPlayerStop,
   IconPower,

packages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowVersionHeader.tsx

@@ -1,7 +1,6 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
-import { Button } from '@/ui/input/button/components/Button';
 import { OverrideWorkflowDraftConfirmationModal } from '@/workflow/components/OverrideWorkflowDraftConfirmationModal';
 import { useActivateWorkflowVersion } from '@/workflow/hooks/useActivateWorkflowVersion';
 import { useCreateNewWorkflowVersion } from '@/workflow/hooks/useCreateNewWorkflowVersion';
@@ -10,7 +9,13 @@ import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { openOverrideWorkflowDraftConfirmationModalState } from '@/workflow/states/openOverrideWorkflowDraftConfirmationModalState';
 import { Workflow, WorkflowVersion } from '@/workflow/types/Workflow';
 import { useSetRecoilState } from 'recoil';
-import { IconPencil, IconPlayerStop, IconPower, isDefined } from 'twenty-ui';
+import {
+  Button,
+  IconPencil,
+  IconPlayerStop,
+  IconPower,
+  isDefined,
+} from 'twenty-ui';
 
 export const RecordShowPageWorkflowVersionHeader = ({
   workflowVersionId,

packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx

@@ -1,7 +1,6 @@
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
-import { IconPlus } from 'twenty-ui';
+import { IconButton, IconPlus } from 'twenty-ui';
 
 export const StyledTargetHandle = styled(Handle)`
   visibility: hidden;

packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeEditable.tsx

@@ -1,4 +1,3 @@
-import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
 import { WorkflowDiagramStepNodeBase } from '@/workflow/components/WorkflowDiagramStepNodeBase';
 import { useDeleteOneStep } from '@/workflow/hooks/useDeleteOneStep';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
@@ -6,7 +5,7 @@ import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { WorkflowDiagramStepNodeData } from '@/workflow/types/WorkflowDiagram';
 import { assertWorkflowWithCurrentVersionIsDefined } from '@/workflow/utils/assertWorkflowWithCurrentVersionIsDefined';
 import { useRecoilValue } from 'recoil';
-import { IconTrash } from 'twenty-ui';
+import { FloatingIconButton, IconTrash } from 'twenty-ui';
 
 export const WorkflowDiagramStepNodeEditable = ({
   id,

packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx

@@ -1,10 +1,9 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCopy, IconLink } from 'twenty-ui';
+import { Button, IconCopy, IconLink } from 'twenty-ui';
 
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 
 const StyledContainer = styled.div`