Buttons

Well, buttons, probably heard of it right?! Actionable elements actioning other things, one of the basics in the user interface world

  • Keep labels short
  • Label should be in Title Case
  • Can't contain more than one icon
  • Don't use different sizes when buttons are next to each other
  • Disabled buttons should always have an explanation about their state next to them
  • Icon-only buttons should be avoided and should still have a semantic label
Example showcase

Destructive action button

Example showcase