create: ToggleSwitchButton #280
Description
Development Task: Implement a Customizable Toggle Switch Button
Objective: Design and develop a flexible Toggle Switch Button component, ensuring it is adaptable to various sizes and states, and supports icon customization based on its active/inactive status. The component should align with the visual guidelines provided (see link below).
Design Example:
Requirements:
Size Variability:
- The Toggle Switch Button must be available in three distinct sizes: small (sm), medium (md), and large (lg). It's recommended to correlate these sizes with existing global standards (xxs, xs, s) for consistent design language across the application.
State Handling:
- Disabled State: The component must visually indicate and functionally support a disabled state, ensuring users cannot interact with the switch when it is disabled.
Icon Customization:
- Active and Inactive Icons: The component should allow for the inclusion of two different icons, representing the active (on) and inactive (off) states of the switch. This feature will enable a more intuitive and visually engaging user experience.
Functionality:
- The Toggle Switch Button should seamlessly switch between its active and inactive states upon user interaction, reflecting the corresponding icon for each state.
- Ensure that the switch provides visual feedback when transitioning between states, including during mouse hover and click actions.
- Accessibility considerations should be taken into account, ensuring that the switch is operable through keyboard navigation and screen readers, with appropriate ARIA attributes implemented.
Implementation Notes:
- Develop the component with modularity in mind, allowing it to be easily integrated and reused across different parts of the application.
- Test the component thoroughly across various devices and browsers to ensure compatibility and responsiveness.
- Adhere to the application's existing theming and styling guidelines to maintain a cohesive visual identity.