Reusable UI Components

Build a complete set of production-quality UI components — buttons, cards, badges, alerts, and form elements with proper states and accessibility.

55 min•By Priygop Team•Last updated: Feb 2026

Button Component System

Base Button: .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font-weight: 500; cursor: pointer; transition: all 150ms ease; }
Variants: .btn-primary (solid fill + white text), .btn-secondary (outline + colored text), .btn-ghost (transparent bg + subtle hover), .btn-danger (red for destructive actions). Each variant uses token colors
Sizes: .btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }, .btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-lg); }. Size modifiers only change padding and font-size
States: :hover (darken 10%), :active (darken 15% + scale(0.98)), :focus-visible (outline: 2px solid var(--color-primary); outline-offset: 2px), :disabled (opacity: 0.5; pointer-events: none; cursor: not-allowed)
Icon Buttons: .btn-icon { padding: var(--space-2); aspect-ratio: 1; } — square button for icons only. Combine with .btn-sm or .btn-lg for size. Add aria-label for accessibility
Loading State: .btn-loading { color: transparent; pointer-events: none; position: relative; } .btn-loading::after { content: ''; position: absolute; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; }

Base Card: .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow 200ms ease; } .card:hover { box-shadow: var(--shadow-lg); }
Card Sections: .card-header (padding + bottom border), .card-body (main padding), .card-footer (padding + top border + flex for actions). Consistent internal spacing with var(--space-4)
Feature Card: Image at top, title, description, CTA button at bottom — display: flex; flex-direction: column; .card-body { flex: 1; } ensures button always at bottom regardless of content length
Alert Component: .alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border-left: 4px solid; }. Variants: .alert-info (blue), .alert-success (green), .alert-warning (amber), .alert-error (red)
Badge Component: .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; }. Use for status indicators, counts, labels
Avatar Component: .avatar { border-radius: var(--radius-full); object-fit: cover; } — sizes: --avatar-sm: 32px; --avatar-md: 40px; --avatar-lg: 56px. Stack avatars with negative margin for avatar groups