### The Problem The current button system combines two independent axes (variant and category) creating 15+ possible combinations. This complexity creates confusion for designers and developers, increases maintenance burden, and makes it harder to ensure consistent usage across the platform. ### The Solution Consolidate to a clearer two-property system: - 3 semantic variants (default, confirm, danger) that communicate intent - 2 visual styles (solid, text) that control emphasis | Before | After | | ------ | ------ | | {width=588 height=320} | {width=304 height=208} | By separating semantic meaning (what the button does) from visual weight (how prominent it should be), the new system is both more flexible and more constrained. Designers have clear guidance while maintaining necessary expressiveness for different contexts. <details><summary>Buttons variant overview</summary> **Current buttons** - Default - Primary - Secondary - Tertiary - Confirm - Primary - Secondary - Tertiary - Danger - Primary - Secondary - Tertiary - Reset - Primary - Secondary - Tertiary - Link **Simplified buttons** - Default - Solid - Text - Confirm - Solid - Text - Danger - Solid - Text - Link </details> ### Key Benefits - Clearer decision-making process: choose meaning first (what does this action do?), then emphasis (how important is it?) - Eliminates ambiguity between «primary» and «secondary» categories - Reduces cognitive load when selecting appropriate buttons for new features - Fewer component variants to maintain and test - Simpler prop APIs with clearer constraints - More predictable visual hierarchy across GitLab [**Figma working file →**](https://www.figma.com/design/kwmlkGOj5sbSUwK2zmjLUH/Button-reduction?node-id=0-1&t=EaPbxoAUc6kB5T1Y-1) [Figma branch →](https://www.figma.com/design/qEddyqCrI7kPSBjGmwkZzQ/branch/mFV6tCbi9HmdtccSnxOZX0/%F0%9F%93%99-Component-library?node-id=425-7&p=f&t=16pCsjbEWTHLXzAg-0)