Design System using Storybook

In this project, I built a button component and showcased the component in the storybook, the component has three different sizes and accepts a color prop with three values, it also has three variants as follows:

  • Primary: Has a background that matches the border.
  • Secondary: Has a white background with a border that matches the text color.
  • Text: Has no background and no outline, it should show an underline when user hover over it.

Take A Look

image

This project was bootstrapped with Create React App.

To run the project:

  1. You should install all dependencies: npm install
  2. Open the project on your browser by typing: npm run storybook