Microguide

Use the Microguide to guide users through features or functionality in small steps, supporting onboarding of new users and the introduction of new features.

OverviewPropertiesUsageChangelog

Import

import { Microguide } from '@dynatrace/strato-components/content';

Demo

There is no designated trigger for the Microguide. The guide can be triggered using a button, but as the state is entirely controlled by you, it is also possible to open it e.g. on page load. To handle the component's state, provide a value for the open prop along with an onClose callback. The onClose callback also includes the current step and whether the Microguide was finished.

To define a single step, wrap the desired content with the Step slot. Each step can have a Title, a Visual and a Content slot, all of which are optional.

Define multiple steps

Use multiple Step slots in the desired order to create multiple pages for the Microguide.

To react to the user navigating between steps, use the onStepChange callback, which includes the step that the user is navigating to.

Add a visual

Use the Visual slot to add an image or a video. The recommended asset size is 400 x 250px (8:5 aspect ratio). If the provided visual has a different aspect ratio, it is scaled proportionally to fit the container.

Add content

The Content slot can be used to provide detailed information for a step, such as text or links to more information. If the microguide exceeds the screen height, the content becomes scrollable.

Change placement

Use the placement property to define the component's position.

Possible placement options:

• bottom-right (default)
• bottom-left
• top-right
• top-left

Add aria-label

By default, the Microguide is already correctly labeled with aria-labelledby pointing to the title and aria-describedby pointing to the provided content. Only if both title and content are not defined, an appropriate aria-label should be set.