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

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

web/app/components/base/emoji-picker/index.tsx

@@ -189,14 +189,14 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
     </div>
     <Divider className='m-0' />
     <div className='w-full flex items-center justify-center p-3 gap-2'>
-      <Button type="default" className='w-full' onClick={() => {
+      <Button variant="default" className='w-full' onClick={() => {
         onClose && onClose()
       }}>
         {t('app.emoji.cancel')}
       </Button>
       <Button
         disabled={selectedEmoji === ''}
-        type="primary"
+        variant="primary"
         className='w-full'
         onClick={() => {
           onSelect && onSelect(selectedEmoji, selectedBackground)