Create reusable Button component with variants (primary, secondary, loading)

[Akshola00]

Description

Build a flexible, reusable Button component that can be used throughout the application with different visual variants.

Create a Button component in src/components/ that supports primary, secondary, and loading states.

Relevant files:

• frontend/src/components/Button.tsx (new)

Acceptance Criteria

• Button component supports primary and secondary variants
• Button component supports loading state that disables interaction and shows spinner
• Button component accepts standard HTML button attributes (disabled, type, onClick, etc.)
• Component is TypeScript-typed and exports proper props interface
• Component includes basic Tailwind CSS styling
• Storybook or demo page shows all button variants
• Frontend code builds successfully
• Frontend code is properly formatted and passes linting

Dependencies

None

Additional Notes

• Use Tailwind CSS for styling (already in the project)
• Consider accessibility: proper focus states, keyboard support
• Make it easily extendable for future variants (e.g., danger, success)

[xx7412421-cloud]

Hi maintainers, I would like to work on this if it is still available. I will wait for assignment before opening a PR and keep the implementation scoped to the reusable Button component variants and loading state.

Tracking phrase: cashflow-claim-paymesh-3-20260622

[huazhuang80-star]

/claimnnI can take this if available. I will keep the implementation scoped to a reusable typed Button component with primary/secondary/loading variants, accessible disabled/loading behavior, and a small demo or Storybook entry if the project has one.

[justme-98]

Hey! I've been working with React and TypeScript for about 2 years and have built reusable component systems before. For this, I'd create a typed Button.tsx with a variant prop and a loading state that locks interaction and shows a spinner styled with Tailwind and built to be easily extended later. I can start immediately and have it ready well before the campaign ends.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@justme-98's PR #101 was approved and merged by @Yunusabdul38.

🏆 @justme-98: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (48 total points). Track your full progress on GrantFox.

👏 Great work, @justme-98! Keep contributing to Web3Novalabs.