Inputs
HelpHint
A small "?" after a label that opens a short explanation of why we ask (Figma "Help Hint" 170:208).
The button is 24 px, with a 44 px hit area for touch. The popover is a base-ui Popover: Esc closes it and focus returns to the button. Never put information here that the person needs to complete the field.
<HelpHint label="Por que pedimos o CPF?" title="Por que o CPF?">Para emitir a nota fiscal da assinatura.</HelpHint>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Help Hint
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Help Hint ·
| Help Hint | Hover | Focus |
|---|---|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | — | Accessible name of the button, e.g. "Por que pedimos o CPF?". |
| title? | ReactNode | — | Optional heading inside the popover. |
| children | ReactNode | — | The explanation: one or two short sentences. |
| open? | boolean | — | Open state, when the parent controls it. |
| defaultOpen? | boolean | — | |
| onOpenChange? | ((open: boolean) => void) | — | |
| className? | string | — |