Microguide

The Microguide supports the onboarding of new users, as well as the introduction of new features to existing users. It can have one or multiple steps, each of which has three optional slots: Title, Visual and Content.

Import

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

Use cases

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.

CodeSandbox

Define multiple steps

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

CodeSandbox

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.

CodeSandbox

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.

CodeSandbox

Change the placement

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

Possible placement options:

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

CodeSandbox

Add an 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.

CodeSandbox

Props

MicroguideProps

extends,

Name	Type	Default	Description
open		-	Whether the Microguide is currently shown or not. Has to be controlled by the consumer.
placement?	| | |	'bottom-right'	Placement of the Microguide.
onClose	(currentStep: , finished: ) =>	-	Callback fired when closing the Microguide. Indicates the current step when closing and whether the Microguide was finished (closed in the last step).

Microguide.Step

MicroguideStepProps

extends

Microguide.Content

ContentProps

extends, ,

Microguide.Title

You can use the Microguide.Title component to render a title for the Microguide overlay.

TitleProps

extends, ,

Microguide.Visual

VisualProps

extends, ,