Overview

A reusable button component for web interfaces, supporting multiple variants, sizes, and states with accessible interactions.

Variations

• Primary: Solid blue (#0052CC), white text (#FFFFFF).
• Secondary: Blue outline (#0052CC), transparent background.
• Tertiary: Blue text (#0052CC), no background/border.
• Danger: Red background (#D32F2F), white text.
• Sizes:
  • Small: 24px height, 14px font, 8px/4px padding.
  • Medium: 32px height, 16px font, 12px/8px padding.
  • Large: 40px height, 18px font, 16px/12px padding.
• States: Default, Hover, Active, Disabled, Focus, Loading.

Visual Properties

• Colors:
  • Primary: -primary-bg: #0052CC; --primary-text: #FFFFFF
  • Secondary: -secondary-border: #0052CC; --secondary-text: #0052CC
  • Tertiary: -tertiary-text: #0052CC
  • Danger: -danger-bg: #D32F2F; --danger-text: #FFFFFF
  • Disabled: -disabled-bg: #E0E0E0; --disabled-text: #9E9E9E
  • Hover: Lighten background by 10% (e.g., #1A73E8 for primary).
  • Focus: -focus-outline: 2px solid #4C9AFF
• Typography:
  • Font: Roboto, sans-serif.
  • Weight: 500.
  • Size: 14px (small), 16px (medium), 18px (large).
• Border Radius: 4px (rectangular), 50% (circular icon-only).
• Padding:
  • Small: 8px horizontal, 4px vertical.
  • Medium: 12px horizontal, 8px vertical.
  • Large: 16px horizontal, 12px vertical.
• Icons:
  • Size: 16px (small), 20px (medium), 24px (large).
  • Spacing: 8px from label.
• Loading Indicator: 20px SVG spinner, centered.

Interaction Behaviors

• Click: Triggers onclick, scales to 95% (transform: scale(0.95)).
• Hover: Lightens background, cursor: pointer, 300ms transition.
• Focus: 2px blue outline, keyboard-accessible.