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:

<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?

<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.

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

We’ll use following libraries:

• styled-components

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

npm install styled-components