Become a member
to unlock all features

Create egghead account to access 5000+ tutorials and resources from expert developers.

Create account

    Creating a generic button React component with multiple variants using styled-components


    In this lesson we’ll improve a generic button primitive component by adding another variant — secondary style.

    We have two variants of a button: primary and secondary. The naïve way would be to define a prop for each:

    jsx<Button primary>Push me</Button>
    <Button secondary>Push me</Button>

    But such API can be confusing, and can lead to unexpected behavior. For example, how this button should look like?

    jsx<Button primary secondary>Push me</Button>

    A button can’t be a primary and a secondary at the same time but the API makes the opposite impression. For exclusive options it’s better to define a single prop with multiple values. I prefer to call this prop variant.

    jsx<Button variant="primary">Push me</Button>
    <Button variant="secondary">Push me</Button>

    We’ll use following libraries:

    You can either use this lesson’s Git repository or install them manually in your project:

    npm install styled-components