Merge pull request #55 from saitamau-maximum/feat/button-implementation

ボタンサイズを変更できるようにした
saitamau-maximum · Mar 27, 2024 · f8ce562 · f8ce562
2 parents 00dc6e4 + beabd32
commit f8ce562
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/src/components/LinkButton/LinkButton.module.css b/src/components/LinkButton/LinkButton.module.css
@@ -1,14 +1,25 @@
 .button {
   display: inline-block;
-  font-size: 1.5rem;
   text-align: center;
   text-decoration: none;
 }
 
+.small {
+  font-size: 1rem;
+}
+
+.medium {
+  font-size: 1.5rem;
+}
+
+.large {
+  font-size: 2rem;
+}
+
 .greenButton {
-  padding: 24px 48px;
+  padding: 1em 2em;
   background-color: #439154;
-  color: #FFFFFF;
+  color: #ffffff;
   border: none;
   border-radius: 999px;
   transition: background-color 0.3s ease;
@@ -19,13 +30,17 @@
 }
 
 .grayButton {
-  padding: 12px 64px;
+  padding: 0.5em 3em;
   background-color: #414141;
-  color: #FFFFFF;
-  border: 1px solid #FFFFFF;
+  color: #ffffff;
+  border: 1px solid #ffffff;
   transition: background-color 0.3s ease;
 }
 
+.grayButton.small {
+  padding: 0.5em 2em;
+}
+
 .grayButton:hover {
   background-color: #000000;
 }
diff --git a/src/components/LinkButton/LinkButton.stories.tsx b/src/components/LinkButton/LinkButton.stories.tsx
@@ -9,16 +9,18 @@ export default {
 
 const Template: StoryFn<typeof LinkButton> = (args) => <LinkButton {...args} />;
 
-export const Primary = Template.bind({});
-Primary.args = {
+export const Green = Template.bind({});
+Green.args = {
   children: 'Click Me',
   variant: 'green',
   href: '/',
+  size: 'medium',
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
+export const Gray = Template.bind({});
+Gray.args = {
   children: 'Click Me',
   variant: 'gray',
   href: '/',
+  size: 'medium',
 };
diff --git a/src/components/LinkButton/LinkButton.tsx b/src/components/LinkButton/LinkButton.tsx
@@ -6,17 +6,20 @@ import styles from './LinkButton.module.css';
 interface ButtonProps extends Omit<LinkProps, 'href'> {
   href: string;
   variant: 'green' | 'gray';
+  size?: 'small' | 'medium' | 'large';
   children: React.ReactNode;
 }
 
 export const LinkButton: React.FC<ButtonProps> = ({
   href,
   variant,
+  size = 'medium',
   children,
   ...props
 }) => {
   const className = clsx(
     styles.button,
+    styles[size],
     variant === 'green' && styles.greenButton,
     variant === 'gray' && styles.grayButton,
   );