[Task] Implement Button

[soroushm]

Task Description ✏️

Implement the Button component as part of the design system epic #40.
The Button will serve as a reference component for the design system, using design tokens for colors, typography, spacing, and border radii. It will support variants, sizes, optional icons, loading state, and fullWidth while inheriting styled-system props.

Acceptance Criteria ✅

• Button component implemented using styled(button) with token-based styling.
• Supports variant prop (contained, outlined, text) mapped to theme tokens.
• Supports color prop (primary, secondary, success, error, info, warning) mapped to theme tokens.
• Supports size prop (small, medium, large) mapped to spacing, padding, and font size tokens.
• Supports optional startIcon and endIcon props for icon placement.
• Supports fullWidth prop for stretching button to container width.
• Supports disabled prop for disabling the button.
• Supports loading prop to show a loading indicator and disable the button.
• Supports loadingIndicator prop to customize the loader element (default <CircularProgress size={16} />).
• Supports loadingPosition prop (start, end, center).
• Inherits styled-system props from base primitive.
• Unit tests verify rendering of children, variant, size, color, icons, loading, and fullWidth props.
• Storybook stories demonstrate Button variants, sizes, icons, loading state, and fullWidth usage.
• No raw CSS values — all styles derived from theme tokens.
• Code passes linting, typing, and CI checks.

Dependencies 🔗

No response

Definition of Ready (DoR) 📋

• Task is independent and scoped to the Button component.
• Base primitives and theme tokens are implemented and available.
• Variants, colors, and sizes for Button are defined.
• Props to be supported by Button are agreed upon (variant, size, color, startIcon, endIcon, fullWidth, disabled, loading, loadingIndicator, loadingPosition).

Definition of Done (DoD) 🏁

• Button component implemented with variant, size, and color support.
• Icon props (startIcon, endIcon) render correctly.
• Loading state works correctly with indicator and position.
• fullWidth and disabled props work correctly.
• Unit tests cover children, variants, sizes, colors, icons, loading, and fullWidth behavior.
• Storybook stories demonstrate all variants, sizes, icon placements, loading state, and fullWidth.
• Code reviewed, linted, typed, and passes CI checks.
• Documentation updated in Storybook for Button usage.
• Component is ready for reuse across the design system.

Additional Notes or Resources 📎

No response