# Interface: LabelProps<T, StepIdType> (/jsdoc/pixi-vn/index/interfaces/LabelProps)



Defined in: [src/narration/interfaces/LabelProps.ts:3](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/narration/interfaces/LabelProps.ts#L3)

Type Parameters [#type-parameters]

T [#t]

`T`

StepIdType [#stepidtype]

`StepIdType` = `number`

Properties [#properties]

onLoadingLabel? [#onloadinglabel]

\> `optional` &#x2A;*onLoadingLabel?**: (`stepId`, `label`) => `void` | `Promise`\<`void`>

Defined in: [src/narration/interfaces/LabelProps.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/narration/interfaces/LabelProps.ts#L44)

Is a function that will be executed in [onStepStart](#onstepstart) if the id of the step is 0
and when the user laods a save file.
When you load a save file, will be executed all onLoadingLabel functions of the [narration.openedLabels](/jsdoc/pixi-vn/index/interfaces/NarrationManagerInterface#openedlabels).
It is useful for example to make sure all images used have been cached

Parameters [#parameters]

stepId [#stepid]

`StepIdType`

Step id

label [#label]

`T`

Label

Returns [#returns]

`void` | `Promise`\<`void`>

Example [#example]

```ts
newLabel("id", [], {
    onLoadingLabel: async (stepId, label) => {
        await Assets.load('path/to/image1.png')
        await Assets.load('path/to/image2.png')
    }
})
```

***

onStepEnd? [#onstepend]

\> `optional` &#x2A;*onStepEnd?**: (`stepId`, `label`) => `void` | `Promise`\<`void`>

Defined in: [src/narration/interfaces/LabelProps.ts:65](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/narration/interfaces/LabelProps.ts#L65)

A function executed after each `step`. See more \<DynamicLink href="/start/labels-advanced#onstepend">here</DynamicLink>.

Parameters [#parameters-1]

stepId [#stepid-1]

`StepIdType`

Step id

label [#label-1]

`T`

Label

Returns [#returns-1]

`void` | `Promise`\<`void`>

Example [#example-1]

```ts
const startLabel = newLabel("start", [
    async () => {
        await showImage("image1", "path/to/image1.png")
        await showImage("image2", "path/to/image2.png")
    }
], {
    onLoadingLabel: async (stepIndex, label) => {
        await Assets.load("path/to/image1.png")
        await Assets.load("path/to/image2.png")
    }
})
```

***

onStepStart? [#onstepstart]

\> `optional` &#x2A;*onStepStart?**: (`stepId`, `label`) => `void` | `Promise`\<`void`>

Defined in: [src/narration/interfaces/LabelProps.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/998c1a75c5978f24c0dc137af5f42b90b2803967/src/narration/interfaces/LabelProps.ts#L25)

A function executed before each `step`.

Parameters [#parameters-2]

stepId [#stepid-2]

`StepIdType`

Step id

label [#label-2]

`T`

Label

Returns [#returns-2]

`void` | `Promise`\<`void`>

Example [#example-2]

```ts
const startLabel = newLabel("start", [
    () => {
        narration.dialogue = "Step 1"
    },
    () => {
        narration.dialogue = "Step 2"
    }
], {
    onStepStart: (stepIndex, label) => {
        console.log(`Step ${stepIndex} started`)
    }
})
```