Button

Dựa vào source code tại src/shared/components/Button.tsx, thành phần Button (Nút bấm) trong hệ thống được thiết kế theo tiêu chuẩn Premium với các biến thể và thuộc tính như sau:

1. Các biến thể kiểu dáng (variant)

Component hỗ trợ 8 semantic variants, tương ứng với các trạng thái và ngữ cảnh khác nhau trong ứng dụng (mặc định là primary):

• primary: Nút hành động chính.
• secondary: Nút hành động phụ.
• success: Hành động thành công/hoàn thành.
• warning: Cảnh báo cần chú ý.
• danger: Hành động nguy hiểm/xóa.
• info: Thông tin thông thường.
• outline: Nút có viền, nền trong suốt, màu chữ theo theme hiện tại.
• ghost: Nút không viền mờ nhạt (trong suốt), hiển thị rõ nền khi tương tác.

2. Các kích thước chuẩn (size)

Hệ thống sử dụng kích thước chuẩn tối ưu cho hành vi chạm thao tác trên màn hình (Touch-friendly base: tối thiểu 44px), mặc định là md:

• md (Mặc định): Kích thước chuẩn, chiều cao tối thiểu 44px. Text kích thước cơ bản.
• sm: Lựa chọn nhỏ nhọn, chiều cao tối thiểu 36px (chỉ dùng trong các giao diện chật hẹp, không ưu tiên chạm).
• lg: Nút gọi hành động (CTA) nổi bật, chiều cao tối thiểu 52px.
• icon: Định dạng khối vuông dành riêng cho nút chỉ chứa Icon, kích thước tối thiểu 44x44px.

3. Hỗ trợ Icon (leftIcon, rightIcon)

Được thiết kế để tích hợp liền mạch với Lucide Icon (thông qua Icon wrapper component đảm bảo tính nhất quán của nét và stroke):

• Yêu cầu tên Icon hợp lệ với thuộc tính leftIcon (nằm bên trái) hoặc rightIcon (nằm bên phải).
• Tự động thay đổi kích thước Icon theo cỡ (Size) của Button: sm sử dụng icon cỡ 16px, các cỡ còn lại mặc định 20px.

4. Các trạng thái và tính năng mở rộng

• isLoading: Trạng thái đang xử lý. Hiển thị Spinner tương ứng theo kích thước nút và tự động vô hiệu hóa (disabled) nút bấm.
• fullWidth: Mở rộng chiều ngang nút chiếm 100% dung lượng container chưa nó.
• asChild: Hỗ trợ kiến trúc Slot từ Radix UI. Cho phép gộp các props và styles của Nút hiện tại vào thẻ HTML hoặc component con, ví dụ phổ biến khi dùng chung với React Router Link.

Thành phần Button được tối ưu các phản hồi tương tác mượt mà và hỗ trợ đầy đủ focus ring truy cập cho tiêu chuẩn giao diện chất lượng cao. Thông số chi tiết đã được trích xuất hoàn toàn trùng khớp với định nghĩa component trong hệ thống của bạn.