FeatureHighlight

The FeatureHighlight supports the onboarding of new users, as well as the introduction of new features to existing users. It is positioned next to the specified reference element and has four optional slots: Title, Visual, Content and Actions.

Import

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

Use cases

There is no designated trigger for the FeatureHighlight. It 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. A small pointer connects the FeatureHighlight to the element it is referring to. To handle the component's state, provide a value for the open prop along with an onClose callback.

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 example text or a link to an external source. If the FeatureHighlight exceeds the screen height, the content becomes scrollable.

CodeSandbox

Add actions

The Actions slot should be used to add, for example, links to further information or buttons to perform additonal operations.

CodeSandbox

Change the placement

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

Possible placement options:

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

CodeSandbox

Add an aria-label

By default, the FeatureHighlight 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