✨ every button on design system

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -161,136 +161,534 @@ export default function DesignSystem() {
 
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.PRIMARY}>
+						<Button
-							Primary
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							size={EButtonSize.SM}>
+							Primary SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.PRIMARY}
-							styletype={EButtonstyletype.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}
-							Primary
+							size={EButtonSize.SM}>
+							Primary SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.PRIMARY}
-							styletype={EButtonstyletype.TEXT}>
+							styletype={EButtonstyletype.TEXT}
-							Primary
+							size={EButtonSize.SM}>
+							Primary SM
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SECONDARY}>
+						<Button
-							Secondary
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							size={EButtonSize.MD}>
+							Primary MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Primary MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Primary MD
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							size={EButtonSize.LG}>
+							Primary LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Primary LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Primary LG
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							size={EButtonSize.SM}>
+							Secondary SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SECONDARY}
-							styletype={EButtonstyletype.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}
-							Secondary
+							size={EButtonSize.SM}>
+							Secondary SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SECONDARY}
-							styletype={EButtonstyletype.TEXT}>
+							styletype={EButtonstyletype.TEXT}
-							Secondary
+							size={EButtonSize.SM}>
+							Secondary SM
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.NEUTRAL}>
+						<Button
-							Neutral
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							size={EButtonSize.MD}>
+							Secondary MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Secondary MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Secondary MD
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							size={EButtonSize.LG}>
+							Secondary LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Secondary LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Secondary LG
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							size={EButtonSize.SM}>
+							Neutral SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.NEUTRAL}
-							styletype={EButtonstyletype.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}
-							Neutral
+							size={EButtonSize.SM}>
+							Neutral SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.NEUTRAL}
-							styletype={EButtonstyletype.TEXT}>
+							styletype={EButtonstyletype.TEXT}
-							Neutral
+							size={EButtonSize.SM}>
+							Neutral SM
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.ERROR}>
+						<Button
-							Error
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							size={EButtonSize.MD}>
+							Neutral MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Neutral MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Neutral MD
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							size={EButtonSize.LG}>
+							Neutral LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Neutral LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Neutral LG
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							size={EButtonSize.SM}>
+							Error SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.ERROR}
-							styletype={EButtonstyletype.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}
-							Error
+							size={EButtonSize.SM}>
+							Error SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.ERROR}
-							styletype={EButtonstyletype.TEXT}>
+							styletype={EButtonstyletype.TEXT}
-							Error
+							size={EButtonSize.SM}>
+							Error SM
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.WARNING}>
+						<Button
-							Warning
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							size={EButtonSize.MD}>
+							Error MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Error MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Error MD
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							size={EButtonSize.LG}>
+							Error LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Error LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Error LG
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							size={EButtonSize.SM}>
+							Warning SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.WARNING}
-							styletype={EButtonstyletype.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}
-							Warning
+							size={EButtonSize.SM}>
+							Warning SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.WARNING}
-							styletype={EButtonstyletype.TEXT}>
+							styletype={EButtonstyletype.TEXT}
-							Warning
+							size={EButtonSize.SM}>
+							Warning SM
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							size={EButtonSize.MD}>
+							Warning MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Warning MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Warning MD
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							size={EButtonSize.LG}>
+							Warning LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Warning LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Warning LG
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SUCCESS}>
+						<Button
-							Success
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							size={EButtonSize.SM}>
+							Success SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SUCCESS}
-							styletype={EButtonstyletype.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}
-							Success
+							size={EButtonSize.SM}>
+							Success SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SUCCESS}
-							styletype={EButtonstyletype.TEXT}>
+							styletype={EButtonstyletype.TEXT}
-							Success
+							size={EButtonSize.SM}>
+							Success SM
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							size={EButtonSize.MD}>
+							Success MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Success MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Success MD
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							size={EButtonSize.LG}>
+							Success LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Success LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Success LG
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.INFO}>
+						<Button
-							Info
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							size={EButtonSize.SM}>
+							Info SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.INFO}
-							styletype={EButtonstyletype.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}
-							Info
+							size={EButtonSize.SM}>
+							Info SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.INFO}
-							styletype={EButtonstyletype.TEXT}>
+							styletype={EButtonstyletype.TEXT}
-							Info
+							size={EButtonSize.SM}>
+							Info SM
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							size={EButtonSize.MD}>
+							Info MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Info MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Info MD
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							size={EButtonSize.LG}>
+							Info LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Info LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Info LG
 						</Button>
 					</div>
 					<div className={classes["rows"]}>