НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Кнопка

Кнопка выполняет одно действие или отправляет форму. У неё всегда есть текст.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Save changes Place order
<tk-button>Save changes</tk-button>
<tk-button variant="primary" type="submit">Place order</tk-button>

Анатомия

Часть Что это
tk-button сам элемент; одна остановка Tab
слот по умолчанию текст кнопки, обязателен; он же доступное имя
слот icon-start иконка перед текстом, по желанию
слот icon-end иконка после текста, по желанию
part button нативный <button> внутри

Варианты

Publish Save draft Preview Discard
<tk-button variant="primary">Publish</tk-button>
<tk-button>Save draft</tk-button>
<tk-button variant="outline">Preview</tk-button>
<tk-button variant="ghost">Discard</tk-button>
  • primary: главное действие экрана. Одна на экран.
  • secondary (по умолчанию): большинство кнопок, включая «Отмена» и «Назад».
  • outline: когда кнопке нужна видимая граница, например на пёстром фоне или в соединённой Button group. Рамка у неё светлая, поэтому на утопленной поверхности, например в нейтральном Banner или Section message, используйте secondary или ghost.
  • ghost: тихие или повторяющиеся действия, например действие в строке таблицы.

Опасное действие

tone="danger" отмечает действие, которое что-то удаляет. Выглядит всегда одинаково, какой бы variant вы ни задали: красноватая кнопка с красным текстом.

Cancel Delete account
<tk-button>Cancel</tk-button>
<tk-button tone="danger">Delete account</tk-button>

Напишите в тексте, что именно будет удалено. Одного цвета мало: его видят не все.

Форма

shape="round" полностью скругляет края кнопки. Работает с любым вариантом и размером. Соединённая группа кнопок или Split button задаёт углы сама.

Follow Subscribe
<tk-button shape="round">Follow</tk-button>
<tk-button variant="primary" shape="round">Subscribe</tk-button>

Размеры

Small Medium Large
<tk-button size="small">Small</tk-button>
<tk-button>Medium</tk-button>
<tk-button size="large">Large</tk-button>
size Высота Отступ по бокам Стиль текста Иконка
small 24px space-8 Label Small (12/16) icon-size-16
medium (по умолчанию) 32px space-12 Label Medium (14/20) icon-size-16
large 36px space-16 Label Medium (14/20) icon-size-16

Длинный текст переносится, и кнопка растёт. small ровно 24px, это минимальный размер цели нажатия, поэтому не уменьшайте и не сжимайте её.

Состояния

Save changes Place order Pin to top
<tk-button disabled>Save changes</tk-button>
<tk-button variant="primary" loading>Place order</tk-button>
<tk-button pressed>Pin to top</tk-button>

Наведение, нажатие и фокус работают без атрибутов. При фокусе с клавиатуры у любой кнопки появляется рамка.

  • disabled: на кнопку нельзя перейти и нельзя нажать, а опасная кнопка становится серой. Лучше оставить кнопку активной и по нажатию подсказать, что исправить.
  • loading: вместо текста крутится индикатор, размер не меняется, повторные нажатия не срабатывают. Кнопка остаётся в фокусе и сообщает скринридеру, что занята. Если задан ещё и disabled, кнопка будет отключена.
  • pressed: включённое состояние переключателя. Вместо того чтобы ставить его вручную, оберните кнопку в Toggle button. У primary нажатого вида нет.

Во всю ширину

full-width растягивает кнопку на всю ширину контейнера. Подходит для кнопок друг под другом на узких экранах, но не для форм на десктопе.

Place order Back
<tk-button variant="primary" full-width>Place order</tk-button>
<tk-button full-width>Back</tk-button>

Иконки

Add member Export
<tk-button><tk-icon slot="icon-start" name="plus"></tk-icon>Add member</tk-button>
<tk-button>Export<tk-icon slot="icon-end" name="chevron-down"></tk-icon></tk-button>
  • tk-icon в icon-start показывает, что делает кнопка, а в icon-end — что будет дальше, например откроется меню. Одна иконка на кнопку.
  • Кнопка сама задаёт иконке размер 16px и цвет текста и скрывает её от скринридеров.