Info
InfoLabel is a label with a small info button that opens a Popover with extra guidance for a field.
Use it when a field needs a short explanation but a permanent hint would take too much space. The (i) button opens a Popover on click or on Enter / Space; the icon switches to its filled form on hover and while the Popover is open.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { InfoLabel } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Size & weight
small, medium (default), large; weight regular / semibold.
Required & content with a link
info accepts a ReactNode, so it can contain a link.
Usage
Do
- Keep the Popover content short (1–3 sentences). It should add to the label, not repeat it.
- Use htmlFor so the label stays linked to the input.
Don't
- Don't put information people must read to fill in the field in the Popover. Use hint.
- Don't put a form or several actions in info.
Props
| Prop · Type | Default | Description |
|---|---|---|
| infoReactNode | Default: — | Popover content. |
| size"small" | "medium" | "large" | Default: "medium" | Font size of the label and button. |
| weight"regular" | "semibold" | Default: "regular" | Label font weight. |
| required / disabledboolean | Default: — | Red *; disabled text. |
| infoButtonLabelstring | Default: "Information" | aria-label of the (i) button. |
| htmlFor, …LabelHTMLAttributes | Default: — | Passed to the <label> element. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.infoLabel
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| infoButtonstring aria-label của nút thông tin (i). | Default (English)"Information" | messagesVi"Thông tin" |