Free Guide

UI/UX Component Guide 2026

Learn UI/UX components with real examples and AI prompt templates. Built for Business, PM, and anyone who wants to communicate design and prompt AI for coding.

action

Button

Triggers an action when clicked. The most important interactive element in any interface.

Preview

When to Use

  • Submit a form (sign up, login, checkout)
  • Trigger an action (save, delete, share)
  • Navigate to another page (CTA)

Best Practices

  • Primary button = 1 per section max
  • Use verb labels: 'Save changes' not 'OK'
  • Show loading state when processing
  • Disabled state when action is unavailable

✓ Do

  • Use consistent sizing across pages
  • Make touch targets at least 44px
  • Add focus ring for accessibility

✗ Don't

  • Don't use more than 3 styles on one page
  • Don't make buttons look like links
  • Don't use red for non-destructive actions

AI Prompt Example

Create a primary button that says 'Get Started' with a right arrow icon. On click, navigate to /signup. Include hover and loading states.