---
description: Компонент стрелки для навигации в компонентах горизонтальных прокруток и галереях.
tags: layout, overlay
---

<Overview group="utils">

# ScrollArrow [tag:component]

Компонент стрелки для навигации в компонентах горизонтальных прокруток и галереях.
Используется внутри [`HorizontalScroll`](/components/horizontal-scroll) и [`Gallery`](/components/gallery).

</Overview>

{/* @example-description: Базовая стрелка `ScrollArrow` с направлением вверх. */}
<Playground>
  ```jsx
  <ScrollArrow direction="up" />
  ```
</Playground>

## Обязательные свойства

### Направление стрелки

Задается свойством `direction`.

```jsx
<ScrollArrow direction="up" />
<ScrollArrow direction="right" />
<ScrollArrow direction="down" />
<ScrollArrow direction="left" />
```

## Вертикальное смещение

Задается свойством `offsetY`, принимает числовое и строковое значение:

```jsx
<ScrollArrow direction="up" offsetY="-5px" label="Скролл к началу" />
```

## Пользовательские иконки

Кастомную иконку можно прокинуть в свойство `children` компонента:

{/* @example-description: `ScrollArrow` с пользовательской иконкой вместо стандартной стрелки. */}
<Playground>
  ```jsx
  <ScrollArrow direction="left">
    <Icon24ArrowLeftSquareOutline />
  </ScrollArrow>
  ```
</Playground>

## Особенности

- Автоматическая поддержка `RTL`.
- Поддерживаются все свойства HTML-элемента `<button>`.

## Доступность (a11y) [#a11y]

### Обязательные параметры

- Всегда указывайте `label` для скринридеров.
- Используйте семантические названия действий:

  ```jsx
  <ScrollArrow direction="left" label="Предыдущий слайд" />
  ```

### Автоматические метки

Если `label` не указан, используется текст по умолчанию в зависимости от значения `direction`:

- `left`: "Прокрутить влево".
- `right`: "Прокрутить вправо".
- `up`: "Прокрутить вверх".
- `down`: "Прокрутить вниз".

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `**direction** \*` | `"right" \| "left" \| "up" \| "down"` | `-` | Направление стрелки. |
| `getRootRef` | `Ref<HTMLButtonElement>` | `-` |  |
| `label` | `string` | `-` | [a11y]: Используется для ассистивных технологий. |
| `offsetX` | `string \| number` | `-` | Смещает иконку кнопки навигации по горизонтали. Для `direction="left"` применяется к `left` (в LTR) или `right` (в RTL). Для `direction="right"` применяется к `right` (в LTR) или `left` (в RTL). |
| `offsetY` | `string \| number` | `-` | Смещает иконку кнопки навигации по вертикали. |
| `size` | `"s" \| "m"` | `m` | Размер стрелки. |