add base MRT_ActionIcon

packages/mantine-react-table/src/buttons/MRT_ActionIcon.module.css

@@ -0,0 +1,12 @@
+.ai {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  background-color: transparent;
+  transition: all 100ms ease;
+  @mixin hover {
+    color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+    background: light-dark(
+      var(--mantine-color-gray-1),
+      var(--mantine-color-dark-6)
+    );
+  }
+}

packages/mantine-react-table/src/buttons/MRT_ActionIcon.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import { type PropsWithChildren } from 'react';
+import { ActionIcon, type ActionIconProps } from '@mantine/core';
+
+import classes from './MRT_ActionIcon.module.css';
+import { type PolymorphicComponentProps } from '@mantine/core/lib/core/factory/create-polymorphic-component';
+
+type Props<C = 'button'> = PropsWithChildren<
+  PolymorphicComponentProps<C, ActionIconProps>
+>;
+
+export function MRT_ActionIcon({
+  children,
+  className,
+  ...actionIconProps
+}: Props) {
+  return (
+    <ActionIcon
+      className={clsx(className, classes.ai)}
+      size="sm"
+      {...actionIconProps}
+    >
+      {children}
+    </ActionIcon>
+  );
+}

packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.module.css

@@ -2,4 +2,10 @@
   min-width: 70px;
   align-content: center;
   justify-content: center;
+  .left {
+    transform: rotate(90deg);
+  }
+  .right {
+    transform: rotate(-90deg);
+  }
 }

packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -1,5 +1,8 @@
-import { ActionIcon, Flex, Tooltip } from '@mantine/core';
+import { Flex, Tooltip } from '@mantine/core';
+
 import { type MRT_Column, type MRT_TableInstance } from '../types';
+import { MRT_ActionIcon } from './MRT_ActionIcon';
+
 import classes from './MRT_ColumnPinningButtons.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
@@ -11,61 +14,32 @@ export const MRT_ColumnPinningButtons = <
   TData extends Record<string, any> = {},
 >({
   column,
-  table,
-}: Props<TData>) => {
-  const {
+  table: {
     options: {
       icons: { IconPinned, IconPinnedOff },
       localization,
     },
-  } = table;
-
-  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
-    column.pin(pinDirection);
-  };
-
+  },
+}: Props<TData>) => {
   return (
     <Flex className={classes.container}>
       {column.getIsPinned() ? (
         <Tooltip withinPortal label={localization.unpin}>
-          <ActionIcon
-            color="gray"
-            variant="transparent"
-            onClick={() => handlePinColumn(false)}
-            size="md"
-          >
+          <MRT_ActionIcon onClick={() => column.pin(false)} size="md">
             <IconPinnedOff />
-          </ActionIcon>
+          </MRT_ActionIcon>
         </Tooltip>
       ) : (
         <>
           <Tooltip withinPortal label={localization.pinToLeft}>
-            <ActionIcon
-              color="gray"
-              variant="transparent"
-              onClick={() => handlePinColumn('left')}
-              size="md"
-            >
-              <IconPinned
-                style={{
-                  transform: 'rotate(90deg)',
-                }}
-              />
-            </ActionIcon>
+            <MRT_ActionIcon onClick={() => column.pin('left')} size="md">
+              <IconPinned className={classes.left} />
+            </MRT_ActionIcon>
           </Tooltip>
           <Tooltip withinPortal label={localization.pinToRight}>
-            <ActionIcon
-              onClick={() => handlePinColumn('right')}
-              size="md"
-              color="gray"
-              variant="transparent"
-            >
-              <IconPinned
-                style={{
-                  transform: 'rotate(-90deg)',
-                }}
-              />
-            </ActionIcon>
+            <MRT_ActionIcon onClick={() => column.pin('right')} size="md">
+              <IconPinned className={classes.right} />
+            </MRT_ActionIcon>
           </Tooltip>
         </>
       )}

packages/mantine-react-table/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -12,26 +12,23 @@ export const MRT_ShowHideColumnsButton = <
   TData extends Record<string, any> = {},
 >({
   table,
+  title,
   ...rest
 }: Props<TData>) => {
   const {
-    options: {
-      icons: { IconColumns },
-      localization,
-    },
-  } = table;
+    icons: { IconColumns },
+    localization: { showHideColumns },
+  } = table.options;
 
   return (
     <Menu closeOnItemClick={false} withinPortal>
-      <Tooltip withinPortal label={rest?.title ?? localization.showHideColumns}>
+      <Tooltip withinPortal label={title ?? showHideColumns}>
         <Menu.Target>
           <ActionIcon
-            aria-label={localization.showHideColumns}
-            color="gray"
             size="lg"
-            variant="transparent"
+            variant="default"
+            aria-label={title ?? showHideColumns}
             {...rest}
-            title={undefined}
           >
             <IconColumns />
           </ActionIcon>

packages/mantine-react-table/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,48 +1,50 @@
 import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
-import { type HTMLPropsRef, type MRT_TableInstance } from '../types';
+import {
+  type MRT_DensityState,
+  type HTMLPropsRef,
+  type MRT_TableInstance,
+} from '../types';
 
 interface Props<TData extends Record<string, any> = {}>
   extends ActionIconProps,
     HTMLPropsRef<HTMLButtonElement> {
   table: MRT_TableInstance<TData>;
 }
 
-const sizes = ['xs', 'md', 'xl'] as const;
+const next: Record<MRT_DensityState, MRT_DensityState> = {
+  xs: 'md',
+  md: 'xl',
+  xl: 'xs',
+};
 
 export const MRT_ToggleDensePaddingButton = <
   TData extends Record<string, any> = {},
 >({
-  table,
-  ...rest
-}: Props<TData>) => {
-  const {
+  table: {
     getState,
     options: {
       icons: {
         IconBaselineDensityLarge,
         IconBaselineDensityMedium,
         IconBaselineDensitySmall,
       },
-      localization,
+      localization: { toggleDensity },
     },
     setDensity,
-  } = table;
+  },
+  title,
+  ...rest
+}: Props<TData>) => {
   const { density } = getState();
 
-  const handleToggleDensePadding = () => {
-    setDensity(sizes[(sizes.indexOf(density) - 1) % sizes.length] ?? 'xl');
-  };
-
   return (
-    <Tooltip withinPortal label={rest?.title ?? localization.toggleDensity}>
+    <Tooltip withinPortal label={title ?? toggleDensity}>
       <ActionIcon
-        aria-label={localization.toggleDensity}
-        color="gray"
-        onClick={handleToggleDensePadding}
         size="lg"
-        variant="transparent"
+        variant="default"
+        aria-label={title ?? toggleDensity}
+        onClick={() => setDensity((current) => next[current])}
         {...rest}
-        title={undefined}
       >
         {density === 'xs' ? (
           <IconBaselineDensitySmall />

packages/mantine-react-table/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -10,33 +10,27 @@ interface Props<TData extends Record<string, any> = {}>
 export const MRT_ToggleFiltersButton = <
   TData extends Record<string, any> = {},
 >({
-  table,
-  ...rest
-}: Props<TData>) => {
-  const {
+  table: {
     getState,
     options: {
       icons: { IconFilter, IconFilterOff },
-      localization,
+      localization: { showHideFilters },
     },
     setShowColumnFilters,
-  } = table;
+  },
+  title,
+  ...rest
+}: Props<TData>) => {
   const { showColumnFilters } = getState();
 
-  const handleToggleShowFilters = () => {
-    setShowColumnFilters(!showColumnFilters);
-  };
-
   return (
-    <Tooltip withinPortal label={rest?.title ?? localization.showHideFilters}>
+    <Tooltip withinPortal label={title ?? showHideFilters}>
       <ActionIcon
-        aria-label={localization.showHideFilters}
-        color="gray"
-        onClick={handleToggleShowFilters}
         size="lg"
-        variant="transparent"
+        variant="default"
+        aria-label={title ?? showHideFilters}
+        onClick={() => setShowColumnFilters((current) => !current)}
         {...rest}
-        title={undefined}
       >
         {showColumnFilters ? <IconFilterOff /> : <IconFilter />}
       </ActionIcon>

packages/mantine-react-table/src/buttons/MRT_ToggleFullScreenButton.tsx

@@ -1,6 +1,7 @@
+import { useState } from 'react';
 import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
 import { type HTMLPropsRef, type MRT_TableInstance } from '../types';
-import { useState } from 'react';
 
 interface Props<TData extends Record<string, any> = {}>
   extends ActionIconProps,
@@ -11,42 +12,39 @@ interface Props<TData extends Record<string, any> = {}>
 export const MRT_ToggleFullScreenButton = <
   TData extends Record<string, any> = {},
 >({
-  table,
-  ...rest
-}: Props<TData>) => {
-  const {
+  table: {
     getState,
     options: {
       icons: { IconMinimize, IconMaximize },
-      localization,
+      localization: { toggleFullScreen },
     },
     setIsFullScreen,
-  } = table;
+  },
+  title,
+  ...rest
+}: Props<TData>) => {
   const { isFullScreen } = getState();
-
   const [tooltipOpened, setTooltipOpened] = useState(false);
 
   const handleToggleFullScreen = () => {
     setTooltipOpened(false);
-    setIsFullScreen(!isFullScreen);
+    setIsFullScreen((current) => !current);
   };
 
   return (
     <Tooltip
       opened={tooltipOpened}
       withinPortal
-      label={rest?.title ?? localization.toggleFullScreen}
+      label={title ?? toggleFullScreen}
     >
       <ActionIcon
-        aria-label={localization.toggleFullScreen}
-        color="gray"
+        size="lg"
+        variant="default"
+        aria-label={title ?? toggleFullScreen}
         onClick={handleToggleFullScreen}
         onMouseEnter={() => setTooltipOpened(true)}
         onMouseLeave={() => setTooltipOpened(false)}
-        size="lg"
-        variant="transparent"
         {...rest}
-        title={undefined}
       >
         {isFullScreen ? <IconMinimize /> : <IconMaximize />}
       </ActionIcon>

packages/mantine-react-table/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -10,19 +10,18 @@ interface Props<TData extends Record<string, any> = {}>
 export const MRT_ToggleGlobalFilterButton = <
   TData extends Record<string, any> = {},
 >({
-  table,
-  ...rest
-}: Props<TData>) => {
-  const {
+  table: {
     getState,
     options: {
       icons: { IconSearch, IconSearchOff },
-
-      localization,
+      localization: { showHideSearch },
     },
     refs: { searchInputRef },
     setShowGlobalFilter,
-  } = table;
+  },
+  title,
+  ...rest
+}: Props<TData>) => {
   const { globalFilter, showGlobalFilter } = getState();
 
   const handleToggleSearch = () => {
@@ -31,16 +30,14 @@ export const MRT_ToggleGlobalFilterButton = <
   };
 
   return (
-    <Tooltip withinPortal label={rest?.title ?? localization.showHideSearch}>
+    <Tooltip withinPortal label={title ?? showHideSearch}>
       <ActionIcon
-        aria-label={rest?.title ?? localization.showHideSearch}
-        color="gray"
+        size="lg"
+        variant="default"
+        aria-label={title ?? showHideSearch}
         disabled={!!globalFilter}
         onClick={handleToggleSearch}
-        size="lg"
-        variant="transparent"
         {...rest}
-        title={undefined}
       >
         {showGlobalFilter ? <IconSearchOff /> : <IconSearch />}
       </ActionIcon>