Ready to get started?

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

EdgeJS Components #3.3

Adding Button Variants

In this lesson, we'll add variant options for our base button. These will provide light and dark options as well as stateful coloring blue, green, red, and yellow.

Next, let’s add the six different color options for our base button, these will serve as our button variants.

  1. Light

  2. Dark

  3. Blue

  4. Red

  5. Green

  6. Yellow

Getting the Variant Classes

So, first, let’s go ahead and dive back into the Pines UI documentation and copy the variant markup, I’ll also provide it below for convenience.

<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-200 bg-white border rounded-md text-neutral-500 hover:text-neutral-700 border-neutral-200/70 hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-200/60 focus:shadow-outline">
    Button
</button>

<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none">
    Button
</button>

<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 bg-blue-600 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-700 focus:shadow-outline focus:outline-none">
    Button
</button>

<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 bg-red-600 rounded-md hover:bg-red-700 focus:ring-2 focus:ring-offset-2 focus:ring-red-700 focus:shadow-outline focus:outline-none">
    Button
</button>

<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 bg-green-600 rounded-md hover:bg-green-700 focus:ring-2 focus:ring-offset-2 focus:ring-green-700 focus:shadow-outline focus:outline-none">
    Button
</button>

<button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 bg-yellow-500 rounded-md hover:bg-yellow-600 focus:ring-2 focus:ring-offset-2 focus:ring-yellow-600 focus:shadow-outline focus:outline-none">
    Button
</button>
Copied!

Ready to get started?

Join Adocasts+ for $8/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.