Button Design Patterns

Consistent, accessible button recipes for the Meridian dashboard.

Primary CTA

<button className="px-6 py-2.5 rounded-lg bg-[#8B5CF6]
  text-white font-medium hover:bg-[#7C4FE0]
  transition-colors disabled:opacity-50
  disabled:cursor-not-allowed">
  Save Changes
</button>

Secondary Outline

<button className="px-6 py-2.5 rounded-lg border
  border-[#8B5CF6] text-[#8B5CF6] font-medium
  hover:bg-[#8B5CF6]/10 transition-colors">
  Cancel
</button>

Danger / Destructive

<button className="px-6 py-2.5 rounded-lg
  bg-red-600/20 border border-red-500/40
  text-red-400 font-medium
  hover:bg-red-600/30 transition-colors">
  Delete Account
</button>

Link-style Button

Learn more →

<Link href="/docs" className="text-[#8B5CF6]
  hover:text-[#F472B6] underline
  underline-offset-4 transition-colors
  font-medium">
  Learn more →
</Link>

Sizing Scale

/* Small  */ px-3 py-1.5 rounded-md text-xs
/* Default */ px-6 py-2.5 rounded-lg text-sm
/* Large  */ px-8 py-3.5 rounded-xl text-base

All buttons use transition-colors for smooth hover states. Disabled states apply opacity-50 cursor-not-allowed.