Тема
SButton
Обзор
Кнопка действия для форм и панелей инструментов. Поддерживает appearance, variant, size, иконки, состояние загрузки и переход по link.
Usage
Минимальный пример с подписью.
API
Краткий справочник props, slots и events — см. API Reference.
Guide
SButton — основной action-контрол. Используйте appearance и variant для семантики, size для масштаба.
- Для навигации передайте
link— компонент рендерит<a>илиrouter-link, если Vue Router подключён в host-приложении. - Для icon-only кнопок задайте prop
icon— слотdefaultскрывается. loadingблокирует клики и показывает спиннер поверх контента.
vue
<SButton appearance="major" variant="main">Save</SButton>Props
С иконками
Передайте iconLeft и iconRight с именами из icon registry. Иконки масштабируются вместе с size.
vue
<SButton icon-left="plus" icon-right="chevron-down">Create</SButton>Загрузка
При loading кнопка показывает спиннер и не реагирует на клики — используйте для асинхронных действий.
vue
<SButton loading>Saving…</SButton>Disabled
disabled отключает взаимодействие и визуально приглушает контрол. Нативный атрибут пробрасывается на корневой элемент.
vue
<SButton disabled>Unavailable</SButton>Outlined danger
Комбинация appearance="outlined" и variant="danger" для деструктивных действий вторичного приоритета.
vue
<SButton appearance="outlined" variant="danger">Delete</SButton>Icon only
Prop icon скрывает слот подписи — кнопка рендерится только с иконкой. Обязательно задайте accessible name через aria-label.
vue
<SButton icon="settings" aria-label="Settings" />Активное состояние
active задаёт выбранное состояние извне, когда активность не совпадает с текущим маршрутом link или выбором в SButtonGroup — например, пункт навигации подсвечен на любой странице раздела. Явное значение приоритетнее состояния ссылки и группы; без пропа поведение прежнее. ARIA-атрибут проп не выставляет: для навигации передайте aria-current.
Icon-only кнопка appearance="bare" в выбранном состоянии получает спокойную подложку: у variant="neutral" — фон main-action-calm-selected и иконка icon-main-pressed, у main, danger и success — яркую заливку. Так же выглядит выбор через link и SButtonGroup.
vue
<SButton
appearance="bare"
variant="neutral"
icon="ball"
active
aria-label="Finances"
aria-current="page"
/>Счётчик внутри угла
По умолчанию бейдж counter висит снаружи за правым верхним углом. В узкой колонке (например, свёрнутый сайдбар) он обрезается — задайте badgeInset: счётчик встанет внутрь угла кнопки в компактном размере, с теми же отступами, что у indicator.
vue
<SButton
appearance="bare"
variant="neutral"
icon="ball"
:counter="5"
badge-inset
aria-label="Inbox"
/>API Reference
Свойства
| Имя | Тип | Описание | По умолчанию |
|---|---|---|---|
active | boolean | Контролируемое выбранное (активное) состояние; приоритетнее состояния ссылки и группы. | undefined |
appearance | EButtonAppearance | Визуальный вес поверхности кнопки. | major |
badgeColor | ESBadgeColor | Цветовая роль бейджа-счётчика или индикатора. | — |
badgeInset | boolean | Ставит бейдж counter внутрь правого верхнего угла в компактном размере (для узких колонок). | false |
counter | number | Число в бейдже у правого верхнего угла: снаружи, с badgeInset — внутри. | — |
disabled | boolean | Отключает взаимодействие и приглушает контрол. | false |
icon | TSIconName | Одна иконка по центру; при задании скрывает содержимое слота подписи. | — |
iconLeft | TSIconName | Иконка перед подписью. | — |
iconRight | TSIconName | Иконка после подписи. | — |
indicator | boolean | Показывает внутренний индикатор в правом верхнем углу, если не передан counter. | false |
fullWidth | boolean | Растягивает кнопку на всю ширину контейнера. | false |
loading | boolean | Показывает спиннер поверх и блокирует клики. | false |
size | EButtonSize | Масштаб высоты и типографики. | medium |
value | TSButtonValue | Значение для форм или групп с общим выбором. | — |
variant | EButtonVariant | Семантическая цветовая роль. | main |
link | string | RouteLocationRaw | Рендер как ссылка (a или router-link), если задано. | — |
exact | boolean | Точное совпадение маршрута для router-link (path и query). | false |
replace | boolean | Замена текущей записи в history при навигации. | false |
Слоты
| Имя | Описание |
|---|---|
default | Подпись кнопки |