nikibah-test-package/src/MyButton.js

Demo component

import React from "react";
import "./MyButton.css";

const SIZES = ["btn--wide", "btn--large", "btn--medium", "btn--small"];
const COLOR = ["primary", "black", "red"];
const BORDER_COLOR = ["primary-border", "black-border", "red-border"];

export const MyBasicButton = ({ children, buttonSize, buttonColor }) => {
	const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
	const checkButtonColor = COLOR.includes(buttonColor)
		? buttonColor
		: COLOR[0];
	return (
		<button className={`btn ${checkButtonSize} ${checkButtonColor}`}>
			{children}{" "}
		</button>
	);
};

export const MyOutlineButton = ({
	children,
	buttonSize,
	buttonBorderColor,
}) => {
	const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
	const checkButtonBorderColor = BORDER_COLOR.includes(buttonBorderColor)
		? buttonBorderColor
		: BORDER_COLOR[0];
	return (
		<button
			className={`btn--outline ${checkButtonSize} ${checkButtonBorderColor}`}
		>
			{children}{" "}
		</button>
	);
};

export const ShowMessageDiv = ({ message }) => {
	return <h1>{message}</h1>;
};