Change ButtonIcon color when disabled

1 files changed, 11 insertions, 1 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx
index 166a6a09a3..fe7795d040 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx
@@ -1,11 +1,21 @@
 import styled from 'styled-components';
 
+import { Colors } from '../../../foundations';
 import { Icon, IconProps } from '../../icon';
+import { useButtonContext } from '../ButtonContext';
 
 type ButtonIconProps = Omit<IconProps, 'size'>;
 
 export const StyledIcon = styled(Icon)({});
 
 export const ButtonIcon = ({ ...props }: ButtonIconProps) => {
-  return <StyledIcon size="medium" aria-hidden="true" {...props} />;
+  const { disabled } = useButtonContext();
+  return (
+    <StyledIcon
+      size="medium"
+      aria-hidden="true"
+      color={disabled ? Colors.white40 : Colors.white}
+      {...props}
+    />
+  );
 };