Button

Варианты

Цвета

Размеры

С иконкой

Состояния

Событие

Ссылки

Внутренняя Внешняя

Входные параметры

Имя	Тип	По умолчанию	Описание
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Нативный type кнопки.
`color`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'primary'`	Цвет кнопки.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Размер кнопки.
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Вариант оформления.
`disabled`	`boolean`	`false`	Отключает кнопку.
`loading`	`boolean`	`false`	Показывает индикатор загрузки.
`block`	`boolean`	`false`	Растягивает кнопку на всю ширину.
`icon`	`string`	`undefined`	Иконка: имя из реестра иконок или сырой SVG-код.
`to`	`string`	`undefined`	Внутренний маршрут приложения (рендерит NuxtLink).
`href`	`string`	`undefined`	Внешняя ссылка (рендерит `<a>`).
`target`	`string`	`undefined`	Целевое окно для внешней ссылки.

События

click — payload: объект MouseEvent. Срабатывает при клике по кнопке; не эмитится для отключённой или загружающейся кнопки.

Описание

Компонент C3Button — кнопка действий с цветами, размерами, вариантами оформления, иконкой и состояниями. Является основным элементом для запуска действий в интерфейсе.

По умолчанию рендерится как <button>. При заданном to превращается в NuxtLink, при href — в <a>. Для внешней ссылки с target="_blank" автоматически добавляется rel="noopener noreferrer".

Дополнительная информация

Слоты:

default — содержимое кнопки (текст между иконкой и спиннером).

Доступность и поведение:

В состоянии loading показывается спиннер, заменяющий иконку.
Для отключённых и загружающихся кнопок устанавливается aria-disabled="true".
Вместо иконки в состоянии loading спиннер скрыт от скринридеров; кнопка блокирует клик.