Close Button
Configure or disable the close button that hides the widget.
Close button renders a cross icon in the corner of the widget. Clicking it unmounts the widget completely — the component is removed from the DOM and all event listeners are cleaned up. You can override this behavior with a custom onClick handler, or pass false to remove the button entirely.
Config
| Property | Type | Description |
|---|---|---|
aria | Partial<ComponentAriaProps> | ARIA attributes |
onClick | (event: Event) => void | Custom click handler |
customClasses | Partial<ScenaCloseButtonComponentClasses> | Custom CSS classes |
customStyles | Partial<ScenaCloseButtonComponentStyles> | Custom inline styles |
Example
Click the close button and open the browser console to see the
[scena] close:click log.await scena.mount({
video: { src: '/video.mp4' },
closeButton: {
onClick: (event) => {
console.log('close:click');
},
},
});
Disabling
Pass false to remove the close button from the DOM:
await scena.mount({
video: { src: '/video.mp4' },
closeButton: false,
});
Customization
Both customClasses and customStyles accept root, button, and cross as target keys.
customClasses accepts a string, array, or object:
await scena.mount({
video: { src: '/video.mp4' },
closeButton: {
customClasses: {
root: 'my-close-wrapper',
button: 'bg-red-500',
cross: 'text-white',
},
},
});
customStyles accepts a CSS string or a CSSStyleDeclaration-compatible object:
await scena.mount({
video: { src: '/video.mp4' },
closeButton: {
customStyles: {
root: {
top: '8px',
right: '8px',
},
button: {
background: 'rgb(239, 68, 68)'
},
cross: {
color: 'white'
},
},
},
});
Interface
interface ScenaCloseButtonProps {
size: ComponentSize;
aria: Partial<ComponentAriaProps>;
onClick: (event: Event) => void;
customClasses: Partial<ScenaCloseButtonComponentClasses>;
customStyles: Partial<ScenaCloseButtonComponentStyles>;
}