Menu
MenuButton là nút có chevron ở cuối, bấm vào để mở một Menu các lựa chọn.
Nhận mọi prop của Button cộng thêm
menu (nội dung MenuPopover). Chevron xoay 180° khi menu mở (data-[state=open]); nút giữ sắc pressed trong lúc mở. Khác SplitButton: toàn bộ nút chỉ mở menu, không có hành động mặc định.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 { MenuButton, 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, transparent.
Kích thước
small, medium, large.
Chỉ icon, menuIcon & disabled
Không có nhãn → nút gọn gồm icon + chevron (cần aria-label). menuIcon thay chevron mặc định.
Menu đã đóng
Điều khiển trạng thái mở
open / onOpenChange để đồng bộ với state bên ngoài.
Cách dùng
Nên
- Nhãn mô tả nhóm lựa chọn (Sắp xếp, Xuất, Chế độ xem…).
- Dùng khi các lựa chọn ngang hàng, không có cái nào là mặc định.
- Nút chỉ icon luôn có aria-label.
Không nên
- Không dùng khi có một hành động mặc định rõ ràng — dùng SplitButton.
- Không đặt form phức tạp trong menu — dùng Popover.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| menuReactNode | Mặc định: — | Nội dung MenuPopover: MenuItem, MenuItemRadio, MenuDivider… |
| menuIconReactNode | Mặc định: <ChevronDown20Regular /> | Icon ở cuối, xoay 180° khi mở. |
| open / defaultOpen / onOpenChangeboolean / (open: boolean) => void | Mặc định: — | Điều khiển trạng thái menu. |
| align"start" | "center" | "end" | Mặc định: "start" | Căn menu theo nút. |
| appearance / size / shape / icon / disabled…ButtonProps | Mặc định: — | Truyền cho Button bên trong. |