## Usage
### Javascript
```html
```
### React
```tsx
import React from 'react';
import { KvSwitchButton } from '@kelvininc/react-ui-components';
export const SwitchButtonExample: React.FC = () => (
<>
{/*-- Default --*/}
{/*-- Disabled --*/}
{/*-- ON/OFF --*/}
);
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'switch-button-example',
styleUrl: 'switch-button-example.css',
shadow: true,
})
export class SwichButtonExample {
render() {
return [
// Default
// Disabled
// ON/OFF
];
}
}
```
## Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------ | ---------------------------------------------- | ---------------------- |
| `checked` | `checked` | (optional) If `true` the button is ON. Default `false` | `boolean` | `false` |
| `disabled` | `disabled` | (optional) If `true` the button is disabled. Default `false` | `boolean` | `false` |
| `size` | `size` | (optional) Button's size. Default `EComponentSize.Large` | `EComponentSize.Large \| EComponentSize.Small` | `EComponentSize.Large` |
## Events
| Event | Description | Type |
| -------------- | ----------------------------------- | ---------------------- |
| `switchChange` | Emitted when switch's state changes | `CustomEvent` |
## Shadow Parts
| Part | Description |
| --------------- | --------------------------------- |
| `"button"` | The switch button. |
| `"icon-square"` | The switch icon square container. |
| `"icon-svg"` | The switch icon. |
## CSS Custom Properties
| Name | Description |
| ------------------------ | --------------------------------------- |
| `--off-background-color` | Button background color when's OFF. |
| `--on-background-color` | Button background color when's ON. |
| `--sqr-background-color` | Icon square container background color. |
## Dependencies
### Used by
- [kv-time-picker](../time-picker)
### Depends on
- [kv-icon](../icon)
### Graph
```mermaid
graph TD;
kv-switch-button --> kv-icon
kv-time-picker --> kv-switch-button
style kv-switch-button fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------