import { Coachmark } from '@uhg-abyss/mobile';<Coachmark offset={25} heading="Heading" position="below" type="light-border" isVisible dismissible> Coachmark text</Coachmark>Usage
Coachmarks always take the full width of the screen, should be placed with an 8px horizontal margin, and appear above or below the content it is pointing to. Content along the flat side should have a 16px margin from coachmark.
Coachmark Tour
For creating guided tours with multiple sequential coachmarks, use the CoachmarkTour component. CoachmarkTour extends Coachmark functionality while providing:
- Automatic step management: Handles navigation between multiple coachmarks
- Built-in controls: Provides Previous/Next buttons and step counting
- Coachmark positioning: Calculates the best position and offset for each coachmark based on available screen space
- Tour state management: Manages the overall tour lifecycle (start, skip, complete)
Use Coachmark for standalone contextual help and CoachmarkTour for multi-step guided experiences.
Position
Use the position prop to display the notch either above or below the coachmark. The default is "above".
Type Variants
Use the type prop to change the visual appearance of the coachmark. Available options are "dark", "light", and "light-border". The default is "light-border".
Offset
Use the offset prop to change the horizontal position of the notch. It is determined as a percent from the left edge of the coachmark. The default is 50.
Heading and Content
The Coachmark supports both a heading and body content. Use the heading prop for the title and pass the body content as children.
Footer Content
Use the footer prop to add custom footer content.
Note: For guided tours with multiple coachmarks, consider using the CoachmarkTour component which provides built-in navigation controls and step management.
Dismissible
Use the dismissible prop to control whether the close button is shown. Set to false to hide the close button for non-dismissible coachmarks.
onClose
Use the onClose prop to handle the action when the close button is pressed. Built into Coachmark is a fade out animation.
Coachmark Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | string | React.ReactNode | - | The text content or paragraph of the coachmark |
| dismissible | boolean | Flag to show or hide the close button | |
| footer | React.ReactNode | - | Footer content such as navigation buttons |
| heading | string | - | The title or heading content of the coachmark |
| isVisible | boolean | Flag to show or hide the coachmark | |
| offset | number | string | 50 | The horizontal position of the notch. Determined as a percent from the left edge of the coachmark component |
| onClose | function | - | Callback fired when the close button is pressed |
| position | "above" | "below" | below | Places the notch above or below the coachmark |
| type | "dark" | "light" | "light-border" | light | The visual variant of the coachmark |
Coachmark Classes
| Class Name | Description |
|---|---|
| abyss-coachmark-close-button | Coachmark close button |
| abyss-coachmark-close-icon | Coachmark close icon |
| abyss-coachmark-content-wrapper | Wrapper for coachmark content |
| abyss-coachmark-heading | Coachmark heading element |
| abyss-coachmark-notch | The pointer to content |
| abyss-coachmark-paragraph | Coachmark paragraph content element |
| abyss-coachmark-root | Coachmark root element |
| abyss-coachmark-text-wrapper | Wrapper for text content |
Coachmark Translations
| Translation Key | Value |
|---|---|
| close | Close |
Coachmark Tokens
| Token Name | Value | |
|---|---|---|
| coachmark.color.surface.container.light | #FFFFFF | |
| coachmark.color.surface.container.dark | #323334 | |
| coachmark.color.text.heading.light | #323334 | |
| coachmark.color.text.heading.dark | #FFFFFF | |
| coachmark.color.text.paragraph.light | #4B4D4F | |
| coachmark.color.text.paragraph.dark | #FFFFFF | |
| coachmark.color.icon.close.dark.active | #A5DFE7 | |
| coachmark.color.icon.close.dark.rest | #FFFFFF | |
| coachmark.color.icon.close.light.rest | #4B4D4F | |
| coachmark.color.icon.close.light.active | #323334 | |
| coachmark.color.border.light.container | #CBCCCD | |
| coachmark.border-radius.all.container | 8 | |
| coachmark.border-width.all.container.light | 1 | |
| coachmark.sizing.all.icon.close | 24 | |
| coachmark.spacing.padding.all.container | 16 | |
| coachmark.spacing.gap.horizontal.container | 16 | |
| coachmark.spacing.gap.vertical.text | 2 | |
| coachmark.spacing.margin.horizontal.container | 8 | |
| coachmark.spacing.margin.vertical.container.inset | 4 | |
| coachmark.spacing.margin.vertical.container.offset | 16 | |
| coachmark.box-shadow.container |
|
Coachmark Classes
| V2 | V1 | Status |
|---|---|---|
| coachmark-close-button | coachmark-close-button | Unchanged |
| coachmark-close-icon | coachmark-close-icon | Unchanged |
| coachmark-heading | coachmark-text | Renamed |
| coachmark-notch | coachmark-notch | Unchanged |
| coachmark-paragraph | coachmark-description | Renamed |
| coachmark-root | coachmark-root | Unchanged |
| coachmark-text-wrapper | - | Added |
Coachmark Props
| V2 | V1 | Status |
|---|---|---|
| children | description | Renamed |
| dismissible | - | Added |
| footer | - | Added |
| heading | children | Renamed |
| isVisible | isVisible | Unchanged |
| offset | offset | Unchanged |
| onClose | onClose | Unchanged |
| position | orientation | Renamed |
| - | showBorder | Removed |
| type | colorScheme | Renamed |