
<!-- Auto Generated Below -->


## Usage

### React

```tsx
import React from 'react';

import { KvToggleButton, EIconName } from '@kelvininc/react-ui-components/client';

export const ToggleButtonExample: React.FC = () => (
	<>
		{/*-- Default --*/}
		<KvToggleButton label="Option 1" value="option-1" />

		{/*-- Disabled --*/}
		<KvToggleButton label="Option 1" value="option-1" disabled />

		{/*-- Checked --*/}
		<KvToggleButton label="Option 1" value="option-1" checked />

		{/*-- With Icon --*/}
		<KvToggleButton icon={EIconName.Add} label="Option 1" value="option-1" />

		{/*-- Only Icon --*/}
		<KvToggleButton icon={EIconName.Add} value="option-1" />
	</>
);
```


## Properties

| Property             | Attribute           | Description                                                                   | Type                                           | Default                |
| -------------------- | ------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------- |
| `checked`            | `checked`           | (optional) Sets the button as checked                                         | `boolean`                                      | `false`                |
| `customAttributes`   | `custom-attributes` | (optional) Custom attributes to be applied to the toggle button element       | `{ [x: string]: string; }`                     | `{}`                   |
| `disabled`           | `disabled`          | (optional) Sets the button's styling to be disabled and disables click events | `boolean`                                      | `false`                |
| `icon`               | `icon`              | (optional) The button's icon. Only valid for toggle button icon               | `EIconName`                                    | `undefined`            |
| `label`              | `label`             | (optional) The button's label. Only valid for toggle button text              | `string`                                       | `undefined`            |
| `preventDefault`     | `prevent-default`   | (optional) Defines if the item click event should prevent default behaviour.  | `boolean`                                      | `false`                |
| `size`               | `size`              | (optional) Button's size                                                      | `EComponentSize.Large \| EComponentSize.Small` | `EComponentSize.Small` |
| `tooltip`            | `tooltip`           | (optional) Tooltip text                                                       | `string`                                       | `undefined`            |
| `value` _(required)_ | `value`             | (required) The value to be emitted upon click events                          | `number \| string`                             | `undefined`            |
| `withRadio`          | `with-radio`        | (optional) Sets if the button is a radio button                               | `boolean`                                      | `false`                |


## Events

| Event           | Description                    | Type                            |
| --------------- | ------------------------------ | ------------------------------- |
| `checkedChange` | Emits when a button is clicked | `CustomEvent<number \| string>` |


## Shadow Parts

| Part              | Description                          |
| ----------------- | ------------------------------------ |
| `"toggle-button"` | The toggle action.                   |
| `"toggle-icon"`   | The toggle button's icon container.  |
| `"toggle-label"`  | The toggle button's label container. |
| `"toggle-text"`   | The toggle button's text container.  |


## CSS Custom Properties

| Name                                 | Description                                              |
| ------------------------------------ | -------------------------------------------------------- |
| `--background-color-active`          | Toggle button background color when state is active.     |
| `--background-color-default`         | Toggle button background color when state is default.    |
| `--background-color-disabled`        | Toggle button background color when state is disabled.   |
| `--background-color-disabled-active` | Toggle button background color when disabled and active. |
| `--border-color-active`              | Toggle button border color when state is active.         |
| `--border-color-default`             | Toggle button border color when state is default.        |
| `--border-color-disabled`            | Toggle button border color when state is disabled.       |
| `--border-color-disabled-active`     | Toggle button border color when disabled and active.     |
| `--border-left-size`                 | Toggle button left border size.                          |
| `--border-radius-bottom-left`        | Toggle button bottom-left border radius.                 |
| `--border-radius-bottom-right`       | Toggle button bottom-right border radius.                |
| `--border-radius-top-left`           | Toggle button top-left border radius.                    |
| `--border-radius-top-right`          | Toggle button top-right border radius.                   |
| `--border-right-size`                | Toggle button right border size.                         |
| `--border-size`                      | Toggle button border size.                               |
| `--button-height-large`              | Toggle button height when size is large.                 |
| `--button-height-small`              | Toggle button height when size is small.                 |
| `--button-icon-height-large`         | Toggle button icon height when size is large.            |
| `--button-icon-height-small`         | Toggle button icon height when size is small.            |
| `--button-icon-width-large`          | Toggle button icon width when size is large.             |
| `--button-icon-width-small`          | Toggle button icon width when size is small.             |
| `--button-padding-large`             | Toggle button padding when size is large.                |
| `--button-padding-small`             | Toggle button padding when size is small.                |
| `--button-width`                     | Toggle button width.                                     |
| `--icon-color-active`                | Toggle button icon color when state is active.           |
| `--icon-color-default`               | Toggle button icon color when state is default.          |
| `--icon-color-disabled`              | Toggle button icon color when state is disabled.         |
| `--icon-color-disabled-active`       | Toggle button icon color when disabled and active.       |
| `--text-color-active`                | Toggle button text color when state is active.           |
| `--text-color-default`               | Toggle button text color when state is default.          |
| `--text-color-disabled`              | Toggle button text color when state is disabled.         |
| `--text-color-disabled-active`       | Toggle button text color when disabled and active.       |


## Dependencies

### Used by

 - [kv-toggle-button-group](../toggle-button-group)
 - [kv-toggle-switch](../toggle-switch)

### Depends on

- [kv-tooltip](../tooltip)
- [kv-radio](../radio)
- [kv-icon](../icon)

### Graph
```mermaid
graph TD;
  kv-toggle-button --> kv-tooltip
  kv-toggle-button --> kv-radio
  kv-toggle-button --> kv-icon
  kv-tooltip --> kv-portal
  kv-tooltip --> kv-tooltip-text
  kv-radio --> kv-icon
  kv-toggle-button-group --> kv-toggle-button
  kv-toggle-switch --> kv-toggle-button
  style kv-toggle-button fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------