Switch
The Switch component in this UI library provides a versatile and customizable toggle switch that can be used in various contexts. It supports different sizes and style variants, making it adaptable to diverse UI designs. Key props include isOn for managing the switch's state, handleToggle for defining the toggle function, and variant for applying pre-defined or custom styles. The component also offers options for rounding, disabling, and incorporating icons or avatars, allowing for a seamless integration into any application while maintaining a consistent user experience.
Switch Basic Usage
1<Switch
2 isOn={isSwitchOn}
3 handleToggle={toggleSwitch}
4/>Switch API Reference
Prop | Type | Default |
|---|---|---|
isOn | boolean | false |
handleToggle | function | - |
variant | string | default |
size | string | default |
rounded | string | default |
disabled | boolean | false |
* Required | ||
Prop | Types |
|---|---|
size | default small large |
variant | default secondary warning success info error custom |
Disabled Switch
1<Switch
2 isOn={isSwitchOn}
3 handleToggle={toggleSwitch}
4 disabled={true}
5/>Switch - Sizes
1<Switch
2 isOn={isSwitchOn}
3 handleToggle={toggleSwitch}
4 size="small"
5/>
6<Switch
7 isOn={isSwitchOn}
8 handleToggle={toggleSwitch}
9 size="default"
10/>
11<Switch
12 isOn={isSwitchOn}
13 handleToggle={toggleSwitch}
14 size="large"
15/>Switch - Style Variants
Secondary Variant
1<Switch variant="secondary" />Error Variant
1<Switch variant="error" />Warning Variant
1<Switch variant="warning" />Success Variant
1<Switch variant="success" />Info Variant
1<Switch variant="info" />