Кнопка — главный элемент действия в контенте: подписка, переход, отправка формы. CoreButton рендерится в MDC-контенте как есть: вариант, цвет, размер и состояния задаются атрибутами тега; обработчик клика подключается в Vue-коде (или используйте атрибут `to` — кнопка-ссылка работает и без JS).

### Варианты

Вес действия подбирается вариантом: `solid` — главный призыв (один на экран), `soft` — второстепенные действия, `outline` — заметность без заливки, `ghost` — лёгкие действия, `link` — действие внутри текста.

::div{.flex.flex-wrap.gap-2}
  ::core-button{variant="solid"}
  Подписаться
  ::

  ::core-button{variant="soft"}
  Открыть каталог
  ::

  ::core-button{variant="outline"}
  Подробнее
  ::

  ::core-button{variant="link"}
  Читать документацию
  ::
::

### Цвета и размеры

Семантический цвет задаёт тон, размер — плотность композиции: `sm` для тулбаров и карточек, `lg` для hero-секций.

::div{.flex.flex-wrap.gap-2}

  ::core-button{variant="soft" color="success"}
  Одобрить
  ::
  
  ::core-button{variant="soft" color="warning"}
  Отложить
  ::
  
  ::core-button{variant="soft" color="danger"}
  Удалить
  ::
  
  ::core-button{variant="outline" size="sm"}
    :core-icon{name="sparkles"}
    Компактно
  ::
  
  ::core-button{variant="solid" size="lg" color="secondary"}
    :core-icon{name="arrow-right"}
    Продолжить
  ::
::

### Состояния и кнопка-ссылка

`disabled` и `loading` блокируют активацию; `round` делает круглую иконку-действие; `to` превращает кнопку в ссылку без смены облика.

::div{.flex.flex-wrap.gap-2}
  ::core-button{disabled}
  Недоступно
  ::

  ::core-button{loading}
  Отправка…
  ::

  ::core-button{variant="outline" round aria-label="Настройки"}
    :core-icon{name="sliders-horizontal"}
  ::

  ::core-button{variant="ghost" to="/dev/mdc"}
  Все MDC-примеры
  ::
::

### Переливы

Фирменный градиент: `flow-border` красит рамку, `flow-bg` — рамку и фон целиком. Такт 9 секунд, при prefers-reduced-motion градиент статичен.

::div{.flex.flex-wrap.gap-2}
  ::core-button{variant="outline" flow-border}
  Живая рамка
  ::

  ::core-button{flow-bg color="primary"}
  Залитый градиент
  ::
::