Info
InfoLabel là nhãn kèm nút thông tin nhỏ, mở Popover giải thích thêm cho trường nhập liệu.
Dùng khi trường cần giải thích ngắn nhưng không muốn chiếm chỗ bằng hint cố định. Nút (i) bật Popover khi bấm hoặc nhấn Enter / Space, icon chuyển sang dạng filled khi hover hoặc đang mở.
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 { InfoLabel } 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.
Kích thước & độ đậm
small, medium (mặc định), large; weight regular / semibold.
Bắt buộc & nội dung có link
info nhận ReactNode, có thể chứa liên kết.
Cách dùng
Nên
- Giữ nội dung Popover ngắn (1–3 câu), bổ sung cho nhãn chứ không lặp lại.
- Dùng htmlFor để nhãn vẫn liên kết với ô nhập.
Không nên
- Không đặt thông tin bắt buộc phải đọc mới điền được vào Popover — dùng hint.
- Không đặt form hay nhiều hành động trong nội dung info.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| infoReactNode | Mặc định: — | Nội dung Popover. |
| size"small" | "medium" | "large" | Mặc định: "medium" | Cỡ chữ nhãn và nút. |
| weight"regular" | "semibold" | Mặc định: "regular" | Độ đậm nhãn. |
| required / disabledboolean | Mặc định: — | Dấu * đỏ; chữ disabled. |
| infoButtonLabelstring | Mặc định: "Information" | aria-label cho nút (i). |
| htmlFor, …LabelHTMLAttributes | Mặc định: — | Truyền cho phần tử <label>. |
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.infoLabel
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| infoButtonstring aria-label của nút thông tin (i). | Mặc định (tiếng Anh)"Information" | messagesVi"Thông tin" |