Adocasts Adocasts

Ready to get started?

Join Adocasts+ for $8/mo or sign into your account to get access to all of our lessons.

Join for $8/mo Sign in

EdgeJS Components #3.2

Adding Button Size Options

In this lesson, we'll add four size options to our base button large, base, small, and extra small. These sizes will then automatically be available as we add our button variants and styles.

Sign Up for Free Sign In to Track Progress Browse Code

Next, let’s add size options to our button. We’re going to have four different size options, which we’ll define directly inside our base button.

  1. lg: Large

  2. base: Base (which we already have)

  3. sm: Small

  4. xs: Extra small

Defining our Button Sizes

The first thing we’ll want to do is remove the current size-based classes from our base button, we’ll then use these classes to define our base size option.

As a reminder, here’s what we currently have for our base button component:

Ready to get started?

Join Adocasts+ for $8/mo or sign into your account to get access to all of our lessons.

Join for $8/mo Sign in

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.