Create a Comprehensive Button State Design System with Full Interaction Mapping
Build a production-ready button state design system covering all variants, sizes, interaction states, and dark mode tokens.
📝 The Prompt
Design a complete button state system for a [BRAND_NAME] design system that covers every interaction state, variant, and edge case. The system will be used across [PLATFORM_TYPES] and must be production-ready for handoff to engineering.
1. **Button Variants:**
Define visual specs for each variant:
- Primary (high emphasis)
- Secondary (medium emphasis)
- Tertiary/Ghost (low emphasis)
- Destructive/Danger
- [CUSTOM_VARIANT] (specific to your product)
For each, specify: background color, text color, border, border-radius, box-shadow, padding, and min-width.
2. **Sizes:**
- Large (48px height): use cases and contexts
- Medium/Default (40px height): standard usage
- Small (32px height): compact UIs, tables, inline actions
- Font size, icon size, and padding for each
3. **Interaction States (for EVERY variant × size):**
- Default/Resting
- Hover: color shift, elevation change, cursor style
- Active/Pressed: scale transform, darker shade
- Focused (keyboard navigation): focus ring color, offset, and style
- Disabled: opacity, cursor, and tooltip explaining why
- Loading: spinner placement, text change (e.g., 'Saving...'), disabled interaction during load
4. **Content Configurations:**
- Text only
- Icon + Text (left icon, right icon)
- Icon only (square aspect ratio, aria-label required)
- Full-width / block button
- Button with badge/counter
5. **Spacing and Layout Rules:**
- Minimum gap between adjacent buttons: [SPACING_UNIT]
- Button group patterns: horizontal, vertical, split button
- Primary + Secondary pairing: order and alignment rules
- Maximum label length and truncation behavior
6. **Dark Mode:**
- Color mappings for all variants and states in dark theme
- Ensure sufficient contrast (minimum [CONTRAST_RATIO]:1)
7. **Token Naming Convention:**
- Propose design token names following [NAMING_CONVENTION] format
- Example: button-primary-background-default, button-primary-background-hover
Output a structured specification table that engineers can directly reference during implementation.
💡 Tips for Better Results
Always design the focus state first and make it prominent — it's the most neglected state but critical for keyboard and assistive technology users. Include a loading state for every button that triggers an async action; without it, users will double-click and cause duplicate submissions. Document the 'why disabled' pattern: pair every disabled button with a tooltip or inline message explaining what the user needs to do to enable it.
🎯 Use Cases
Design system maintainers and UI engineers use this when establishing or auditing button components to ensure consistency, accessibility, and complete state coverage across an entire product suite.