ButtonGroup
Mẫu chuẩnGhép nhiều Button thành một cụm. Nút chữ đứng cạnh nút icon, hoặc một hàng nút chỉ có icon. Không có màu riêng.
Playground
Cụm chữ + icon, và cụm chỉ icon. Nút icon mang data-icon để bề rộng bằng chiều cao 40 px.
Khi nào sử dụng
Nên dùng
Một hành động tách thành nút chữ và nút icon, hoặc vài nút icon cùng một viền.
Tránh dùng
Hai việc không liên quan thì để hai nút rời. Nhiều lệnh thì dùng Dropdown menu. Không đặt hai primary trong một cụm.
Anatomy
Vỏ là role="group". Mỗi con là Button cùng size. Góc trong bị vuông để viền khít nhau, hai viền kề chồng 1 px. Nút có data-icon vuông theo size của cụm. Hover và focus nổi lên trên nút bên cạnh.
Design tokens
Không có token mới. Bo góc, chiều cao và viền là của Button con. Nút icon đọc chiều cao sm, md hoặc lg của Button.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| orientation | horizontal | Ngang hoặc dọc. |
| size | md | Chỉ để vuông hoá con có data-icon. Button con vẫn nhận size của chính nó. |
| aria-label | — | Tên của cả cụm. Mỗi nút icon vẫn cần aria-label riêng. |
Accessibility
Tab đi từng nút. Cụm không phải một điểm dừng Tab. Mũi tên không chuyển nút trong cụm.