🎨 improve Button example

src/components/atoms/Button/Button.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import Button from './Button';
+import Button, { Props } from './Button';
 
 export default {
   title: 'Atoms/Button',
   component: Button,
 };
 
-const Template = (args) => <Button {...args} />;
+const Template = (args: Props) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 Primary.args = {
@@ -20,12 +20,6 @@ Secondary.args = {
   label: 'Button',
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
 export const Small = Template.bind({});
 Small.args = {
   size: 'small',

src/components/atoms/Button/Button.tsx

@@ -1,17 +1,29 @@
 import React from 'react';
 
-type Props = {
-  primary?: boolean,
-  size?: 'small' | 'medium' | 'large',
-  label: string,
-  onClick?: () => void,
-}
+export type Props = {
+  primary?: boolean;
+  size?: 'small' | 'medium';
+  label: string;
+  onClick?: () => void;
+};
 
 const Button = ({ primary, size, label, ...props }: Props): JSX.Element => {
+  const color = primary ? 'indigo' : 'gray';
+
+  const paddings = () => {
+    switch (size) {
+      case 'small':
+        return 'px-3 py-1';
+
+      default:
+        return 'px-5 py-3';
+    }
+  };
+
   return (
     <button
       type="button"
-      className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+      className={`inline-flex items-center justify-center ${paddings()} text-base font-medium text-white bg-${color}-600 border border-transparent rounded-md hover:bg-${color}-700`}
       {...props}
     >
       {label}