Creating a button React component using styled-components

In this lesson we’ll create a generic button primitive component the has one style, using styled-components.

Let’s discuss the API first.

Our button will have a default state.

<Button onClick={() => console.log('henlo')}>Push me</Button>

Disabled state. Let’s use the disabled prop like on a plain HTML button element, because our button is an extension of the native HTML button and there’s no need to create a new API when a familiar to developers API already exists:

<Button disabled>Can’t touch this</Button>

We also want to make sure our button works as a link too:

<Button as="a" href="/">Push me</Button>

We don’t have to implement as prop because it’s added to every component by styled-components automatically, but we need to make sure styles don’t break with another HTML element.

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

Useful links and documentation:

• styled-components docs