Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2026 Sea Labs
Blogs
All blogsCoachMark
Designer doc
CoachMark component provides guided tours and contextual help by highlighting specific elements on the page.
Example
Basic Usage
A multi-step tour with navigation controls. Toggle showOverlay to display a backdrop behind the highlighted element. When overlay is active, you can enable clickThrough to allow users to interact with the highlighted element.
View code
Variant
The showOverlay prop also controls the popover variant automatically: info (dark semMod1st background) when overlay is off, and default (standard popover background) when overlay is on. You can override this by explicitly setting the variant prop.
View code
Spacing overlay
Use overlayProps.spacing to make the overlay open more to introduce something like new select option.
View code
With a drawer
By default, the coach mark will use the wrapped element as the reference for drawing the highlight box around it. You can further control this with CoachMarkReference. It uses absolute positioning, so you can place it in a relative container to make it appear where you want.
View code
Coach mark but from dialog
View code
Hotspot
Hotspot are used to draw attention to specific UI elements in a subtle, non-intrusive way. They are ideal when you want to encourage exploration without disrupting the user’s workflow.
They appear as pulsating dots and rely on user interaction to trigger. When activated, the hotspot opens a popover to provide additional context or guidance.
View code
API
CoachMarkActionButton
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| leftIcon | ReactNode | Element before the label. Equivalent to element on the label with some margin. | |
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | number | ||
| rightIcon | ReactNode | Element after the label. Equivalent to element on the label with some margin. | |
| size | ButtonSizes | ||
| variant | ButtonVariants | Prefers naming it as variant because type is a known button html property. |
CoachMarkHotspot
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| placement | Placements | top-end |
CoachMarkOverlay
| Prop name | Type | Default | Description |
|---|---|---|---|
| clickThrough | boolean | ||
| elevationLevel | number | ||
| overlayProps | SVGProps<SVGRectElement> | ||
| reference | HTMLElement | ||
| spacing | number | [number, number] | [number, number, number] | [number, number, number, number] | [1, 1] | all - top,bottom | left,right - top | left,right | bottom - top | right | bottom | left |
| spacingBottom | number | ||
| spacingLeft | number | ||
| spacingRight | number | ||
| spacingTop | number | ||
| svgProps | SVGProps<SVGSVGElement> |
CoachMarkPopover
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| basis | number | Width of the popover | |
| clickThrough | boolean | ||
| closeOnBlur | boolean | Dismiss popover when its blurred. Suggested to use tgt with PopoverTrigger.Click | |
| container | HTMLElement | ||
| content | ReactNode | ||
| elevationLevel | number | 3 | |
| focusChildOnOpen | boolean | Focus the child element when the popover is opened. Default is true. | |
| focusOnOpen | boolean | Auto focus the popover inner elements when set to true | |
| immediate | boolean | ||
| initialActive | boolean | ||
| maxHeight | number | Max height of the popover(in px), might be overwritten by the middleware when the window size is too small for it | |
| offset | [number, number] | showOverlay ? OFFSET_WITH_OVERLAY : OFFSET_WITHOUT_OVERLAY | |
| onActiveChange | (active: boolean) => void | ||
| onComponentBlur | () => void | Callback function that will be called when the whole Popover component is blurred. | |
| overlayProps | Partial<CoachMarkOverlayProps> | ||
| placement | Placements | ||
| popperOptions | PopperPopperOptions | Options for floating.ui instance | |
| popperUpdateKey | string | ||
| shouldKeyDownReturn | (e: KeyboardEvent<HTMLDivElement>) => boolean | By default when closeOnBlur=true, the focus will return to the trigger element when the key down event is not printable. When closeOnBlur=false, the focus will be kept while typing printable characters in popover.(dialog like behavior) Use this prop if you want to change this behavior, the boolean returned from this function will decide if the key down event should return the focus to trigger element. | |
| showOverlay | boolean | true | |
| springConfig | Partial<AnimationConfig> | ||
| trigger | PopoverTrigger | ||
| variant | CoachMarkPopoverVariants |
CoachMarkPopoverActions
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
CoachMarkPopoverClose
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | ||
| size | IconButtonSizes | ||
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants |
CoachMarkPopoverContent
| Prop name | Type | Default | Description |
|---|---|---|---|
| actionElement | ReactNode | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| childrenContainerProps | HTMLAttributes<HTMLDivElement> |
CoachMarkPopoverTitle
| Prop name | Type | Default | Description |
|---|---|---|---|
| actionElement | ReactNode | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
CoachMarkProgress
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
CoachMarkReference
CoachMark
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| placement | Placements | top-end |