## Design System Buttons Challenge

Live version of a project can be found [here](https://objective-davinci-e4f803.netlify.app/designsystem/ "Design System Buttons live demo")

**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 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](https://storybook.js.org/). Otherwise, showing the button in multiple states is enough

**Practiced:** In this project I was practicing BEM methodology, not exactly sure if this is a correct way but this project was a great opportunity to try it

![Preview image of a project](images/designsystem-preview.png)
