Перейти к содержимому
v2.5.0
English
Русский
Документация

ButtonBase

ButtonBase — низкоуровневый примитив действия, на котором построены Button и IconButton.

Подписи

  • Текстовые кнопки получают имя из видимого содержимого.
  • Кнопкам только с иконкой нужен явный aria-label.
  • При asChild итоговый дочерний элемент всё равно должен иметь корректное доступное имя.

Поведение клавиатуры

ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
КлавишаДействие
EnterSpaceАктивирует кнопку в фокусе. Это нативный <button>; с asChild у дочернего элемента остаются свои клавиши, и ссылка реагирует только на Enter.
Каждая строка проверена в настоящем браузере: Playwright нажимает клавишу в Chromium и смотрит, где оказались фокус и активный элемент.

Поведение фокуса

  • ButtonBase рендерит видимую обводку :focus-visible цветом --focus-color.
  • disabled отключает взаимодействие.
  • Если действие должно оставаться фокусируемым, но визуально заблокированным, выберите другую модель взаимодействия, а не навязывайте стили отключённого состояния.

Семантика для скринридеров

  • По умолчанию семантика — как у нативного button.
  • С asChild семантику определяет элемент в слоте.
  • Не превращайте навигационные ссылки в псевдокнопки, если взаимодействие в продукте на самом деле является навигацией.

Риски доступности

  • Содержимое только из иконки без подписи.
  • asChild с неинтерактивным дочерним элементом.
  • Забытое различие: у button и a разные ожидания от клавиатуры и скринридеров.