Buttons
Navigation buttons for prev, next, finish, and skip actions.
Tour buttons provide navigation controls — previous, next, finish (on the last step), and skip. Each button is independently configurable and can be hidden by passing false. Pass false to the entire component to disable all buttons.
Config
| Property | Type | Default | Description |
|---|---|---|---|
size | ComponentSize | MD | Default size applied to every button; overridable per button |
prev | BordaTourButtonConfig | false | — | Previous button config. Pass false to hide. |
next | BordaTourButtonConfig | false | — | Next button config (non-last steps). Pass false to hide. |
finish | BordaTourButtonConfig | false | — | Finish button config (last step). Pass false to hide. |
skip | BordaTourButtonConfig | false | — | Skip button config. Pass false to hide. |
aria | Partial<ComponentAriaProps> | — | ARIA attributes |
customClasses | Partial<BordaTourButtonsComponentClasses> | — | Custom CSS classes |
customStyles | Partial<BordaTourButtonsComponentStyles> | — | Custom inline styles |
customHtml | Partial<BordaTourButtonsComponentHtml> | — | Custom inner HTML for each button |
Each button config extends BordaButtonProps (except id) plus a label field:
await borda.mount({
steps: [...],
tourButtons: {
prev: { label: 'Back' },
next: { label: 'Continue' },
finish: { label: 'Done!' },
skip: { label: 'Skip tour' },
},
});
Hiding individual buttons
tourButtons: {
skip: false, // hide skip button
prev: false, // hide prev button
}
Disabling
await borda.mount({
steps: [...],
tourButtons: false,
});
Customization
tourButtons: {
customClasses: {
root: 'my-buttons-bar',
next: 'bg-blue-600 text-white',
prev: 'text-gray-500',
},
customStyles: {
root: {
gap: '12px',
},
},
}
Interface
interface BordaTourButtonsProps {
size: ComponentSize;
prev: BordaTourButtonConfig | false;
next: BordaTourButtonConfig | false;
finish: BordaTourButtonConfig | false;
skip: BordaTourButtonConfig | false;
aria: Partial<ComponentAriaProps>;
customClasses: Partial<BordaTourButtonsComponentClasses>;
customStyles: Partial<BordaTourButtonsComponentStyles>;
customHtml: Partial<BordaTourButtonsComponentHtml>;
}