Skip to main content


Hints block


A hints block is used to represent a hints component in your flow.

Hints are great for calling attetnion to UI element to help users discover new features, provide contextual help, or nudge them towards a good next step.

A hints block is comprised of hints items, each of which represents an individual hint in your product.

Hints items can be completed or dismissed.

Completing a hint item could be attributed to clicking a "Got it" button in a popover that is teaching you about a product's object model.



Hints can be configured with custom fields.

Hints item

Hints items can be configured with the following default fields:

TitlestringContent for the hints item title heading
Bodyrich textContent for the hints item body section
Complete labelstringContent for a complete button in the hints item
Dismiss all labelstringContent for a dismiss all button in the hints item

You can also define a set of custom fields on a hints item.


The hints block has a fixed set of transitions that determine which path(s) to follow. These transitions map to hint actions that a user can take.

completeMarks the hints as completed
dismissMarks the hints as dismissed


Get up and running quickly with the pre-built React hints component. Compose and style this component to best fit your needs. Or use the hints block headlessly and attach the hint’s fields and state to your own hint/hotspot UI component.