# ArrowToggle



`ArrowToggle` — это компонент для отображения иконки в виде стрелки, которая может вращаться в четырех направлениях. Подходит для отображения выпадающих списков, компонентов в свёрнутом состоянии и других элементов.

## Внешний вид

`ArrowToggle` поддерживает четыре направления: `top` (вверх), `right` (вправо), `bottom` (вниз) и `left` (влево).





```tsx
<ArrowToggle direction="top" /> top
<ArrowToggle direction="right" /> right
<ArrowToggle direction="bottom" /> bottom
<ArrowToggle direction="left" /> left
```



## Размер





```tsx
<ArrowToggle size={10} /> 10
<ArrowToggle size={20} /> 20
<ArrowToggle size={30} /> 30
<ArrowToggle size={40} /> 40
<ArrowToggle size={50} /> 50
<ArrowToggle size={100} /> 100
```



## Использование в качестве интерактивного элемента

Пример использования `ArrowToggle` с иконкой-переключателем:





```tsx
const [directionIndex, setDirectionIndex] = React.useState(0);
const directions = ['top', 'left', 'bottom', 'right'] as Array<ArrowToggleProps['direction']>;
const direction = directions[directionIndex % directions.length];

return (
  <Button onClick={() => setDirectionIndex(directionIndex + 1)} view="flat">
    <ArrowToggle {...args} direction={direction} /> <h3>{direction}</h3>
  </Button>
);
```



## Свойства

| Имя       | Описание                                               |   Тип    | Значение по умолчанию |
| :-------- | :----------------------------------------------------- | :------: | :-------------------: |
| className | HTML-атрибут `class`.                                  | `string` |                       |
| direction | Задает направление `arrowToggle`.                      | `string` |      `"bottom"`       |
| size      | Размер `arrowToggle` (в пикселях).                     | `number` |         `16`          |
| qa        | HTML-атрибут `data-qa`, используется для тестирования. | `string` |                       |