Button
ButtonGroup ghép các nút liền kề thành một khối điều khiển thống nhất cho những hành động cùng nhóm.
Bo góc bên trong và viền chồng nhau được gộp tự động (-ms-px theo hàng ngang, -mt-px theo cột dọc). Dùng ButtonGroupSeparator khi các nút không có viền (primary, subtle). Hoạt động cùng Button, ToggleButton và SplitButton.
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 { ButtonGroup, ButtonGroupSeparator } 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.
Hướng dọc
orientation="vertical" — thường dùng cho cặp phóng to / thu nhỏ trên bản đồ, canvas.
Vạch chia
Nút primary không có viền — thêm ButtonGroupSeparator appearance="on-brand" để tách.
Kết hợp SplitButton
SplitButton đặt trong nhóm cũng được gộp bo góc.
Cách dùng
Nên
- Chỉ nhóm các hành động liên quan chặt chẽ (hoàn tác/làm lại, phóng to/thu nhỏ).
- Dùng cùng appearance và size cho mọi nút trong nhóm.
- Thêm aria-label cho nút chỉ có icon.
Không nên
- Không nhóm quá 5 nút — cân nhắc Toolbar hoặc Menu.
- Không trộn primary và secondary trong cùng một nhóm.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| orientation"horizontal" | "vertical" | Mặc định: "horizontal" | Hướng xếp nút; bo góc và viền giữa được gộp tự động. |
| childrenReactNode | Mặc định: — | Button, ToggleButton, SplitButton, ButtonGroupSeparator. |
| ButtonGroupSeparator | Mặc định: "default" | on-brand khi đặt giữa các nút primary. |
| ButtonGroupSeparator | Mặc định: "vertical" | Ngược với hướng của nhóm. |