Directive nuiButton tạo kiểu cho một <button> hoặc <a> native. Phần tử vẫn giữ nguyên ngữ nghĩa, hành vi bàn phím và khả năng tham gia biểu mẫu; directive chỉ phản ánh các input của nó sang các thuộc tính data mà stylesheet nhắm tới.
Dùng <button> cho hành động và <a> cho điều hướng. Cả hai trông giống nhau và đều hỗ trợ disabled.
Biến thể
Bốn kiểu tô nền, từ nổi bật nhất đến kín đáo nhất. Mỗi màn hình chỉ nên có một nút solid cho hành động chính.
Tông màu
Tông màu thay đổi bảng màu: accent cho luồng chính, neutral cho hành động phụ, danger cho hành động mang tính phá hủy.
Kích thước
Ba chiều cao: 28, 36 và 44 pixel. Ngay cả cỡ nhỏ nhất cũng vượt kích thước vùng nhấn tối thiểu của WCAG 2.2.
Liên kết và nút bị vô hiệu hóa
Thẻ a không thể vô hiệu hóa theo cách native, nên liên kết bị vô hiệu hóa sẽ nhận aria-disabled="true" và bị chặn cú nhấp, kể cả khi dùng routerLink.
Hiệu ứng nhấn
Hãy nhấn giữ từng nút. press quyết định nút làm gì khi đang được nhấn giữ, còn motion quyết định lò xo đưa nút trở lại. data-nui-press trên bất kỳ phần tử nào sẽ áp dụng hiệu ứng cho mọi thứ bên trong.
Góc, bo góc và mật độ
corners thay đổi hình dạng các góc, radius thay đổi mức bo góc, còn density thay đổi không gian mà nút chiếm, nhưng không bao giờ nhỏ hơn vùng nhấn 24px. Trình duyệt không hỗ trợ corner-shape sẽ vẽ góc bo tròn.