Part I — Implementation

🔤  Importing fonts

Nunito Sans is not being rendered. It seems the Storybook team forgot to import this font, so let’s do that:

• We will import it as part of preview-head.html

💡 What is this file?
  

• We can use Google fonts to import the different weights: 400, 700, 900

• ❗️ Do not forget to also import it as part of our App

📚  Choosing a React Component Library

💡 Why a Component Library?

Material UI has by far the highest community out there and it’s backed up by the Google team ⇒ Best React component libraries (2022 edition)

Install [ Docs ]

yarn add @mui/material @emotion/react @emotion/styled

Cleanup

• Replace our button to be MuiButton instead [ API docs ]
• Add color, size and variant props. Remove CSS properties

• Add this new button version on the App:

⬇️  Download code [ Link ]