diff --git a/client/src/components/Design/components/NumberKeyboard/Keypad.tsx b/client/src/components/Design/components/NumberKeyboard/Keypad.tsx
index 6445908d..a31b35d9 100644
--- a/client/src/components/Design/components/NumberKeyboard/Keypad.tsx
+++ b/client/src/components/Design/components/NumberKeyboard/Keypad.tsx
@@ -5,18 +5,16 @@ import {setDarker, setLighter} from '@components/Design/utils/colors';
 
 import {Text, useTheme} from '@components/Design';
 
-interface Props {
+type KeypadProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   value: string;
-  ariaLabel?: string;
-  onClick: () => void;
-  disabled?: boolean;
-}
+};
 
-export function Keypad({value, ariaLabel, onClick, disabled = false}: Props) {
+export function Keypad({value, ...restButtonProps}: KeypadProps) {
   const {theme} = useTheme();
+
   return (
     <button
-      aria-label={ariaLabel}
+      {...restButtonProps}
       css={css`
         display: flex;
         justify-content: center;
@@ -35,8 +33,6 @@ export function Keypad({value, ariaLabel, onClick, disabled = false}: Props) {
           }
         }
       `}
-      onClick={onClick}
-      disabled={disabled}
     >
       <Text size="title">{value}</Text>
     </button>
diff --git a/client/src/components/Design/components/NumberKeyboard/NumberKeyboard.tsx b/client/src/components/Design/components/NumberKeyboard/NumberKeyboard.tsx
index 0b3c36a2..0b347b55 100644
--- a/client/src/components/Design/components/NumberKeyboard/NumberKeyboard.tsx
+++ b/client/src/components/Design/components/NumberKeyboard/NumberKeyboard.tsx
@@ -68,7 +68,7 @@ export default function NumberKeyboard({type, maxNumber, initialValue, onChange}
         <Keypad
           key={keypad}
           value={keypad}
-          ariaLabel={ariaLabel}
+          aria-label={ariaLabel}
           disabled={keypad === ''}
           onClick={keypad === '<-' ? onClickDelete : () => onClickKeypad(keypad)}
         />