Overrides
Per-step config overrides that shadow the global settings.
Each step can override global component settings. These overrides are active only while that step is displayed — when the user navigates away, the global config is restored.
Code
main.ts
import { useBorda, ComponentPlacement, BordaTourProgressVariant } from '@retoo/borda';
import '@retoo/borda/styles';
const borda = useBorda();
await borda.mount({
tourProgress: { variant: BordaTourProgressVariant.LINE },
steps: [
{
target: '#step-1',
title: 'Default step',
description: 'No overrides — all components use the global config.',
placement: ComponentPlacement.BOTTOM_START,
},
{
target: '#step-2',
title: 'Custom buttons',
description: 'This step overrides button labels and hides the skip checkbox.',
placement: ComponentPlacement.TOP_START,
tourButtons: {
next: {
label: 'Got it →',
customStyles: { root: { background: '#10b981', color: '#fff', borderRadius: '6px', border: 'none' } },
},
prev: {
label: '← Back',
customStyles: { root: { background: '#f3f4f6', color: '#374151', borderRadius: '6px', border: '1px solid #d1d5db' } },
},
},
tourSkip: false,
},
{
target: '#step-3',
title: 'Locked step',
description: 'Progress and close button hidden — must click the finish button.',
placement: ComponentPlacement.TOP_START,
tourProgress: false,
closeButton: false,
tourButtons: {
finish: {
label: 'All done!',
customStyles: { root: { background: '#8b5cf6', color: '#fff', borderRadius: '6px', border: 'none', padding: '6px 20px' } },
},
},
},
],
});