Компоненты · Элементы

КнопкаButton

Таблетки 40, 48, 56 и круглые: варианты и состояния

npx shadcn@latest add @umbra/button

Таблетка с подписью Label (14 / 500) или круглая кнопка-иконка. Без рамок и подложек, цвет только по роли

Когда брать

  • primary: одно главное действие на экране или в плитке («Начать запись», «Сохранить»)
  • secondary: обычное действие рядом с главным («Отмена», «Экспорт»)
  • ghost: тихое второстепенное действие («Позже», «Подробнее»)
  • destructive: удаление. Только для необратимого
  • icon: круглая кнопка-иконка, когда смысл понятен без подписи (в шапке страницы: кнопка 56, иконка 24). Подпись в aria-label

Когда не брать

  • Фильтр или вкладка: Chip
  • Пункт навигации: Sidebar
  • Поиск: SearchToggle
  • Остановка записи: красная кнопка дока (Dock), а не destructive
  • Ссылка в тексте: обычная ссылка. Кнопка-ссылка через asChild

Настройки записи

Применяются к новым встречам

Видно только вам

Можно

  • Одна primary на плитку или экран
  • Подпись: глагол и что сделать («Начать запись»), коротко

Нельзя

  • Приглушённый акцент как неактивное состояние («грязная олива»)
  • Градиент, свечение, тень у кнопки
  • Своя высота или радиус (h-9, rounded-lg): только 40 / 48 / 56 и таблетка
  • Кнопка-иконка без aria-label