diff --git a/src/App.tsx b/src/App.tsx
index cb114dd..d8822ef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,7 +10,7 @@ function App() {
 
   return (
     <div>
-      <Button onClick={handleOnClick} color="secondary">My Button</Button>
+      <Button onClick={handleOnClick} color="success">My Button</Button>
     </div>
   );
 }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 52792dc..d99bc84 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,11 +1,11 @@
 
 interface Props {
     children: string;
-    color: string;
+    color?: 'primary' | 'secondary' | 'success';
     onClick: () => void;
 }
 
-export const Button = ({ children, color, onClick }: Props) => {
+export const Button = ({ children, color='primary', onClick }: Props) => {
     //const buttonType = "btn " + "btn"+"-"+{type};
   return (
     <button type="button" className={'btn btn-'+color} onClick={onClick}>{children}</button>