diff --git a/src/MultiStep.tsx b/src/MultiStep.tsx
index d52997e..9fe4ee7 100644
--- a/src/MultiStep.tsx
+++ b/src/MultiStep.tsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'
import { css, styled, setup } from 'goober'
-import { MultiStepPropsBase, Step} from './interfaces'
+import { MultiStepPropsBase, NavButton, Step} from './interfaces'
setup(React.createElement)
@@ -205,16 +205,18 @@ export default function MultiStep (props: MultiStepPropsBase) {
}
)
- const renderButtonsNav = (show) =>
+ const renderButtonsNav = (show: boolean, prevButton?: NavButton, nextButton?: NavButton) =>
show && (
)
@@ -223,7 +225,7 @@ export default function MultiStep (props: MultiStepPropsBase) {
{renderTopNav()}
{steps[activeStep].component}
-
{renderButtonsNav(showNavButtons)}
+
{renderButtonsNav(showNavButtons, props.prevButton, props.nextButton)}
)
}
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 2d79397..de38baf 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -5,6 +5,11 @@ export interface Step {
component: React.ReactElement
}
+export interface NavButton{
+ title?: string
+ style?: React.CSSProperties
+}
+
export interface MultiStepPropsBase {
stepCustomStyle?: object
showNavigation?: boolean
@@ -13,4 +18,6 @@ export interface MultiStepPropsBase {
activeStep?: number
children?: React.ReactElement[]
steps?: Step[]
+ prevButton?: NavButton
+ nextButton?: NavButton
}