NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

MessageBox

import MessageBox from '@concur/nui-widgets/lib/MessageBox/MessageBox';

Message boxes notify users of an event. Message boxes can have different types (states) to reflect the type of event that occurred. Message boxes appear as an overlay on the screen and require a response from the user before work can be resumed.

Examples

Types

There are five supported types of message boxes: 'confirm', 'success', 'info' (default), 'warning' and 'error'. Use the type property to set the type.

const HIGMessageBoxEx01 = () => {

    let [showConfirm, setShowConfirm] = useState(false);
    let [showSuccess, setShowSuccess] = useState(false);
    let [showInfo, setShowInfo] = useState(false);
    let [showWarning, setShowWarning] = useState(false);
    let [showError, setShowError] = useState(false);

    return (
        <>
            <ButtonToolbar muted>
                <Button onClick={() => setShowConfirm(true)}>Confirm</Button>
                <Button onClick={() => setShowSuccess(true)} type='success'>Success</Button>
                <Button onClick={() => setShowInfo(true)} type='info'>Info</Button>
                <Button onClick={() => setShowWarning(true)} type='warning'>Warning</Button>
                <Button onClick={() => setShowError(true)} type='danger'>Error</Button>
            </ButtonToolbar>

            <MessageBox
                buttonNegative={{text: 'No'}}
                buttonPrimary={{text: 'Yes'}}
                closeButtonLabel='Close'
                onHide={() => setShowConfirm(false)}
                show={showConfirm}
                title='Confirm'
                type='confirm'>
                Are you sure?
            </MessageBox>
            <MessageBox
                buttonPrimary={{text: 'OK'}}
                closeButtonLabel='Close'
                onHide={() => setShowSuccess(false)}
                show={showSuccess}
                title='Success'
                type='success'>
                Whatever you were doing was successful!
            </MessageBox>
            <MessageBox
                buttonPrimary={{text: 'OK'}}
                closeButtonLabel='Close'
                onHide={() => setShowInfo(false)}
                show={showInfo}
                title='Info'
                type='info'>
                This is just for your information.
            </MessageBox>
            <MessageBox
                buttonPrimary={{text: 'OK'}}
                closeButtonLabel='Close'
                onHide={() => setShowWarning(false)}
                show={showWarning}
                title='Warning'
                type='warning'>
                This is a warning!
            </MessageBox>
            <MessageBox
                buttonPrimary={{text: 'OK'}}
                closeButtonLabel='Close'
                onHide={() => setShowError(false)}
                show={showError}
                title='Error'
                type='error'>
                Houston, we have a problem.
            </MessageBox>
        </>
    );
};

export default HIGMessageBoxEx01;

Custom

Most uses of message boxes require either a single button for acknowledgement (e.g. “OK”) or two buttons when presenting a choice for the user (e.g. “Yes/No” or “OK/Cancel”). However, sometimes a third button is required when presenting choices (e.g. “Option 1/Option 2/Cancel”). Use the buttonSecondary property to add a third button in the message box footer. When using three buttons, the message box will use a medium size Modal rather than the default small size.

const HIGMessageBoxEx02 = () => {
    let [showConfirm, setShowConfirm] = useState(false);
    return (
        <>
            <Button onClick={() => setShowConfirm(true)}>Three Buttons</Button>

            <MessageBox
                buttonNegative={{text: 'No'}}
                buttonPrimary={{text: 'Yes'}}
                buttonSecondary={{text: 'Maybe'}}
                closeButtonLabel='Close'
                onHide={() => setShowConfirm(false)}
                show={showConfirm}
                title='Confirm'
                type='confirm'>
                Are you sure?
            </MessageBox>
        </>
    );
};

Usage

Properties

Property Type Default Description
buttonPrimary Object Required An object identifying the “primary” response button. The object will include properties for text and an onClick callback; e.g., { text: 'Cancel', onClick: () => {} }. NOTE: text must be localized.
closeButtonLabel String Required Text used in the aria-label attribute on the close (“X”) button.
buttonNegative Object   An object identifying the “negative” response button. The object will include properties for text and an onClick callback; e.g., { text: 'Cancel', onClick: () => {} }. NOTE: text must be localized.
buttonSecondary Object   An object identifying the “secondary” response button. The object will include properties for text and an onClick callback; e.g., { text: 'Cancel', onClick: () => {} }. NOTE: text must be localized.
buttonSize String 'lg' Size of the buttons in the message box footer. Options are 'lg', 'md', 'sm'.
children Node   Collection of React components to be placed in the body of the message box. This is typically the message to be displayed.
className String   Custom classes to add to the modal.
title String   Text shown in the header of the message box.
type String 'info' Message box type. Options are 'confirm', 'success', 'info', 'warning', 'error'.

Callbacks

Property Parameters Description
onHide Required Callback function when message box is dismissed.
buttonNegative.onClick event Callback function when the “negative” button is clicked.
buttonPrimary.onClick event Callback function when the “primary” button is clicked.
buttonSecondary.onClick event Callback function when the “secondary” button is clicked.