diff --git a/libs/ui-toolkit/src/components/button/button.tsx b/libs/ui-toolkit/src/components/button/button.tsx
index 29cab1773..da015cb8d 100644
--- a/libs/ui-toolkit/src/components/button/button.tsx
+++ b/libs/ui-toolkit/src/components/button/button.tsx
@@ -20,8 +20,14 @@ export interface AnchorButtonProps
 const getClassName = (
   className: CommonProps['className'],
   variant: CommonProps['variant']
-) =>
-  classNames(
+) => {
+  const noPaddingLeftProvided = !(
+    className?.match(/(^| )p(l|x)-\d+( |$)/) || variant === 'inline'
+  );
+  const noPaddingRightProvided = !(
+    className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline'
+  );
+  return classNames(
     [
       'inline-flex',
       'items-center',
@@ -37,12 +43,8 @@ const getClassName = (
       'transition-all',
     ],
     {
-      'pl-28': !(
-        className?.match(/(^| )p(l|x)-\d+( |$)/) || variant === 'inline'
-      ),
-      'pr-28': !(
-        className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline'
-      ),
+      'pl-28': noPaddingLeftProvided,
+      'pr-28': noPaddingRightProvided,
 
       'hover:border-black dark:hover:border-white': variant !== 'inline',
       'active:border-black dark:active:border-white': true,
@@ -94,6 +96,7 @@ const getClassName = (
     },
     className
   );
+};
 
 const getContent = (
   children: React.ReactNode,
diff --git a/libs/ui-toolkit/src/components/input/input.tsx b/libs/ui-toolkit/src/components/input/input.tsx
index 0b9e21f42..bfa70e6b1 100644
--- a/libs/ui-toolkit/src/components/input/input.tsx
+++ b/libs/ui-toolkit/src/components/input/input.tsx
@@ -15,8 +15,10 @@ export const inputClassNames = ({
 }: {
   hasError?: boolean;
   className?: string;
-}) =>
-  classNames(
+}) => {
+  const noPaddingLeftProvided = !className?.match(/(^| )p(l|x)-\d+( |$)/);
+  const noPaddingRightProvided = !className?.match(/(^| )p(r|x)-\d+( |$)/);
+  return classNames(
     [
       'inline-flex',
       'items-center',
@@ -32,12 +34,13 @@ export const inputClassNames = ({
       'disabled:bg-black-10 disabled:dark:bg-white-10',
     ],
     {
-      'pl-8': !className?.match(/(^| )p(l|x)-\d+( |$)/),
-      'pr-8': !className?.match(/(^| )p(r|x)-\d+( |$)/),
+      'pl-8': noPaddingLeftProvided,
+      'pr-8': noPaddingRightProvided,
       'border-vega-pink dark:border-vega-pink': hasError,
     },
     className
   );
+};
 
 export const inputStyle = ({
   style,