Button

Button kích hoạt một hành động hoặc sự kiện duy nhất.

Dùng Button cho các hành động quan trọng như gửi phản hồi, xác nhận thay đổi hoặc chuyển sang bước tiếp theo. Để điều hướng sang trang khác, hãy dùng link.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

// npm install yugen-uiimport { Button } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Appearance

primary cho hành động chính, secondary (mặc định), outline, subtle và transparent cho mức nhấn mạnh thấp dần.

Kích thước

small (24px), medium (32px — mặc định), large (40px).

Kèm icon

Icon đứng trước nhãn để bổ nghĩa; icon-only bắt buộc có aria-label.

Shape

rounded (mặc định), circular dùng cho FAB / thanh công cụ nổi, square cho toolbar sát cạnh.

Disabled

Chỉ disable khi người dùng hiểu được lý do; nếu không, hãy để bật và báo lỗi khi bấm.

Danger

Phần mở rộng của bộ này (không có trong Fluent gốc) cho hành động phá huỷ không thể hoàn tác.

Đang xử lý (loading)

Bấm một nút: Spinner thay chỗ icon (nút không icon: Spinner ở giữa), độ rộng giữ nguyên, nút vẫn focus được nhưng bỏ qua click; loadingText đổi nhãn mà không xê dịch bố cục.

Cách dùng

Nên

Mỗi vùng/màn hình chỉ có tối đa một Button primary.
Nhãn là động từ ngắn gọn mô tả kết quả: “Lưu”, “Gửi lời mời”.
Đặt hành động chính bên trái (hoặc bên phải trong Dialog, theo thứ tự đọc).

Không nên

Không dùng Button để điều hướng — hãy dùng link.
Không tự đổi màu nền Button bằng className; dùng appearance.
Không để icon-only Button thiếu aria-label hoặc Tooltip.

Props

Prop · Kiểu	Mặc định	Mô tả
appearance"secondary" \| "primary" \| "outline" \| "subtle" \| "transparent" \| "danger" \| "glass" \| "glass-prominent"	Mặc định: "secondary"	Mức độ nhấn mạnh của hành động. glass / glass-prominent (Yugen Labs): nút nổi trên nội dung, xem Foundations › Glass.
size"small" \| "medium" \| "large"	Mặc định: "medium"	Chiều cao 24 / 32 / 40px.
shape"rounded" \| "circular" \| "square"	Mặc định: "rounded"	Bo góc.
iconReactNode	Mặc định: —	Icon Fluent (@fluentui/react-icons, cỡ 20).
iconPosition"before" \| "after"	Mặc định: "before"	Vị trí icon so với nhãn.
iconOnlyboolean	Mặc định: tự suy ra	Tự bật khi có icon mà không có children.
asChildboolean	Mặc định: false	Render vào phần tử con (vd <a>) thay vì <button>.
loadingboolean	Mặc định: false	Đang xử lý: Spinner thay icon (hoặc ở giữa nút), giữ độ rộng, aria-busy + aria-disabled, bỏ qua click nhưng vẫn focus được.
loadingTextReactNode	Mặc định: —	Nhãn khi đang xử lý (vd. “Đang lưu…”); nút luôn rộng bằng nhãn dài hơn nên không xê dịch.