<!-- Docs styles -->
import { Story, Canvas, Preview, ArgsTable   } from '@storybook/addon-docs';
import image1 from '../../stories/assets/toggle/1.png';
import image2 from '../../stories/assets/toggle/2.png';
import image3 from '../../stories/assets/toggle/3.png';
import image4 from '../../stories/assets/toggle/4.png';
import image5 from '../../stories/assets/toggle/5.png';
import image6 from '../../stories/assets/toggle/6.png';
import image7 from '../../stories/assets/toggle/7.png';
import image8 from '../../stories/assets/toggle/tag.png';


<style>
  {`
    .sbdocs-table tr * {
      text-align: center;
      font-weight: bold;
    }

    img {
      display: block;
      margin: 0 auto;
    }

    table {
      margin: 0 auto !important;
    }
  `}
</style>

<img src={image8} width="150"/>


# Interruptor / Toggle

El componente de interruptor sirve para dar al usuario la posibilidad de elegir entre dos estados posibles y solamente se utiliza para acciones binarias que ocurren inmediatamente después de que el usuario «accione el interruptor», de la misma manera que utiliza interruptores de «encendido y apagado».

### Variaciones

Las variantes de este componente se diferencian en su tamaño, existe un tamaño normal y uno pequeño, mucho más compacto, que puede utilizarse integrado en otros componentes como por ejemplo las tablas de datos.

|                **Tamaño normal** (por defecto)                  |                        **Tamaño pequeño**                 |
| :----------------------------------------------------------: | :----------------------------------------------------------: |
| <br/><img src={image1} width="50"/><br/> | <br/><img src={image2} width="50"/><br/> |

### Contenido

El componente interruptor se compone de un encabezado opcional que puede acompañar al interruptor para aclarar aún más la acción que realizará el mismo y un elemento conmutador que se pulsa para cambiar su estado acompañado de un texto descriptivo.

Siguiendo los estándares de colores, el color verde del interruptor indica que esta encendido y el color gris que está apagado.

Asimismo para indicar el estado del interruptor más claramente se recomienda que a su lado se añada un texto que describe si este está encendido o apagado para que el usuario no deba interpretar los colores. Este descriptor irán al costado del interruptor y se utilizarán adjetivos en lugar de verbos para describir dichas etiquetas, por ejemplo «encendido», «activado» o «sí» y «apagado», «desactivado» o «no». Se recomienda el uso del castellano para el texto y evitar literales como «on» y «off».

### Anatomía

El componente interruptor en su versión normal tendrá un ancho de 48px mientras que en su versión pequeña será de 32px. La altura en el tamaño normal es de 24px y en la versión pequeña de 16px.

| <img src={image3} width="200"/> | <img src={image4} width="200"/> |
| ------------------------------------------------------------ | ------------------------------------------------------------ |

El padding que determina la distancia al interruptor será de 16px en la parte superior e inferior y en los laterales será de 8px con respecto al texto que define el estado del componente.

### Comportamiento

El componente se presenta con dos opciones, activo e inactivo. Cuando el interruptor está encendido se presenta el conmutador en la parte de la derecha con el fondo del componente en color verde, mientras que cuando se encuentra apagado, el conmutador se presenta en la parte izquierda con el fondo del componente en color gris.


<img src={image5} width="300"/>

Los estados definidos en el componente interruptor son enabled, hover, focus, disabled y skeleton.

<img src={image6} width="500"/>


<img src={image7} width="500"/>


### Código

```
<toggle></toggle>
```

### Tokens

#### Color

| Class                                                    | **Property**     | **Color token** |
| :------------------------------------------------------- | :--------------- | :-------------- |
| `.bx--label`                                             | text color       | `$text-02`      |
| `.bx--toggle__text--left`                                | text color       | `$text-01`      |
| `.bx--toggle__appearance:before`                         | background-color | `$ui-04`        |
| `.bx-toggle__appearance:after`                           | background-color | `$ui-03`        |
| `.bx--toggle:checked +` `.bx--toggle__appearance:before` | background-color | `$support-02`   |
| `.bx--toggle:checked +` `.bx--toggle__appearance:after`  | background-color | `$icon-03`      |
| `.bx-toggle:checked`                                     | background-color | `$support-02`   |
| `.bx-toggle__check`                                      | fill             | `$support-02`   |

#### Estados interactivos

| Class                                                     | **Property**     | **Color token** |
| :-------------------------------------------------------- | :--------------- | :-------------- |
| `.bx--toggle__appearance:focus`                           | border           | `$focus`        |
| `.bx--label:disabled`                                     | text color       | `$disabled-02`  |
| `.bx--toggle__text--left:disabled`                        | text color       | `$disabled-02`  |
| `.bx--toggle:disabled +` `.bx--toggle__appearance:before` | background-color | `$disabled-01`  |
| `.bx--toggle:disabled +.bx--toggle__appearance:after`     | background-color | `$disabled-02`  |

#### Estructura

Imerruptor normal

| Class                           | **Property**              | Px   | **Spacing token** |
| :------------------------------ | :------------------------ | :--- | :---------------- |
| `.bx--toggle__appearance`       | width                     | 48   | `-`               |
| `.bx--toggle__appearance`       | height                    | 24   | `-`               |
| `.bx--toggle__appearance:after` | height, width             | 18   | `-`               |
| `.bx--toggle__label`            | margin-top, margin-bottom | 16   | `$spacing-05`     |
| `.bx--toggle__text--left`       | margin-left               | 8    | `$spacing-05`     |

Imerruptor pequeño

| Class                                               | **Property**              | Px   | **Spacing token** |
| :-------------------------------------------------- | :------------------------ | :--- | :---------------- |
| `.bx--toggle--small`                                | width                     | 16   | `-`               |
| `.bx--toggle--small`                                | height                    | 32   | `-`               |
| `.bx--toggle--small +.bx--toggle__appearance:after` | height, width             | 10   | `-`               |
| `.bx--toggle--small`                                | margin-top, margin-bottom | 16   | `$spacing-05`     |