Split
SplitButton cho phép chọn một trong nhiều hành động liên quan: nút chính là hành động trội, các lựa chọn khác nằm trong menu.
Hành động trội không được lặp lại trong menu. Dùng khi có một lựa chọn mặc định rõ ràng và vài biến thể ít dùng hơn.
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 { SplitButton, MenuItem } 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, secondary (mặc định), outline, subtle.
Kích thước
small, medium, large.
Cách dùng
Nên
- Hành động trên nút chính là lựa chọn phổ biến nhất.
- Menu chứa 2–5 biến thể của cùng hành động.
Không nên
- Không lặp lại hành động chính trong menu.
- Không dùng khi các lựa chọn ngang hàng nhau — dùng Menu thường.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| appearance"primary" | "secondary" | "outline" | "subtle" | Mặc định: "secondary" | Áp dụng cho cả hai nửa. |
| size"small" | "medium" | "large" | Mặc định: "medium" | Kích thước. |
| menuReactNode | Mặc định: — | MenuItem / MenuItemRadio / MenuDivider. |
| menuLabelstring | Mặc định: "More options" | aria-label cho nút mở menu. |
| icon, onClick, disabled…ButtonProps | Mặc định: — | Truyền cho nút chính. |
Messages
Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.
Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.
messages.splitButton
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| menustring aria-label của nút mở menu. | Mặc định (tiếng Anh)"More options" | messagesVi"Thêm tuỳ chọn" |