Play button
Useful links

To supplement your learning, check out these links that offer valuable insights and resources.

When working with buttons we have different types of buttons:

Based on Color

  • Primary
  • Secondary
  • Slider Button

Based on Size

  • Large
  • Medium

Based On Type

  • Button
  • Button Link

The easiest way to standardise this is with these 6 classes

  • Button → Primary Large Button
  • Button Small → Primary Small Button
  • Button Variant →  Secondary Medium Button
  • Button Variant Small → Secondary Small Button
  • Slider Button → Used for Sliders
  • Slider Button Small → Used for Sliders Small
  • Button Link → Usually a link block with an arrow

We’ve tried adding combo classes to buttons to make the process of creating them easier.

But in the end we allow for too many variants on the site and have 20+ different colors, sizes etc per project.

Which is becoming hard to manage and starts confusing Designers, Developers etc. If the project ends up requiring a lot of different buttons, we can go ahead and use Combo Classes on Button elements.