Info Hint

A small info button that opens one sentence of explanation, with an optional link.

Spaces

Install

Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Info Hint before installation. Retain the digest printed by this command.

pnpm exec vegastack-design verify info-hint

Install with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.

pnpm dlx shadcn@4.21.0 add @vegastack/info-hint

Run the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.

The same command installs the registry items it composes: @vegastack/button, @vegastack/popover.

Usage

import { InfoHint } from "@/components/ui/info-hint";

<h2 className="flex items-center gap-1">
  Spaces
  <InfoHint label="About spaces" href="https://help.example.com/spaces">
    A space groups the people and records that work together.
  </InfoHint>
</h2>;

InfoHint composes a ghost icon-xs Button with a muted info icon and a Popover. The children are the explanation — one sentence. href adds a link under it that opens in a new tab; linkLabel names it (default "Learn more").

Scope

Need	Use
One sentence explaining a heading or label	`InfoHint`
The name of an icon-only control	`Tooltip`
Help text a person needs to fill a field	`FieldDescription`, always visible
Rich content, forms or several actions	`Popover`

Examples

With a link

href renders a link under the sentence. It opens in a new tab, and its accessible name ends with "(opens in a new tab)".

Publishing

Beside a field label

side and align place the popover; it opens below and start-aligned by default.

In a dialog

The hint never takes focus on its own, but DialogContent focuses the first focusable element when it opens — a hint in the title would be first. Point the dialog's initialFocus at the first field.

const nameRef = useRef<HTMLInputElement>(null);

<DialogContent initialFocus={nameRef}>
  <DialogTitle className="flex items-center gap-1">
    New space
    <InfoHint label="About spaces">
      A space groups the people and records that work together.
    </InfoHint>
  </DialogTitle>
  <Input ref={nameRef} />
</DialogContent>;

API Reference

Prop	Type	Default	Description
`children`*	`React.ReactNode`	—	The explanation: one sentence.
`label`*	`string`	—	The trigger's accessible name — "About <topic>", e.g. "About spaces".
`align`	`"center" \| "end" \| "start"`	`"start"`	How the popover aligns with the trigger.
`contentClassName`	`string`	—	`className` for the popover panel.
`href`	`string`	—	Optional link under the sentence, opened in a new tab.
`linkLabel`	`string`	`"Learn more"`	Text of the optional link.
`loading`	`boolean`	—	Shows a spinner over the label, blocks activation and sets `aria-busy`. The label keeps its box at `opacity: 0`, so the button's width does not move and its accessible name survives (API-5, A11Y-12).
`side`	`"bottom" \| "inline-end" \| "inline-start" \| "left" \| "right" \| "top"`	`"bottom"`	Which side of the trigger the popover opens on.

Data attributes and CSS variables on InfoHint

Attribute	Values
`data-slot`	`"info-hint" \| "info-hint-content" \| "info-hint-link"`

Accessibility

label is required and names the trigger; write it as "About <topic>".
The trigger is a real button, so it opens on click, tap, Enter or Space, and reports aria-expanded.

Key	Action
`Enter`	Opens or closes the popover
`Space`	Opens or closes the popover
`Tab`	Moves into the popover's link, when there is one
`Escape`	Closes the popover and returns focus to the trigger

Contract	States tested
Behaviour	`closed`, `open`, `with-link`, `dialog-initial-focus`
Accessibility	`labeled`, `keyboard`, `focus-return`, `new-tab-announced`, `browser-accessibility-test`
Visual	`default`, `hover`, `focus`, `open`

Do / Don't

Keep the explanation to one sentence and name the trigger 'About <topic>'; link to the full article for anything longer.

Don't

Hide information people need to complete a task in a hint, or use it to name an icon-only control — that is a Tooltip.

Spaces

Publishing

On this page