Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

robot mascot smiling

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.

Published
Nov 20, 23
Duration
2m 29s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

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 Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join The Discussion! (0 Comments)

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

robot comment bubble

Be the first to Comment!