Overrides
Layered config overrides for responsive breakpoints and per-step customization.
Borda uses a layered override system that merges config from multiple sources in a fixed priority order. This powers both responsive breakpoints and per-step component overrides.
Override layers
| Layer | Priority | Source |
|---|---|---|
base | Lowest | The config passed to mount() |
responsive | Medium | Breakpoint overrides from the responsive config key |
step | Highest | Per-step overrides from individual step definitions |
Each layer can override any config property. Higher-priority layers always win — a per-step tourButtons: false overrides both the base config and any responsive override.
Per-step overrides
Each step can override global component settings. These overrides are active only while that step is displayed:
await borda.mount({
steps: [
{
target: '#intro',
title: 'Welcome',
description: 'Getting started.',
placement: 'bottom-center',
tourButtons: { skip: false },
tourProgress: false,
},
{
target: '#details',
title: 'Details',
description: 'More info here.',
placement: 'middle-end',
closeButton: false,
tourOverlay: {
padding: 16,
},
},
],
});
When the user navigates from step 1 to step 2, the step 1 overrides are cleared and step 2's overrides are applied.
Runtime API
// Read the fully resolved config (all layers merged)
const resolved = instance.config.current;
// Update the base layer
instance.config.mergeConfig({ size: ComponentSize.LG });