Design System Development Tutorials, Guides & Insights

// src/components/Button.jsx
import React from 'react';
import PropTypes from 'prop-types';
import './Button.css';

const Button = ({ label, onClick, primary }) => {
    const mode = primary ? 'btn--primary' : 'btn--secondary';
    return (
        <button className={`btn ${mode}`} onClick={onClick}>
            {label}
        </button>
    );
};

Button.propTypes = {
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func,
    primary: PropTypes.bool,
};

Button.defaultProps = {
    onClick: undefined,
    primary: false,
};

export default Button;

Next, add some basic styles for your button:

IKEA uses micro-frontends to create a seamless shopping experience across different platforms and devices. Each section of their e-commerce site, such as product pages, checkout, and user profiles, is a separate micro-frontend, allowing for independent development and deployment.

• Single-SPA: A popular framework for building micro-frontends, Single-SPA allows multiple frameworks to coexist and provides a way to manage routing and state between micro-frontends.
• Module Federation in Webpack: This tool enables the dynamic import of micro-frontends, allowing applications to load parts of other applications at runtime.
• Mosaic: A micro-frontend framework designed to help teams build and deploy micro-frontends with ease.