ToggleSwitch
A customizable switch for toggling between two states (on/off), with options for size, color, and optional labels.
Sizes
Colors
Features
- Toggle between two states: on and off
- Customizable size and color to match the design requirements
- Optional labels for the on and off states
- Simple
onChangehandler for state management
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Defines whether the switch is in the "on" state (true) or "off" state (false). |
| onChange | (checked: boolean) => void | — | Callback function that is triggered when the switch state changes. It receives the new state (true or false). |
| size | `"sm" | "md" | "lg" |
| color | `"base" | "primary" | "secondary" |
| onText | string | "" | The text to display when the switch is in the "on" state. |
| offTextt | string |
Modal
A customizable popup or overlay for displaying important content, forms, or dialogs without leaving the current page—supports sizes, colors, shadows, and animations.
Skeleton
A placeholder element for loading states, providing a visual representation of content in progress, customizable with speed, color, and animations.