From 9650393aa4644e239e971c66e3d65dfa950f3e60 Mon Sep 17 00:00:00 2001 From: Jerel Miller <jerelmiller@gmail.com> Date: Mon, 6 Jul 2020 23:47:07 -0700 Subject: [PATCH] feat: Add a small button type --- src/components/Button.js | 8 +++++++- src/components/Button.module.scss | 4 ++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/Button.js b/src/components/Button.js index a163b1c74..f04e5e8bd 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -8,11 +8,12 @@ const Button = ({ children, className, variant, + size, ...props }) => ( <Component {...props} - className={cx(className, styles.button, styles[variant])} + className={cx(className, styles.button, styles[variant], styles[size])} > {children} </Component> @@ -24,10 +25,15 @@ Button.VARIANT = { NORMAL: 'normal', }; +Button.SIZE = { + SMALL: 'small', +}; + Button.propTypes = { as: PropTypes.elementType, children: PropTypes.node, className: PropTypes.string, + size: PropTypes.oneOf([Object.values(Button.SIZE)]), type: PropTypes.oneOf(['button', 'submit', 'reset']), variant: PropTypes.oneOf(Object.values(Button.VARIANT)).isRequired, }; diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss index f537ab547..7b58812f0 100644 --- a/src/components/Button.module.scss +++ b/src/components/Button.module.scss @@ -46,3 +46,7 @@ color: var(--color-brand-400); } } + +.small { + font-size: 0.75rem; +}