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