CompoundButton

CompoundButton là nút lớn có icon và hai dòng chữ: nhãn chính và một dòng mô tả giải thích hành động.

Dùng chung appearance/size/shape với Button nhưng cao tự do, icon 32px (small) hoặc 40px (medium, large). Dòng phụ nhỏ hơn nhãn một bậc (caption2 / caption1 / body1 theo size), màu foreground-2 (trên nền primary, danger là foreground-on-brand). Hỗ trợ asChild, iconPosition và icon-only.

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 { CompoundButton } 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

secondary (mặc định), primary, outline, subtle, transparent.

Kích thước

small (icon 32px), medium và large (icon 40px).

Vị trí icon, chỉ icon & disabled

iconPosition="after"; bỏ children để thành nút chỉ icon (bắt buộc aria-label).

Xem ButtonMở trang tài liệu Button

Liên kết (asChild)

Giữ giao diện CompoundButton nhưng render thẻ <a>.

Cách dùng

Nên

Dùng khi dòng mô tả giúp người dùng hiểu hậu quả của hành động.
Giữ dòng phụ ngắn — một dòng, không chấm câu.
Dùng icon 24/28 (tự phóng lên 32/40) cho cân với chiều cao nút.

Không nên

Không dùng trong thanh công cụ hay hàng nút dày đặc — dùng Button.
Không đặt nhiều CompoundButton primary cạnh nhau.
Không nhồi đoạn văn dài vào secondaryContent.

Props

Prop · Kiểu	Mặc định	Mô tả
secondaryContentReactNode	Mặc định: —	Dòng mô tả thứ hai (nhỏ hơn nhãn một bậc, foreground-2).
iconReactNode	Mặc định: —	Icon lớn: 32px (small) / 40px (medium, large).
iconPosition"before" \| "after"	Mặc định: "before"	Vị trí icon.
appearance"secondary" \| "primary" \| "outline" \| "subtle" \| "transparent" \| "danger"	Mặc định: "secondary"	Giống Button.
size"small" \| "medium" \| "large"	Mặc định: "medium"	Padding, cỡ chữ, cỡ icon.
shape"rounded" \| "circular" \| "square"	Mặc định: "rounded"	Bo góc.
iconOnlyboolean	Mặc định: —	Tự bật khi có icon mà không có children/secondaryContent.
asChildboolean	Mặc định: false	Gộp vào phần tử con (vd. <a>).