replaced Button with IconButton component

tarasglek · Apr 12, 2024 · e973d21 · e973d21
1 parent c66a5d4
commit e973d21
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/src/components/PasswordInput.tsx b/src/components/PasswordInput.tsx
@@ -1,5 +1,5 @@
 import { useState, type ComponentPropsWithRef } from "react";
-import { Input, InputGroup, InputRightElement, Button } from "@chakra-ui/react";
+import { Input, InputGroup, InputRightElement, IconButton } from "@chakra-ui/react";
 import { IoMdEye, IoMdEyeOff } from "react-icons/io";
 
 type PasswordInputProps = ComponentPropsWithRef<typeof Input> & {
@@ -27,9 +27,15 @@ function PasswordInput({ inputSize = "md", isInvalid, ...props }: PasswordInputP
         isInvalid={isInvalid}
       />
       <InputRightElement width={paddingRight}>
-        <Button variant="ghost" h="1.75rem" size={buttonSize} onClick={() => setShow(!show)}>
-          {show ? <IoMdEyeOff /> : <IoMdEye />}
-        </Button>
+        <IconButton
+          variant="ghost"
+          h="1.75rem"
+          size={buttonSize}
+          icon={show ? <IoMdEyeOff /> : <IoMdEye />}
+          onClick={() => setShow(!show)}
+          aria-label={show ? "Hide" : "Show"}
+          title={show ? "Hide" : "Show"}
+        />
       </InputRightElement>
     </InputGroup>
   );