Contextual help

Contextual help shows a user extra information about an adjacent component.

Example

Slots

Use slots to populate the context help dialog by providing the following components as children to ContextualHelp.

Heading

The Heading is required, it acts as the title for the dialog, providing context for what the user should expect.

Content

Content is also required. It acts as the “body” of the dialog: this is where you’ll compose children.

You may optionally provide a Footer component which will be rendered below the content. Use the footer for providing links to additional information.

Props

Variant

Info

Use the info variant for brief, specific, contextual guidance. This is best for supplemental or nice-to-know information, in-line with a label or a component (if there is no label).

Help

This is the default. Use the help variant for content that offers more detailed, in-depth guidance about a task, UI element, tool, or keyboard shortcuts.

© 2025 @jossmac