lautaandreani / design-system-challenge

button component challenge - devchallegens.io

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

  Icon: https://google.github.io/material-design-icons/

---

Run project 🚀

pnpm i
pnpm dev

Techs ⚙

• React
• Typescript
• TailwindCSS
• Material Icons & fontsource