diff --git a/packages/ui-components/src/components/Button/Button.tsx b/packages/ui-components/src/components/Button/Button.tsx
index f26f4f6d..62fe8353 100644
--- a/packages/ui-components/src/components/Button/Button.tsx
+++ b/packages/ui-components/src/components/Button/Button.tsx
@@ -39,13 +39,13 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
 		return (
 			<button
-				{...otherProps}
 				ref={ref}
 				className={buttonClass}
 				onClick={onClick}
 				disabled={disabled}
 				type={type}
 				aria-label={ariaLabel}
+				{...otherProps}
 			>
 				{children}
 			</button>
diff --git a/packages/ui-components/src/components/Button/ButtonIcon.tsx b/packages/ui-components/src/components/Button/ButtonIcon.tsx
index c3c1bd75..67135f07 100644
--- a/packages/ui-components/src/components/Button/ButtonIcon.tsx
+++ b/packages/ui-components/src/components/Button/ButtonIcon.tsx
@@ -39,13 +39,13 @@ export const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(
 		return (
 			<>
 				<button
-					{...otherProps}
 					ref={ref}
 					className={buttonClass}
 					onClick={onClick}
 					disabled={disabled}
 					type={type}
 					aria-label={ariaLabel || label}
+					{...otherProps}
 				>
 					{children}
 				</button>
diff --git a/packages/ui-components/src/components/TextInput/TextInput.tsx b/packages/ui-components/src/components/TextInput/TextInput.tsx
index a3ab728e..34ea4221 100644
--- a/packages/ui-components/src/components/TextInput/TextInput.tsx
+++ b/packages/ui-components/src/components/TextInput/TextInput.tsx
@@ -66,7 +66,6 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 					{label}
 				</label>
 				<input
-					{...extraProps}
 					ref={ref}
 					id={inputId}
 					name={name}
@@ -78,6 +77,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 					{...(error && { "aria-invalid": "true" })}
 					{...(rightElement &&
 						!raw && { style: { paddingRight: inputPaddingRight } })}
+					{...extraProps}
 				/>
 				{!raw && (
 					<label
diff --git a/packages/ui-components/src/components/TextInput/TextInputMask.tsx b/packages/ui-components/src/components/TextInput/TextInputMask.tsx
index 085cd17b..cf1857d3 100644
--- a/packages/ui-components/src/components/TextInput/TextInputMask.tsx
+++ b/packages/ui-components/src/components/TextInput/TextInputMask.tsx
@@ -135,7 +135,6 @@ export const TextInputMask = React.forwardRef<
 		return (
 			<>
 				<TextInput
-					{...otherProps}
 					ref={mergedInputRef}
 					name={name}
 					label={label}
@@ -154,6 +153,7 @@ export const TextInputMask = React.forwardRef<
 							{masked ? <IconShow /> : <IconHide />}
 						</ButtonIcon>
 					}
+					{...otherProps}
 				/>
 
 				<LiveRegion