[Hacktoberfest] Design Reusable Button Components

[gautamankoji]

[Hacktoberfest] Design Reusable Button Components

We're looking for contributors to design a set of reusable button components for our Mosaicra UI Design System. The buttons should be versatile, customizable, and easy to implement in various web and mobile UI designs. These components will be part of our library's core and should follow the existing design system guidelines.

Requirements:

• Primary Button: A standard button for primary actions.
• Secondary Button: A button for secondary actions, with a less prominent design.
• Icon Button: A button that includes an icon alongside or without text.
• Floating Action Button (FAB): A circular button used for quick actions (e.g., adding a new item).

Design Guidelines:

• The buttons should be designed in Figma.
• Follow the Mosaicra UI color palette and typography guidelines.
• Include different states for each button: default, hover, active, focus, and disabled.
• Ensure accessibility, including proper contrast ratios and large enough clickable areas.
• Make the components scalable for both web and mobile use.

Deliverables:

• A Figma file with the button components, including all states and variations.
• Ensure that the buttons are resizable and can adapt to different text lengths.
• Include clear labels and notes for customization (e.g., color, border, padding).

References: For inspiration, you can check out other popular design systems like Material UI or Tailwind CSS's button components, but ensure your design fits within Mosaicra UI's unique style.

How to Contribute:

1. Fork the repository.
2. Create a new branch for your contribution.
3. Design the button components in Figma and submit the Figma link in a pull request.
4. Ensure you follow all the design guidelines and provide a brief description of your work.
5. Submit your pull request with the title: Design: Reusable Button Components.

Notes:

• This issue is open to Hacktoberfest contributors, and your PR will count toward your Hacktoberfest contributions.
• If you need any help, feel free to ask questions in the comments or reach out via our Slack channel.

Happy designing! 🎨✨

[uzefaqureshi06]

@gautamankoji he can you please assign this issue to me I will make my best