MessageBox

import { MessageBox } from '@concur/nui-widgets';

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.

class HIGMessageBoxEx01 extends React.Component {
    constructor(props) {
        super(props);
        this._show = this._show.bind(this);
        this._hide = this._hide.bind(this);
    }

    _show(prop) {
        this.setState({[prop]: true});
    }

    _hide(prop) {
        this.setState({[prop]: false});
    }

    render() {
        return (
            <div>
                <ButtonToolbar muted>
                    <Button onClick={() => this._show('showConfirm')}>Confirm</Button>
                    <Button onClick={() => this._show('showSuccess')} type='success'>Success</Button>
                    <Button onClick={() => this._show('showInfo')} type='info'>Info</Button>
                    <Button onClick={() => this._show('showWarning')} type='warning'>Warning</Button>
                    <Button onClick={() => this._show('showError')} type='danger'>Error</Button>
                </ButtonToolbar>

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

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.

class HIGMessageBoxEx02 extends React.Component {
    constructor(props) {
        super(props);
        this._show = this._show.bind(this);
        this._hide = this._hide.bind(this);
    }

    _show(prop) {
        this.setState({[prop]: true});
    }

    _hide(prop) {
        this.setState({[prop]: false});
    }

    render() {
        return (
            <div>
                <Button onClick={() => this._show('showConfirm')}>Three Buttons</Button>

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

}

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.
internalMessageBox Object   Object to set a reference to.
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.