Biến thể
Tất cả biến thể nút
7 biến thể chính — mỗi loại phục vụ một mục đích riêng
Quy tắc: Mỗi view chỉ có 1 Primary button. Action button dùng cho hành động chính phụ. Danger chỉ dùng cho xóa/hủy.
Kích thước
Kích thước nút
3 kích thước: Small, Medium (mặc định), Large
Quy tắc: SM dùng trong bảng, toolbar. MD là mặc định. LG dùng cho CTA chính trên trang landing hoặc form lớn.
Icon + Text
Nút có biểu tượng
Kết hợp SVG icon với text label
Trạng thái
Trạng thái nút
Hover, Focus, Disabled
Quy tắc: Disabled button không có hover/focus effect. Luôn cung cấp tooltip giải thích tại sao nút bị vô hiệu hóa.
Nhóm nút
Button Groups — Nhóm nút liên kết
Các nút được nối liền nhau cho các hành động liên quan
Quy tắc: Button group tối đa 5 nút. Dùng cho phân trang, toggle view, hoặc toolbar actions liên quan.
Ví dụ thực tế
Ứng dụng trong giao diện
Cách kết hợp các nút trong form và toolbar
Quy tắc: Trong form: nút hủy luôn bên trái nút lưu. Nút xóa tách riêng bên trái. Toolbar: hành động chính bên trái, phụ bên phải.
Tham chiếu
CSS Variables — Biến thiết kế
Tất cả token có thể tùy chỉnh qua :root
:root {
--color-primary: #111827;
--color-action: #2563eb;
--color-success: #059669;
--color-danger: #dc2626;
--color-default-bg: #fff;
--color-default-border: #dbe3ef;
--color-default-text: #172033;
--color-ghost-text: #64748b;
--color-ghost-hover: #f1f5f9;
--radius-btn: 10px;
--font-weight-btn: 700;
--font-size-btn: 13px;
--padding-btn: 10px 20px;
--shadow-hover: 0 4px 12px rgba(0,0,0,0.1);
--focus-ring: 0 0 0 3px rgba(37,99,235,0.2);
}