feat: breakpoint button

src/components/atoms/buttons/BreakpointButton.tsx

@@ -0,0 +1,31 @@
+import { IconButton } from "@mui/material";
+import { Circle } from "@mui/icons-material";
+import React, { FC } from "react";
+
+interface BreakpointButtonProps {
+  handleClick: () => void;
+  size?: "small" | "medium" | "large";
+  changeColor?: boolean;
+}
+
+export const BreakpointButton =
+  ({ handleClick, size, changeColor }: BreakpointButtonProps) => {
+  return (
+    <IconButton aria-label="add" size={size || "small"} onClick={handleClick}
+    sx={{
+      "&:hover": {
+        background: 'transparent',
+      }
+    }}
+    >
+      <Circle  sx={{
+        fontSize: '1rem',
+        marginLeft: '5px',
+        color: changeColor ? 'red': 'gray',
+        "&:hover": {
+          color: changeColor ? 'darkRed' : 'dimgray',
+        }
+      }}/>
+    </IconButton>
+  );
+};