@loke/design-system
Version:
A design system with individually importable components
23 lines (22 loc) • 1.2 kB
text/typescript
import * as SwitchPrimitive from "@loke/ui/switch";
/**
* Switch component for toggling between two states
*
* The Switch component provides a visual toggle between two mutually exclusive states, typically used for enabling or disabling a feature. It offers an intuitive and accessible way for users to change a setting.
*
* Key features:
* - Clear visual indication of current state
* - Smooth transition animation between states
* - Customizable appearance through className prop
* - Accessible, using appropriate ARIA attributes
* - Support for keyboard interaction
*
* Usage considerations:
* - Use for boolean settings that can be turned on or off
* - Provide clear labels to indicate what the switch controls
* - Consider using the switch for immediate actions, where the effect is instantaneous
* - Ensure sufficient color contrast between the switch states for visibility
* - Use in forms or settings panels where binary choices are appropriate
*/
declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
export { Switch };