ContextualHelp
A contextual help component that displays helpful information in a popover when a user interacts with an icon button.
Import
import { ContextualHelp } from "@cfa/react-core";Live Editor
Guidelines
When to use
- ContextualHelp is supplementary help people open from an info or question-mark icon beside a field label or control.
Do
- Use the info icon (default) for short, nice-to-know guidance.
- Use the help icon for longer guidance about a task or control.
- Use a Popover with plain text, or with interactive content such as links and buttons.
Avoid
- Using ContextualHelp for primary actions, full forms, or action lists. Use Button, Modal, or Menu.
- Using ContextualHelp for information required to complete the task. Put that in the visible label, description, or helper text.
Examples
Variant
The ContextualHelp component supports two icon variants: info (default) and help.
Size
Control the size of the icon button using the size prop.
Placement
Control where the popover appears relative to the trigger button using the placement prop. The default placement is "bottom left".