Progress
Visual progress indicator with dots, text, or line variants.
Tour progress shows the user's position in the tour. Three visual variants are available — dots, text, and line. Pass false to disable.
Config
| Property | Type | Default | Description |
|---|---|---|---|
variant | BordaTourProgressVariant | DOTS | Visual style — dots, text, or line |
aria | Partial<ComponentAriaProps> | — | ARIA attributes |
customClasses | Partial<BordaTourProgressComponentClasses> | — | Custom CSS classes |
customStyles | Partial<BordaTourProgressComponentStyles> | — | Custom inline styles |
import { BordaTourProgressVariant } from '@retoo/borda';
await borda.mount({
steps: [...],
tourProgress: {
variant: BordaTourProgressVariant.TEXT,
},
});
Variants
| Variant | Description |
|---|---|
DOTS | One dot per step, filled for completed steps |
TEXT | "Step 2 of 5" label |
LINE | Linear progress bar |
Disabling
await borda.mount({
steps: [...],
tourProgress: false,
});
Customization
tourProgress: {
variant: BordaTourProgressVariant.DOTS,
customClasses: {
root: 'my-progress',
item: 'w-2 h-2 rounded-full',
},
}
Interface
interface BordaTourProgressProps {
variant: BordaTourProgressVariant;
aria: Partial<ComponentAriaProps>;
customClasses: Partial<BordaTourProgressComponentClasses>;
customStyles: Partial<BordaTourProgressComponentStyles>;
}