This PR introduces a responsive, accessible Button component system for CommunityRule.
It supports six variants, five sizes, and full interactive states, all implemented with Tailwind CSS and design tokens. The component is WCAG 2.1 AA compliant and optimized for responsive layouts.
Changes
Implemented six variants: default, secondary, primary, outlined, dark, inverse
Added five sizes: xsmall → small → medium → large → xlarge
Built interactive states: default, hover, focus, active, disabled
Integrated with design tokens for colors, spacing, typography, border radius
Created Storybook stories for variants, sizes, and states
Screenshots
How to Test
Run Storybook and open the Button stories.
Verify:
All six variants render correctly
Sizes scale consistently across breakpoints
Interactive states (hover, focus, active, disabled) display as expected
Buttons are accessible via keyboard (Tab, Enter, Space)
Contrast ratios meet design system standards
Confirm buttons work in forms and as links (href support).
Notes
Dark mode and RTL support will come in a future PR.
Icon/avatar integration is placeholder for now.
Event tracking hooks can be added later if needed.
# Add Button Component System
## Overview
This PR introduces a responsive, accessible **Button component system** for CommunityRule.
It supports six variants, five sizes, and full interactive states, all implemented with Tailwind CSS and design tokens. The component is WCAG 2.1 AA compliant and optimized for responsive layouts.
## Changes
- Implemented **six variants**: default, secondary, primary, outlined, dark, inverse
- Added **five sizes**: xsmall → small → medium → large → xlarge
- Built **interactive states**: default, hover, focus, active, disabled
- Integrated with **design tokens** for colors, spacing, typography, border radius
- Added **smooth transitions** (500ms, scale ±2%)
- Verified **accessibility**: semantic HTML, ARIA support, focus indicators
- Created **Storybook stories** for variants, sizes, and states
## Screenshots
<img width="548" alt="Screenshot 2025-08-14 at 2.51.15 PM.png" src="attachments/d4a1d678-1deb-4b5c-80c1-e4abcb60558a"><img width="548" alt="Screenshot 2025-08-14 at 2.50.55 PM.png" src="attachments/dd294926-052e-4868-b248-9ef2aed47d84">
## How to Test
1. Run Storybook and open the `Button` stories.
2. Verify:
- All six variants render correctly
- Sizes scale consistently across breakpoints
- Interactive states (hover, focus, active, disabled) display as expected
- Buttons are accessible via keyboard (Tab, Enter, Space)
- Contrast ratios meet design system standards
3. Confirm buttons work in forms and as links (`href` support).
## Notes
- Dark mode and RTL support will come in a future PR.
- Icon/avatar integration is placeholder for now.
- Event tracking hooks can be added later if needed.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Add Button Component System
Overview
This PR introduces a responsive, accessible Button component system for CommunityRule.
It supports six variants, five sizes, and full interactive states, all implemented with Tailwind CSS and design tokens. The component is WCAG 2.1 AA compliant and optimized for responsive layouts.
Changes
Screenshots
How to Test
Buttonstories.hrefsupport).Notes