Smart Component Exercise

• View the Final Sassdoc Docs
• $ git checkout 02-exercise
• Scaffold a Button component npm run scaffold Button
• Add an <button> tag with class of Button to the template
• Add a click event handler and emit a click event.
• Add the following styles
  • background primary
  • color invertedText
  • no border
  • font size 1
  • padding, spacing size -1
  • on hover background is primary with 10 darkness
  • on active background is secondary

Remember you can use get-color($name, $lighten, $invert), get-type($number) and get-space($number) functions to get the correct style values.

Button will be used by the next component we make, so don't worry about importing it into the App.vue file yet.