Onboarding

<MokaButton id="onboard-btn-1" OnClick="() => tourActive = true">Start Tour</MokaButton>
<MokaButton id="onboard-btn-2" Variant="MokaVariant.Outlined">Settings</MokaButton>
<MokaButton id="onboard-btn-3" Variant="MokaVariant.Soft" Color="MokaColor.Success">Save</MokaButton>

<MokaOnboarding Active="tourActive"
                Steps="tourSteps"
                OnComplete="() => tourActive = false"
                OnSkip="() => tourActive = false" />

@code {
    bool tourActive;

    static readonly MokaOnboardingStep[] tourSteps =
    [
        new() { Title = "Welcome", Description = "Click here to start the tour anytime.", TargetSelector = "#onboard-btn-1" },
        new() { Title = "Settings", Description = "Configure your preferences here.", TargetSelector = "#onboard-btn-2" },
        new() { Title = "Save", Description = "Don't forget to save your changes!", TargetSelector = "#onboard-btn-3" }
    ];
}

<MokaButton id="onboard-no-skip" OnClick="() => noSkipActive = true" Color="MokaColor.Secondary">Start Guided Tour</MokaButton>

<MokaOnboarding Active="noSkipActive"
                ShowSkipButton="false"
                Steps="noSkipSteps"
                OnComplete="() => noSkipActive = false" />

@code {
    bool noSkipActive;

    static readonly MokaOnboardingStep[] noSkipSteps =
    [
        new() { Title = "Step 1", Description = "This is the first and only highlighted element.", TargetSelector = "#onboard-no-skip" }
    ];
}