## Описание

Интерактивный компонент кнопки для инициирования действий пользователя с поддержкой множественных визуальных вариантов, состояний и функций доступности.

Button предоставляет комплексное решение для создания согласованных, доступных элементов действий со встроенной поддержкой иконок, состояний загрузки, эффектов ripple и плейсхолдеров-скелетонов. Компонент интегрирует визуальные варианты (primary, secondary, outline, text), управление состояниями (focus, hover, disabled, selected) и адаптивное поведение для отзывчивых интерфейсов.

**Основные возможности:**

- Множественные визуальные варианты (primary, secondary, outline, text)
- Комплексная поддержка состояний (focus, hover, active, disabled, selected, readonly)
- Встроенное позиционирование иконок (в начале и в конце)
- Интеграция индикатора прогресса для состояний загрузки
- Эффект ripple для тактильной обратной связи
- Система скелетонов для плейсхолдеров загрузки
- Опции адаптивного и отзывчивого поведения
- Полная поддержка доступности (ARIA, клавиатурная навигация)
- Настройка через токены дизайна

**Типичные сценарии использования:**

- Основные действия в формах и диалогах
- Элементы навигации и меню
- Панели инструментов и действий
- Элементы призыва к действию
- Кнопки только с иконками
- Индикаторы состояния загрузки
- Действия подтверждения и отмены

```html
<script setup>
import { ref } from 'vue'

const loading = ref(false)
const selected = ref(false)

const handleClick = async () => {
  loading.value = true
  // Имитация асинхронной операции
  await new Promise(resolve => setTimeout(resolve, 2000))
  loading.value = false
  selected.value = !selected.value
}
</script>

<template>
  <div class="actions">
    <!-- Основная кнопка с состоянием загрузки -->
    <Button
      primary
      :progress="loading"
      @click="handleClick"
    >
      Отправить
    </Button>

    <!-- Второстепенная кнопка с иконкой -->
    <Button
      secondary
      icon="settings"
    >
      Настройки
    </Button>

    <!-- Контурная кнопка с иконкой справа -->
    <Button
      outline
      icon-trailing="arrow_forward"
    >
      Далее
    </Button>

    <!-- Текстовая кнопка с выбранным состоянием -->
    <Button
      text
      :selected="selected"
      @click="selected = !selected"
    >
      Переключить
    </Button>

    <!-- Кнопка только с иконкой -->
    <Button
      primary
      icon="favorite"
      adaptive="iconAlways"
    />
  </div>
</template>
```

> Button разработан как универсальный интерактивный элемент с комплексным управлением состояниями, визуальными вариантами и функциями доступности для создания согласованных интерфейсов действий.
