Become a member
to unlock all features

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

Create account

    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.

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

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

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

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

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

    npm install styled-components

    Useful links and documentation: