InfoButton
An info button that explains a value: on hover and focus in a tooltip, and on a press or a tap in a popover that stays.
import { InfoButton } from "@butteryui/react";Demo
When to use it
Use it for
- A metric, a total or a setting whose meaning isn't obvious from its name
- Beside a page header's value or a card's title
Not for
- Anything someone needs in order to finish a task: put it on the page
- Naming an icon-only action: use IconButton, whose tooltip is its name
Examples
Basic
An info button explaining a total: a tooltip on hover and focus, and a popover that stays on a press.
Beside a title
A metric card's title with an info button after it, 4px apart and centered on the title's line.
18
4 of them ship today
Shipping fee
An info button whose popover the page keeps in state, so a button elsewhere can open it too.
Variants and states
Beside a title
Hover or focus it for the tooltip; press or tap it and the words stay in a popover until Escape or a press elsewhere.
Props
InfoButton
| Prop | Type | Default | Description |
|---|---|---|---|
inforequired | string | What it explains, in a sentence or two. It names the button, shows as its tooltip and fills its popover. | |
side | "top" | "right" | "bottom" | "left" | "top" | Which side the tooltip and the popover open on. Defaults to "top" for the tooltip and "bottom" for the popover. |
open | boolean | Whether the popover is open. Pair with onOpenChange to control it. | |
defaultOpen | boolean | false | Whether the popover starts open when uncontrolled. Defaults to false. |
onOpenChange | ((open: boolean) => void) | Called when the popover opens or closes. |
It also takes Omit<ComponentPropsWithRef<"button">, "children">.
Accessibility
A native button named by its words (aria-label), which also show as a tooltip on hover and keyboard focus. A press, a tap, Enter or Space opens them in a popover named by its text while focus stays on the button and the tooltip stays closed, so the words are read once; Escape, Tab or a press elsewhere closes it.
| Keys | What they do |
|---|---|
| Enter or Space | Opens or closes the popover with its words, keeping focus on the button |
| Escape | Closes the popover |
| Tab | Closes the popover and moves on |
Motion
It scales to 97% while it's pressed, over `--bt-dur-press`, and springs back when it's let go.
With reduced motion: It presses in at once, and its popover fades in and out over 100ms without growing.
Layout
A 28px circle (--bt-h-sm) around a 16px info icon, which never shrinks; the whole circle is the hit area. Its popover is at most 320px wide (--bt-w-aside), or the room the window leaves, padded 12px, and its words wrap.