1.8 KiB

Raw Blame History

Story 9.4: Component Styling - Buttons

Epic Reference

Epic 9: Design & Branding Implementation

User Story

As a user, I want consistent, professional button styling, So that interactive elements are clear and visually appealing.

Acceptance Criteria

Primary Button

Background: Gold (#D4AF37)
Text: Dark Navy Blue
Hover: Light Gold (#F4E4B8)
Border-radius: 6px
Padding: 12px 24px

Secondary Button

Background: Transparent
Border: 2px solid Gold
Text: Gold
Hover: Gold background, Navy text

Disabled State

Background: #CCCCCC
Text: #666666
No hover effect
Cursor: not-allowed

Danger Button

Background: #E74C3C
Text: White

Features

Loading states with spinner
Focus states for accessibility
Flux UI button integration

Technical Notes

/* Extend Flux UI buttons */
.btn-primary {
  @apply bg-gold text-navy hover:bg-gold-light rounded-md px-6 py-3 font-semibold transition-colors;
}

.btn-secondary {
  @apply bg-transparent border-2 border-gold text-gold hover:bg-gold hover:text-navy rounded-md px-6 py-3 font-semibold transition-colors;
}

.btn-danger {
  @apply bg-danger text-white hover:bg-danger/90 rounded-md px-6 py-3 font-semibold transition-colors;
}

/* Loading state */
.btn-loading {
  @apply relative pointer-events-none;
}

.btn-loading::after {
  content: '';
  @apply absolute inset-0 flex items-center justify-center;
  /* Spinner styles */
}

Definition of Done

Primary button styled
Secondary button styled
Danger button styled
Disabled states work
Loading states work
Focus states accessible
Tests pass

Estimation

Complexity: Medium | Effort: 3 hours

1.8 KiB Raw Blame History