The Coach Mark component is used to create in-app tutorials or guided user experiences. It highlights key areas of the interface with directional indicators and accompanying text descriptions.

1. Reference

This component inherits props from the Check Mark.

Prop

Type

Default

direction

bottom

top

left

right

bottom

2. Direction

You can edit the direction with the bottom, top, left or right parameter.

Image 2.1 : Direction bottom

Image 2.2 : Direction mark top

Image 2.3 : Direction left

Image 2.4 : Direction mark right

Jetpack Compose

The CoachMark component is a customizable SwiftUI view used to create in-app tutorials or guided user experiences. It highlights key areas of the interface with directional indicators and accompanying text descriptions.

1. Reference

This component inherits props from the Coach Mark.

Prop

Type

Default

direction

CoachMarkDirection.top

CoachMarkDirection.left

CoachMarkDirection.right

CoachMarkDirection.bottom

items

.title

.description

2. Direction

You can edit the direction with the CoachMarkDirection.top, CoachMarkDirection.left, CoachMarkDirection.right or CoachMarkDirection.bottom parameter.

Headline
Pack my box with five dozen liquor jugs. How vexingly quick draft.
Back
Next step


CoachMark(
direction = CoachMarkDirection.bottom,
items = listOf(CoachMarkStep(
title = "Headline 1",
description = "Pack my box with five dozen liquor jugs. How vexingly quick draft.",
),
CoachMarkStep(
title = "Headline 2",
description = "Pack my box with five dozen liquor jugs. How vexingly quick draft.",
))
)

Preview

Code

Try this feature

Tap next to continue the coach flow.

Back

DlCoachMark(
    direction: DlCoachMarkDirection.bottom,
      steps: const [
        DlCoachMarkStep(
          title: 'Try this feature',
          description: 'Use this coach mark to guide users through actions.',
        ),
        DlCoachMarkStep(
          title: 'Go to next step',
          description: 'Tap next to continue the coach flow.',
        ),
        DlCoachMarkStep(
          title: 'Done',
          description: 'You can close onboarding after this step.',
        ),
      ],
    leftButtonLabel: 'Back',
    rightButtonLabel: 'Next',
    onPaginationChanged: (index) {
      // track step index
      },
    ),
  ],
)

Copy

Usage

Add this code example to your project to see how the component works.

DlCoachMark(
    direction: DlCoachMarkDirection.bottom,
      steps: const [
        DlCoachMarkStep(
          title: 'Try this feature',
          description: 'Use this coach mark to guide users through actions.',
        ),
        DlCoachMarkStep(
          title: 'Go to next step',
          description: 'Tap next to continue the coach flow.',
        ),
        DlCoachMarkStep(
          title: 'Done',
          description: 'You can close onboarding after this step.',
        ),
      ],
    leftButtonLabel: 'Back',
    rightButtonLabel: 'Next',
    onPaginationChanged: (index) {
      // track step index
      },
    ),
  ],
)

Copy

API Reference

DlCoachMark is a guided overlay component with step-based title/description content, direction-aware tooltip arrow, built-in pagination and Back/Next controls that update steps.

Prop

Type

Default

steps

List<DlCoachMarkStep>

required

initialStepIndex

int

direction

bottom

top

left

right

bottom

leftButtonLabel

String

'Back'

rightButtonLabel

String

'Next'

onPaginationChanged

ValueChanged<int>?

null

onLeftButtonPressed

VoidCallback?

null

onRightButtonPressed

VoidCallback?

null

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Get free preview

Save time and money?

Get Dynamic Layer