Тема
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" />API Reference
Свойства
| Имя | Тип | Описание | По умолчанию |
|---|---|---|---|
appearance | EButtonAppearance | Визуальный вес поверхности кнопки. | major |
badgeColor | ESBadgeColor | Цветовая роль бейджа-счётчика или индикатора. | — |
counter | number | Число во внешнем бейдже в правом верхнем углу. | — |
disabled | boolean | Отключает взаимодействие и приглушает контрол. | false |
icon | TSIconName | Одна иконка по центру; при задании скрывает содержимое слота подписи. | — |
iconLeft | TSIconName | Иконка перед подписью. | — |
iconRight | TSIconName | Иконка после подписи. | — |
indicator | boolean | Показывает внутренний индикатор в правом верхнем углу, если не передан counter. | 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 | Подпись кнопки |