diff --git a/src/App.tsx b/src/App.tsx
index 2ae4da2..cb114dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,16 @@
 import { Button } from "./components/Button";
 
-
+function handleOnClick() {
+  console.log("Clicked");
+}
 
 function App() {
+
+
+
   return (
     <div>
-      <Button/>
+      <Button onClick={handleOnClick} color="secondary">My Button</Button>
     </div>
   );
 }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index d0ba658..52792dc 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,6 +1,13 @@
 
-export const Button = () => {
+interface Props {
+    children: string;
+    color: string;
+    onClick: () => void;
+}
+
+export const Button = ({ children, color, onClick }: Props) => {
+    //const buttonType = "btn " + "btn"+"-"+{type};
   return (
-    <button type="button" className="btn btn-primary">Primary</button>
+    <button type="button" className={'btn btn-'+color} onClick={onClick}>{children}</button>
   )
 }