fix: add pointerEvent to disabled button

packages/app/src/components/workspace-slider-bar/style.ts

@@ -57,7 +57,10 @@ export const StyledListItem = styled.button<{
     borderRadius: '5px',
     ...displayFlex('flex-start', 'center'),
     ...(disabled
-      ? { cursor: 'not-allowed', color: theme.colors.borderColor }
+      ? {
+          cursor: 'not-allowed',
+          color: theme.colors.borderColor,
+        }
       : {}),
 
     '>svg': {

packages/app/src/ui/button/styles.ts

@@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', {
       color: theme.colors.iconColor,
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed' } : {}),
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
       transition: 'background .15s',
 
       // TODO: we need to add @emotion/babel-plugin
@@ -123,7 +123,7 @@ export const StyledTextButton = styled('button', {
       paddingRight: padding,
       ...displayInlineFlex('flex-start', 'center'),
       position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed' } : {}),
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
       transition: 'background .15s',
       // TODO: Implement circle shape
       borderRadius: shape === 'default' ? borderRadius : height / 2,
@@ -180,7 +180,11 @@ export const StyledButton = styled('button', {
       position: 'relative',
       // TODO: disabled color is not decided
       ...(disabled
-        ? { cursor: 'not-allowed', color: theme.colors.borderColor }
+        ? {
+            cursor: 'not-allowed',
+            pointerEvents: 'none',
+            color: theme.colors.borderColor,
+          }
         : {}),
       transition: 'background .15s',
       // TODO: Implement circle shape