This design system project focuses on building a button component with different variants and customizable properties. The component will be showcased in Storybook and the changes will be published to Chromatic for review and feedback.
- Task: Build a design system - Button component
- Variants:
- Primary: Has a background that matches the border.
- Secondary: Has a white background with a border that matches the text color.
- Text: Has no background and no outline. Shows an underline when hovered over.
- Sizes: The component should have 3 different sizes.
- Color Prop: The component should accept a color prop with 3 values.
The latest version of the Storybook for the button component has been deployed to Chromatic. You can access it by following this link: Design System
Please review and provide feedback on the deployed Storybook.
Follow the steps below to set up and run the project.
- Node.js (version X.X.X)
- npm (version X.X.X)
- Clone the repository:
git clone git@github.com:a7mad1112/Button-Design-System.git
- Navigate to the project directory:
cd button-design-system
- Install the dependencies:
npm install
- Start the Storybook development server:
npm run storybook
- Access Storybook in your browser at http://localhost:6006.
I am grateful to Foothill Technology Solutions for providing me with the opportunity to participate in this internship cycle, and for their support throughout the development of this project.
