import { Size as TumblerSize } from '@yandex-lego/components/Tumbler/__examples__/size.tsx'
import sizeTumblerSource from '!!raw-loader!@yandex-lego/components/Tumbler/__examples__/size.tsx'
import { Label as TumblerLabel } from '@yandex-lego/components/Tumbler/__examples__/label.tsx'
import labelTumblerSource from '!!raw-loader!@yandex-lego/components/Tumbler/__examples__/label.tsx'

### Размер переключателя

Чтобы изменить размер переключателя, установите свойство `size` в одно из следующих значений: `"s"`, `"m"`, `"l"`.

<Example
    component={TumblerSize}
    source={sizeTumblerSource}
/>

### Подпись переключателя

Чтобы добавить подпись для переключателя, установите свойство `labelAfter` либо `labelBefore` с нужным текстом или `jsx`-разметкой (например, иконка).

> ⚠️ Если установлены обе подписи, то изменение состояния будет происходить только при нажатии на противоположную:
> `unchecked -> labelAfter`, `checked <- labelBefore`.
>
> ⚠️ Чтобы обеспечить доступность с использованием SVG-иконки в качестве подписи, необходимо добавить семантическое описание этой иконки в `aria-label`.

<Example
    component={TumblerLabel}
    source={labelTumblerSource}
/>