# ArrowToggle

`ArrowToggle` is a component for displaying the chevron icon. It can rotate in four directions and can be used to display drop-down lists, cut components, etc.

## Appearance

`ArrowToggle` has four possible directions: `top`, `right`, `bottom`, and `left`.

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

## Size

```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
```

## Use as an interactive element

Here is an example of using ArrowToggle with a toggling icon:

```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} /> <span>{direction}</span>
  </Button>
);
```

## Properties

| Name      | Description                                |   Type   |  Default   |
| :-------- | :----------------------------------------- | :------: | :--------: |
| className | `class` HTML attribute                     | `string` |            |
| direction | Used to set the `arrowToggle` direction    | `string` | `"bottom"` |
| size      | `arrowToggle` size (in pixels)             | `number` |    `16`    |
| qa        | `data-qa` HTML attribute, used for testing | `string` |            |

## CSS API

| Name                                   | Description         |
| :------------------------------------- | :------------------ |
| `--g-arrow-toggle-transition-duration` | Transition duration |