Add HttpMethodBadge component for HTTP method visualization

[jalexw]

Summary

Introduces a new HttpMethodBadge component for displaying HTTP methods (GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD, TRACE, CONNECT) with semantic color coding and flexible styling options.

Changes

• New component: HttpMethodBadge — a badge component that renders HTTP methods with method-specific colors across three appearance modes (solid, soft, outline)
• Variant definitions: http-method-badge-variants.ts exports type-safe HTTP method, appearance, and size constants
• Comprehensive Storybook stories: Demonstrates all methods, appearances, sizes, and real-world usage patterns (endpoint lists, inline text, fixed-width alignment)
• Color palette: Each HTTP method maps to a semantic color (GET→sky, POST→emerald, PUT→warning, PATCH→violet, DELETE→destructive, etc.) with light/dark mode support
• Flexible sizing: Three size options (sm, md, lg) with optional fixed-width mode for vertical alignment in endpoint lists
• Case-insensitive input: Accepts both uppercase and lowercase method names, always renders uppercase
• Custom labels: Supports optional label override for special cases
• Package exports: Added to main src/components/ui/index.ts for public API

Implementation Details

• Uses class-variance-authority for variant management with compound variants for fixed-width sizing
• Semantic color tokens (primary, destructive, warning, muted) preferred where applicable; Tailwind primitives for remaining methods
• Component accepts standard HTML span props for flexibility
• Data attributes (data-method, data-appearance) for testing and styling hooks
• Version bumped to 0.74.0

https://claude.ai/code/session_012EJ4sDAq1TBKKBKbg3UmEY

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ui	Ready	Preview, Comment	Jun 11, 2026 1:02pm