Кнопка-переключатель для включения/выключения одного режима прямо на месте: фильтры, панели настроек, «показать подробности». Пользователь одним кликом меняет состояние и сразу видит его по подсветке кнопки — активный режим всегда очевиден.

Технические детали: значение — v-model boolean (modelValue / update:modelValue), клик инвертирует состояние. Нативный <button type="button"> с aria-pressed — состояние доступно скринридерам; disabled блокирует события нативно, класс — только стили. Внешний вид — variant: soft (заливка) или outline (рамка); цвет «включено» одинаков для обоих вариантов — модификатор pressed поверх варианта. Размер — size (sm/md/lg). Hover применяется только на устройствах с курсором (@media (hover: hover)), фокус — через :focus-visible. flow — в активном состоянии фон кнопки переливается градиентом цветов темы (--core-flow-image, анимация 9s ease-in-out infinite; при prefers-reduced-motion: reduce — статичный градиент). Содержимое (иконка или текст) — слот default.