Close Button
Button that dismisses the tour before completion.
Close button renders a dismiss control that ends the tour before the user completes all steps. It fires ON_TOUR_CLOSE and triggers the close lifecycle. Pass false to disable.
Config
| Property | Type | Default | Description |
|---|---|---|---|
size | ComponentSize | MD | Button size |
shape | ComponentShape | CIRCLE | Button shape |
aria | Partial<ComponentAriaProps> | — | ARIA attributes |
customClasses | Partial<BordaCloseButtonComponentClasses> | — | Custom CSS classes |
customStyles | Partial<BordaCloseButtonComponentStyles> | — | Custom inline styles |
customHtml | Partial<BordaCloseButtonComponentHtml> | — | Custom HTML for the button |
await borda.mount({
steps: [...],
closeButton: {
size: ComponentSize.SM,
shape: ComponentShape.CIRCLE,
},
});
Disabling
await borda.mount({
steps: [...],
closeButton: false,
});
Customization
closeButton: {
customClasses: {
root: 'my-close-wrapper',
button: 'hover:bg-gray-100',
cross: 'text-gray-500',
},
customStyles: {
button: {
width: '28px',
height: '28px',
},
},
}
Interface
interface BordaCloseButtonProps {
size: ComponentSize;
shape: ComponentShape;
aria: Partial<ComponentAriaProps>;
customClasses: Partial<BordaCloseButtonComponentClasses>;
customStyles: Partial<BordaCloseButtonComponentStyles>;
customHtml: Partial<BordaCloseButtonComponentHtml>;
}