Refactor button into multiple types

Refactor support rectangular button and round button

2 files changed, 18 insertions, 6 deletions

diff --git a/src/components/button/button.css b/src/components/button/button.css
index c41d3a4..5547550 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -1,9 +1,19 @@
 @import "../../globals.css";
 
 .base {
-  border: var(--btnBorder);
-  border-radius: var(--borderRadiusBtn);
-  @apply --btnPadding;
   @apply --hoverTransition;
   @apply --btnFontSize;
+  composes: flexCenter;
+}
+
+.rect {
+  composes: base;
+  border: var(--btnBorder);
+  border-radius: var(--borderRadiusBtn);
+  @apply --btnSize;
+}
+
+.round {
+  composes: base;
+  @apply --roundBtnSize;
 }
diff --git a/src/components/button/button.js b/src/components/button/button.js
index 313a57f..4d7569d 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -1,7 +1,9 @@
 import React from 'react'
 
-import { base } from './button.css'
+import { round, rect } from './button.css'
 
-const Button = p => <a href={p.href} className={[base, p.className].join(' ')}>{p.children}</a>
+const button = className => p => <a href={p.href} className={[className, p.className].join(' ')}>{p.children}</a>
 
-export default Button
+export const RectButton = button(rect)
+
+export const RoundButton = button(round)