Button component

Challenge: Create a reusable button with all the states in the design and a page displaying all the states. You can work on the same project with other design system challenges. Use Front-end libraries like React or Vue. Don’t look at the existing solution. Fulfill user stories below:

  • User story: I can see different button types: default, outline and text
  • User story: I can choose to disable box-shadow
  • User story: I can choose to disable the button
  • User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)
  • User story: I can have different button sizes
  • User story: I can have different colors
  • User story: When I hover or focus, I can see visual indicators
  • User story: I can still access all button attributes
  • User story (optional): Show button in a similar way like the design or use Storybook. Otherwise, showing the button in multiple states is enough


Once you completed, submit your solutions by providing URLs for both GitHub repository and live app on any hosting platform (5 Free Hosting Platform) and explain briefly what you have done.

As long as you fulfill all the user stories, you can give your personal touches by adding transition, using your own images, changing colors,...

Remember to put your name on the footer to prevent other from submitting your solutions.

You can check others’ solutions and give them feedbacks.

How to start

  1. Read the challenge's details
  2. Start the challenge and download the resources
  3. Check designs on Figma
  4. Have fun coding!!