Configure buttons
You can display the popup without any buttons for a clean, minimal interface, use predefined buttons for standard actions, or customize it by adding your own buttons with tailored text, style, and functionality to meet your specific needs.
By default, the popup is displayed without any buttons for a clean, minimal look. If you want some standard actions you can use the following predefined buttons:
okfor confirmationcancelto dismiss the popupclosefor closing the popup without actionsetfor saving or applying changes
You can add custom buttons with tailored text, style, and functionality if you have more specific needs.
Demo
<Popup
buttons={[]}
><Popup
buttons={['ok', 'cancel']}
><Popup
buttons={[{
text: 'Custom',
handler: function () {
mobiscroll.toast({
message: 'Custom button clicked'
});
}
}]}
>Hi there!
This is the default with no buttons.
Hi again!
This is a popup with predefined buttons.
Hi again!
This is a popup with a custom button.
JSXTSXCSS
import { Button, Page, Popup, setOptions, Toast } from '@mobiscroll/react';
import { useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isNoBtnOpen, setNoBtnOpen] = useState(false);
const [isPredefinedBtnOpen, setPredefinedBtnOpen] = useState(false);
const [isCustomBtnOpen, setCustomBtnOpen] = useState(false);
const [isToastOpen, setToastOpen] = useState(false);
const [toastMessage, setToastMessage] = useState('');
return (
<Page>
<div className="mbsc-align-center">
<div className="mbsc-note">Customize popup buttons depending on your context.</div>
</div>
<div className="mbsc-form-group">
<div className="mbsc-button-group-block">
<Button onClick={() => setNoBtnOpen(true)}>No buttons</Button>
<Button onClick={() => setPredefinedBtnOpen(true)}>Predefined buttons</Button>
<Button onClick={() => setCustomBtnOpen(true)}>Custom button</Button>
</div>
</div>
<Popup display="center" isOpen={isNoBtnOpen} onClose={() => setNoBtnOpen(false)}>
<div className="mbsc-align-center mbsc-padding">
<h3 className="md-text-center">Hi there!</h3>
<p className="md-text-center">This is the default with no buttons.</p>
</div>
</Popup>
<Popup display="center" isOpen={isPredefinedBtnOpen} buttons={['ok', 'cancel']} onClose={() => setPredefinedBtnOpen(false)}>
<div className="mbsc-align-center mbsc-padding">
<h3 className="md-text-center">Hi there!</h3>
<p className="md-text-center">This is a popup with predifined buttons.</p>
</div>
</Popup>
<Popup
display="center"
isOpen={isCustomBtnOpen}
buttons={[
{
text: 'Custom',
handler: function () {
setToastMessage('Custom button clicked');
setToastOpen(true);
},
},
]}
onClose={() => setCustomBtnOpen(false)}
>
<div className="mbsc-align-center mbsc-padding">
<h3 className="md-text-center">Hi again!</h3>
<p className="md-text-center">This is a popup with a custom button.</p>
</div>
</Popup>
<Toast isOpen={isToastOpen} message={toastMessage} onClose={() => setToastOpen(false)} />
</Page>
);
}
export default App;
import { Button, Page, Popup, setOptions, Toast } from '@mobiscroll/react';
import { useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isNoBtnOpen, setNoBtnOpen] = useState<boolean>(false);
const [isPredefinedBtnOpen, setPredefinedBtnOpen] = useState<boolean>(false);
const [isCustomBtnOpen, setCustomBtnOpen] = useState<boolean>(false);
const [isToastOpen, setToastOpen] = useState<boolean>(false);
const [toastMessage, setToastMessage] = useState<string>('');
return (
<Page>
<div className="mbsc-align-center">
<div className="mbsc-note">Customize popup buttons depending on your context.</div>
</div>
<div className="mbsc-form-group">
<div className="mbsc-button-group-block">
<Button onClick={() => setNoBtnOpen(true)}>No buttons</Button>
<Button onClick={() => setPredefinedBtnOpen(true)}>Predefined buttons</Button>
<Button onClick={() => setCustomBtnOpen(true)}>Custom button</Button>
</div>
</div>
<Popup display="center" isOpen={isNoBtnOpen} onClose={() => setNoBtnOpen(false)}>
<div className="mbsc-align-center mbsc-padding">
<h3 className="md-text-center">Hi there!</h3>
<p className="md-text-center">This is the default with no buttons.</p>
</div>
</Popup>
<Popup display="center" isOpen={isPredefinedBtnOpen} buttons={['ok', 'cancel']} onClose={() => setPredefinedBtnOpen(false)}>
<div className="mbsc-align-center mbsc-padding">
<h3 className="md-text-center">Hi there!</h3>
<p className="md-text-center">This is a popup with predifined buttons.</p>
</div>
</Popup>
<Popup
display="center"
isOpen={isCustomBtnOpen}
buttons={[
{
text: 'Custom',
handler: function () {
setToastMessage('Custom button clicked');
setToastOpen(true);
},
},
]}
onClose={() => setCustomBtnOpen(false)}
>
<div className="mbsc-align-center mbsc-padding">
<h3 className="md-text-center">Hi again!</h3>
<p className="md-text-center">This is a popup with a custom button.</p>
</div>
</Popup>
<Toast isOpen={isToastOpen} message={toastMessage} onClose={() => setToastOpen(false)} />
</Page>
);
}
export default App;
/* style */