Toggle
The Toggle component is a versatile switch that allows users to toggle between two states, such as on and off. It can be customized with different colors, sizes, and variants to fit various design needs.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import Toggle from '@start-base/start-ui/Toggle';Usages
Default Primary Toggle
Default Destructive Toggle
Default Secondary Toggle
Outline Primary Toggle
Outline Secondary Toggle
Outline Destructive Toggle
Small Icon Toggle
Large Fluid Toggle
Disabled Primary Toggle
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| initialState | boolean | false | Initial state of the Toggle | |
| color | string | primary | primary secondary destructive | Color of the Toggle |
| size | string | medium | small medium large icon | Size of the Toggle |
| variant | string | default | default outline | Variant of the Toggle |
| disabled | boolean | false | Disabled of the Toggle | |
| className | string | Classname of the Toggle | ||
| fluid | boolean | false | Fluid of the Toggle |