npm package: @getfly-ui/switch
Description: Switch for getfly UI
Latest version: 0.0.11

# Switch (Toggle) component


![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fswitch?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fswitch?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fswitch?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fswitch?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fswitch?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fswitch?style=for-the-badge)

## How to use

```ts
import { Switch } from '@getfly-ui/switch';
```

OR

```ts
import { Switch } from 'getfly-ui';
```

# Props

## Switch.Default

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `disabled` | `boolean or undefined` | `false` | Disabled switch |
| `isActive` | `boolean or undefined` | `false` | isActive switch |
| `onToggle` | `(((event: boolean) => void) & ((event: boolean) => void)) or undefined` |  | onToggle event |
| `preset` | `enum` | `medium` | Preset switch |
| `useMergeClass` | `boolean or undefined` | `true` | @description merge className |
| `children` | `ReactNode` |  | Content switch |
| `activeColor` | `string or undefined` |  | Active color |
| `activeColorTheme` | `enum` | `cerulean-700` | Active color theme |
| `inactiveColor` | `string or undefined` |  | Inactive color |
| `inactiveColorTheme` | `enum` | `grayscale-350` | Inactive color theme |
| `label` | `string or undefined` |  | Label text |
| `labelPreset` | `enum` | `'body_s_bold'` | Preset label |
| `labelColorTheme` | `enum` | `grayscale-1000` | Color theme label |
| `labelColor` | `string or undefined` |  | Color label |
| `subLabel` | `string or undefined` |  | SubLabel text |
| `subLabelPreset` | `enum` | `body_s_medium` | Preset SubLabel |
| `subLabelColorTheme` | `enum` | `grayscale-750` | Color theme subLabel |
| `subLabelColor` | `string or undefined` |  | Color subLabel |
| `count` | `number or undefined` |  | Count number |
| `countPreset` | `enum` | `body_xs_regular` | Preset count text |
| `countColorTheme` | `enum` | `cerulean-700` | Color theme count |
| `countColor` | `string or undefined` |  | Color count |
| `caption` | `string or undefined` |  | Caption text |
| `captionPreset` | `enum` | `body_s_medium` | Preset caption |
| `captionColorTheme` | `enum` | `grayscale-550` | Color theme caption |
| `captionColor` | `string or undefined` |  | Color caption |
| `position` | `enum` | `left` | Position switch |


## Switch.Icon

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `disabled` | `boolean or undefined` |  | Disabled switch |
| `isActive` | `boolean or undefined` | `false` | isActive switch |
| `onToggle` | `((event: boolean) => void) or undefined` |  | onToggle event |
| `iconLeft` | `enum` | `'letter_filled'` | Icon Left |
| `iconRight` | `enum` | `'brush_filled'` | Icon Right |
| `iconSize` | `number or undefined` | `16` | Icon size |
| `iconActiveColor` | `string or undefined` |  | Icon Active Color |
| `iconActiveColorTheme` | `enum` |  | Icon Active Color theme |
| `iconInactiveColor` | `string or undefined` |  | Icon Inactive Color |
| `iconInactiveColorTheme` | `enum` |  | Icon Inactive Color Theme |