CatalystFeedback and status
CoachMarkv1.0.7Documentation Under Review
An interactive guided tour component for product onboarding with full custom styling support. Built on react-joyride with customizable tooltips, 13 placement options, and CVA theming capabilities.
Prefer AI-assisted development?
This documentation is available via the Catalyst MCP Server. Learn how to connect →
Catalyst CoachMark extends react-joyride with built-in Catalyst design tokens, custom tooltip rendering, and 13 placement options — giving you a production-ready guided tour with zero configuration.
Preview
BOTTOM
BOTTOM-START
BOTTOM-END
LEFT-START
LEFT
LEFT-END
RIGHT-START
RIGHT
RIGHT-END
TOP-START
TOP
TOP-END
CENTER
Installation
npm install @pmi/catalyst-coachmarkimport { CoachMark } from '@pmi/catalyst-coachmark';API Reference
CoachMark
Prop
Type
Step
Prop
Type
TooltipRenderProps
Prop
Type
Accessibility
CoachMark is designed to support WCAG 2.2 AA compliance. Because the tooltip UI is fully consumer-provided via tooltipComponent, several criteria are shared responsibilities:
- Focus Not Obscured (2.4.11) — Ensure the active tooltip is not hidden behind the spotlight overlay. Use
disableOverlayor adjustspotlightPaddingif needed. - Target Size (2.5.8) — Interactive elements inside your custom tooltip must be at least 24×24px. Use
size="sm"or larger for Catalyst Buttons. - Color Contrast — Custom tooltip colors must meet a 4.5:1 contrast ratio in both light and dark modes.
- Always spread
tooltipPropsonto the tooltip container — it carries the requiredaria-labelandroleattributes injected by react-joyride.
Keyboard Interactions
| Key | Description |
|---|---|
Tab | Move focus between interactive elements in the tooltip |
Enter / Space | Activate the focused button (Next, Back, Skip) |
Escape | Close the tour |
Choosing the Right Component
| Component | When to use |
|---|---|
| CoachMark | Multi-step guided tours and feature onboarding flows |
| Tooltip | Single-element contextual hints on hover/focus |
| Popover | Interactive overlays triggered by a user action |
| Dialog | Full modal interruptions requiring user acknowledgement |