Infocon
Last Updated: September 2026Infocons are icons that store additional information about nearby content — further explanation when there isn’t room inline, or when the detail isn’t critical to understand immediately.
Source CodeAnatomy
link- 1Info icon
- 2Popover
Variants
linkDefault
Medium Infocon with short helper content.
Beside a label
Common pattern — place next to a field or section title.
Side
Position the panel with side: top, bottom (default), left, or right.
Sizes
linkInfocons support 2 sizes: S and M.
Usage Guidelines
linkWhen to use
- •To store additional explanation about nearby content when there isn’t room for it inline.
- •When the information is helpful but not critical to understand immediately.
- •On dense surfaces (labels, metrics, score cards) where permanent helper text is too noisy.
When not to use
- •For critical instructions that must always be visible — keep them inline.
- •For interactive menus or forms — use Popover, Menu, Modal, or Drawer.
- •As a hover label on an existing control — use Tooltip on that control instead.
Keep content to a short phrase or sentence that clarifies the nearby UI.
Don't dump long policies or multi-step instructions into the panel.
Pair with a visible label or metric so the Infocon’s purpose is clear.
Don't use Infocon as the only way to learn a critical requirement.
Behaviors
linkOpen behavior
- •Infocon is built on Base UI Popover (not Tooltip) so touch and keyboard users can open it.
- •Trigger uses openOnHover with delay 0; focus also opens the panel.
Overflow
- •Content is wrapped in ScrollArea so longer copy scrolls inside the available popover height.
Content Guidelines
linkCopy
- •Prefer one short sentence that clarifies the nearby control or metric.
- •Avoid links, forms, or actions — keep content non-interactive.
Accessibility
linkText & Labels
- •The info glyph is the trigger — keep nearby text so context isn’t icon-only.
- •Put the help string in children; don’t rely on title attributes alone.
ARIA attributes
- •Uses Base UI Popover for accessible hover/focus disclosure on pointer and touch.
Keyboard Support
- •Tab → focus the Infocon trigger.
- •Enter / Space → open (Popover trigger).
- •Escape → close when focused in the open panel.
WCAG Compliance Standards
FAQs
linkInfocon vs Tooltip?
Infocon is a dedicated info affordance (icon + help panel). Tooltip wraps an existing control with a short hover label. Prefer Infocon next to labels and metrics; Tooltip on buttons and icon-only actions.
Why Popover instead of Tooltip under the hood?
Base UI recommends Popover for this pattern so touch users can open and dismiss help content reliably.
What is the React export called?
Import InfoIcon from @getathelas/ui — same component as Infocon in Figma and on this site.