Button
Mẫu chuẩnKhởi tạo một hành động. Primary dùng màu brand của sản phẩm; selected state, link và focus dùng Interaction Blue chung.
Playground
Đổi cấu hình để xem cùng một Button thích ứng với nhận diện và ngữ cảnh.
Nhấn nút hoặc dùng Tab + Enter để kiểm tra.
import { Button } from "@nexobox/ui";
<Button variant="primary" size="md">
Lưu thay đổi
</Button>Khi nào sử dụng
Nên dùng
Gửi biểu mẫu, lưu thay đổi, mở hộp thoại hoặc bắt đầu một tác vụ có chủ đích.
Tránh dùng
Không dùng button để điều hướng URL. Không để nhiều primary tranh nhau trong cùng nhóm.
Anatomy
Padding ngang 16 px, khoảng cách icon–label 8 px. Không cắt ngắn nhãn. Khi chiều rộng hẹp, cho nhóm hành động xếp dọc.
Variants & states
Một hành động trọng tâm trong nhóm. Màu brand của sản phẩm đang chọn; selected, link và focus vẫn dùng Interaction Blue.
Hành động phụ, vẫn cần hiện diện rõ.
Viền control cùng alias với ô nhập và Select.
Chip đang chọn. Icon và chữ dùng màu information.
Hành động ít nhấn mạnh, gần nội dung.
Hành động phá huỷ. Vẫn cần xác nhận.
Size đang chọn: md · 40 px. Thiết bị cảm ứng giữ mục tiêu bấm ít nhất 44 px, bất kể chiều cao thị giác — vùng chạm và chiều cao tách nhau theo DS-017 clause 6.
Secondary và ghost lần đầu có màu pressed khác với hover: trước DS-018, hai trạng thái trỏ cùng một token nền, phân giải về cùng một giá trị ở theme sáng, nên chưa từng phân biệt được trên màn hình. Chọn state pressed ở trên để so.
Design tokens
Giá trị theo NexoCrew / light đang chọn trong playground. Nút đọc --nf-component-button-{variant}-background ở rest, -hover ở hover và -pressed ở nhấn — ba alias riêng, không bind thẳng token semantic. Chiều cao đọc --nf-component-button-height (md), --nf-component-button-sm-height hoặc --nf-component-button-lg-height theo size; ring focus-visible đọc --nf-component-focus-color / -width / -offset, giống hệt mọi control khác trong kit theo A35.
Primary resolve qua semantic.action.primary.* sang màu brand của sản phẩm; foreground theo tương phản của từng theme. Selected state, link và focus dùng cobalt chung. Outline đọc --nf-component-button-outline-border, cùng nguồn semantic.border.control với field.
--nf-foundation-motion-press-scale không còn được nút này bind: DS-018 clause 2 rút nó khỏi mọi primitive và giữ token lại trong corpus, chưa áp cho bề mặt nào.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| variant | primary | Mức nhấn mạnh, không phải trạng thái nghiệp vụ. |
| size | md | sm 36 px, md 40 px, lg 44 px ở comfortable. Ở compact chỉ md trượt xuống 36; sm và lg là hai mỏ neo cố định — DS-017 clause 3, 4. |
| loading | false | Spinner dẫn đầu, nhãn giữ nguyên, aria-busy và disabled. |
| disabled | false | Thuộc tính native. Nêu lý do cạnh nút. |