refactor: refactor the button component using forwardRef (#4379)

Co-authored-by: KVOJJJin <jzongcode@gmail.com>

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -80,7 +80,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
     <Modal
       className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('app.createFromConfigFile')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
@@ -93,7 +93,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
       {isAppsFull && <AppsFull loc='app-create-dsl' />}
       <div className='pt-6 flex justify-end'>
         <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
-        <Button className='text-sm font-medium' disabled={isAppsFull || !currentFile} type="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
+        <Button className='text-sm font-medium' disabled={isAppsFull || !currentFile} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
       </div>
     </Modal>
   )