Директива nuiButton стилизует нативный <button> или <a>. Элемент сохраняет семантику, работу с клавиатурой и участие в формах; директива лишь переносит свои входные свойства в data-атрибуты, которые использует таблица стилей.
Используйте <button> для действий, а <a> — для навигации. Выглядят они одинаково, и оба поддерживают disabled.
Варианты
Четыре стиля заливки — от самого заметного до самого сдержанного. Для основного действия используйте на экране одну кнопку со сплошной заливкой.
Тона
Тон меняет палитру: accent — для основного сценария, neutral — для второстепенных действий, danger — для деструктивных.
Размеры
Три высоты: 28, 36 и 44 пикселя. Даже наименьшая превышает минимальный размер области нажатия по WCAG 2.2.
Ссылки и отключённые кнопки
У ссылок нет нативного состояния disabled, поэтому отключённая ссылка получает aria-disabled="true", а клики по ней блокируются — даже с routerLink.
Эффекты нажатия
Нажмите и удерживайте каждую кнопку. press задаёт, что делает кнопка, пока её удерживают, а motion — пружину, с которой она возвращается на место. data-nui-press на любом элементе применяет эффект ко всему его содержимому.
Углы, радиус и плотность
corners меняет форму углов, radius — их размер, а density — сколько места занимает кнопка; при этом она никогда не становится меньше минимальной области нажатия в 24px. Браузеры без поддержки corner-shape рисуют углы скруглёнными.