DeveloperBreeze

Component Documentation Development Tutorials, Guides & Insights

Unlock 1+ expert-curated component documentation tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your component documentation skills on DeveloperBreeze.

Creating a Component Library with Storybook and React

Tutorial August 27, 2024
javascript

Now, create a file for the button component:

// 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;

Read More