SusTutorialModal

Tutorial modal — SusModal + SusDialogueBox with Next/Skip steps; optional soft handoff to SusSpotlightTour when attached, works standalone without a tour.

Package

SusKit · Molecules (commercial)

Open in Playground

SusKit · Molecules

Props

Name	Type	Default
Model	Prop<bool>	false	v-model
CurrentIndex	Prop<int>	-1
NextLabel	Prop<string>	"Next"
FinishLabel	Prop<string>	"Done"
SkipLabel	Prop<string>	"Skip"
Reveal	Prop<string>	"Instant"
Width	Prop<float>	480f
Persistent	Prop<bool>	true	v-model

Slots

No slots.

Events

Name	Field	Payload
Opened	OnOpened	—
Closed	OnClosed	—

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-modal__title
• sus-tutorial-modal
• sus-tutorial-modal__next
• sus-tutorial-modal__skip
• sus-tutorial-modal__title
• sus-tutorial-modal__title--empty

Usage

Builds a modal around SusDialogueBox with Next/Skip. Optional AttachSpotlight hands the current step’s highlight target to SusSpotlightTour when one is attached; without a tour the modal still runs.

var tutorial = new SusTutorialModal();
tutorial.NextLabel.Value = "Next";
tutorial.SkipLabel.Value = "Skip";
tutorial.Reveal.Value = "PerChar";
tutorial.AddStep("Guide", "Welcome aboard.", title: "Intro");
tutorial.AddStep("Guide", "Open the inventory with I.", title: "Inventory");
// tutorial.AttachSpotlight(myTour); // soft — omit if no tour
tutorial.Completed = () => { /* finished */ };
tutorial.Skipped = () => { /* aborted */ };
tutorial.Start();
// tutorial.Next(); tutorial.Skip(); tutorial.Close();

Prop / API	Role
Model / CurrentIndex	Open state and step index
NextLabel / SkipLabel	Button copy
Reveal / Width / Persistent	Dialogue reveal + modal chrome
AddStep / ClearSteps	Build the step list
AttachSpotlight(tour)	Soft handoff to spotlight tour
Start / Next / Skip / Close	Run controls
StepChanged / Completed / Skipped	Host events

Notes

• Storybook story Tutorial Modal (tutorial-modal).
• Hub shot kit-tutorial-modal.png — showcase, captured live from Play mode.