Button Styling Guide

Base Button (.btn)

The .btn class provides foundational styling for all buttons, including:

• Fixed Height: 30px (max-h-[30px], min-h-[30px], h-[30px])
• Background: Primary color (bg-primary)
• Border: Primary border (border, border-primary)
• Text Color: White (text-white)
• Padding: Horizontal 2px, vertical 3.5px (px-2, py-[3.5px])
• Cursor: Pointer (cursor-pointer)
• Hover Effect: Slightly darker primary color (hover:bg-primary/90, hover:border-primary/90, duration-300)
• Border Radius: Default (rounded-default)
• Disabled State: Not allowed cursor (disabled:cursor-not-allowed)

Example:

<button class="btn">Primary Button</button>

Filled Button Variations

These classes extend the .btn class to provide semantic meanings through color variations.

• .btn-danger (Destructive actions, e.g., delete):

  • Color: Red (bg-red-600!, border-red-600!)
  • Hover: Darker red (hover:bg-red-500!, hover:border-red-500!)

• .btn-success (Successful actions or confirmations):

  • Color: Green (bg-green-600!, border-green-600!)
  • Hover: Darker green (hover:bg-green-500!, hover:border-green-500!)

• .btn-warning (Actions requiring caution):

  • Color: Yellow (bg-yellow-500!, border-yellow-500!)
  • Hover: Darker yellow (hover:bg-yellow-400!, hover:border-yellow-400!)

• .btn-secondary (Less prominent actions):

  • Color: Secondary foreground (bg-secondary-foreground/80!, border-secondary-foreground/80!)
  • Hover: Same secondary foreground with opacity (hover:bg-secondary-foreground/80!, hover:border-secondary-foreground/80!)

Example:

<button class="btn btn-danger">Delete</button>
<button class="btn btn-success">Save</button>
<button class="btn btn-warning">Proceed with Caution</button>
<button class="btn btn-secondary">More Info</button>

Outline Button (.btn-outline)

The .btn-outline class provides a transparent background button with a colored border, sharing the same height and padding as the base button.

• Fixed Height: 30px
• Border: Primary border (border, border-primary)
• Text Color: Primary (text-primary)
• Minimum Width: 30px (min-w-[30px], ensures square shape for icon-only buttons)
• Hover Effect: Fills with primary color, text becomes white (hover:bg-primary, hover:border-primary/90, hover:text-white, duration-300)
• Border Radius: Default (rounded-default)

Example:

<button class="btn-outline">Outline Button</button>

Outline Button Variations

These classes extend the .btn-outline class to provide semantic meanings through color. Text and border colors match the filled button variations, with hover effects filling the button with the corresponding color and changing text to white.

• .btn-outline.btn-danger:

  • Color: Red text and border (text-red-600!, border-red-600!)
  • Hover: Fills with red, text white (hover:bg-red-500!, hover:border-red-500!, hover:text-white!)

• .btn-outline.btn-success:

  • Color: Green text and border (text-green-600!, border-green-600!)
  • Hover: Fills with green, text white (hover:bg-green-500!, hover:border-green-500!, hover:text-white!)

• .btn-outline.btn-warning:

  • Color: Yellow text and border (text-yellow-500!, border-yellow-500!)
  • Hover: Fills with yellow, text white (hover:bg-yellow-400!, hover:border-yellow-400!, hover:text-white!)

• .btn-outline.btn-secondary:

  • Color: Secondary foreground text and border (text-secondary-foreground/80!, border-secondary-foreground/80!)
  • Hover: Fills with secondary foreground, text white (hover:bg-secondary-foreground/80!, hover:border-secondary-foreground/80!, hover:text-white!)

Example:

<button class="btn-outline btn-danger">Cancel</button>
<button class="btn-outline btn-success">View Details</button>

Action Button (.btn-action)

The .btn-action class is designed for small, often icon-only, buttons that perform specific actions.

• Fixed Height: 30px
• Background: Light gray (bg-[#EAEAEA])
• Border: Light gray (border, border-[#EAEAEA])
• Text Color: White (text-white, set for consistency but may not be visible with icons)
• Padding: Horizontal 2px, vertical 3.5px (px-2, py-[3.5px])
• Cursor: Pointer (cursor-pointer)
• Hover/Focus Effect: Slightly darker gray (hover:bg-[#E6E5E5], hover:border-[#E6E5E5], focus:bg-[#E6E5E5], duration-300)
• Border Radius: Default (rounded-default)
• Fixed Width: 40px (w-[40px])

Example:

<button class="btn btn-action">
  <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-5">
    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 000 2h8a1 1 0 100-2H6z"></path>
  </svg>
</button>

Code Example

<template>
    <h1>Button Styles</h1>

    <div class="button-group">
        <h2>Base Button</h2>
        <button class="btn">Primary Button</button>
        <button class="btn" disabled>Disabled Button</button> // add cursor pointer disabled for visual showing
    </div>

    <div class="button-group">
        <h2>Filled Button Variations</h2>
        <button class="btn btn-danger">Delete Item</button>
        <button class="btn btn-success">Confirm Order</button>
        <button class="btn btn-warning">Review Changes</button>
        <button class="btn btn-secondary">Archive</button>
    </div>

    <div class="button-group">
        <h2>Outline Button</h2>
        <button class="btn-outline">Outline Button</button>
    </div>

    <div class="button-group">
        <h2>Outline Button Variations</h2>
        <button class="btn-outline btn-danger">Discard</button>
        <button class="btn-outline btn-success">Approve</button>
        <button class="btn-outline btn-warning">Skip</button>
        <button class="btn-outline btn-secondary">Details</button>
    </div>

    <div class="button-group">
        <h2>Action Button</h2>
        <button class="btn btn-action">
            <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-5">
                <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 000 2h8a1 1 0 100-2H6z"></path>
            </svg>
        </button>
        <button class="btn btn-action">
            <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-5">
                <path clip-rule="evenodd" fill-rule="evenodd" d="M10 2a.75.75 0 01.75.75v6.5a.75.75 0 01-1.5 0v-6.5A.75.75 0 0110 2z"></path>
                <path clip-rule="evenodd" fill-rule="evenodd" d="M5.602 11.233a.75.75 0 01-.848 1.05l-1.34-1.071a.75.75 0 01.905-1.13l1.34 1.07a.75.75 0 01-.197.151zm8.796 0a.75.75 0 01-.198-.15l1.34-1.07a.75.75 0 01.905 1.13l-1.34 1.07a.75.75 0 01-.847-1.05zM10 13a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 13z"></path>
            </svg>
        </button>
    </div>
  </template>

Screenshot