Toggle is a button that switches between two states, usually 'on' and 'off', each time it is clicked. Toggle buttons are commonly used to enable or disable a feature, or to choose between two mutually exclusive options.
import { Toggle } from "wis/toggle"
API Reference#
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | none | The text information displayed on the toggle. |
| variant | basic ghost | basic | The visual variant to apply to toggle. |
| disabled | boolean | false | Disables any interaction with the toggle. |
| icon | ReactNode | none | The icon element will be displayed next to the toggle text. |
| iconControl | prefix suffix | prefix | Controls the display position of the icon relative to the text. |
| size | md sm xs | md | The size of the toggle toggle. |
| pressed | boolean | none | The press state of the toggle. Must be used in conjunction with onPressed. |
| defaultPressed | boolean | none | The default press state of the toggle. |
| shortcutKey | string | none | Sets a global shortcut key, such as Control+I. When the user presses the combination key, the toggle button's click event will be triggered. View Keyboard |
| onPressed | (pressed: boolean) => void | none | Event handler called when the toggle button is clicked. |