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

MessageBar

There is a breaking change to this component in the next version of NUI Widgets.
  • The underlying html of this component changed in v13.2.1 due to replacing the CSS implementation of state icons with the Icon component.
import MessageBar from '@concur/nui-widgets/lib/MessageBar/MessageBar';

Message bars display state-related messages to the user. They are intended to be part of the page layout and are more permanent than an overlay (e.g. MessageBox, Popover).

Example

Types

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

<MessageBar
    text='This is some sample text to show as a success message.'
    type='success' />

<MessageBar
    text='This is some sample text to show as an info message.'
    type='info' />

<MessageBar
    text='This is some sample text to show as a warning message.'
    type='warning' />

<MessageBar
    text='This is some sample text to show as an error message.'
    type='error' />

Closable

Closable message bars can be dismissed by clicking the “X” button. Use the onCloseClicked callback to make a message bar closable.

class MessageBarEx02 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true
        };
        this._toggleMessageBar = this._toggleMessageBar.bind(this);
    }

    _toggleMessageBar() {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        if (this.state.show) {
            return (
                <MessageBar
                    onCloseClicked={this._toggleMessageBar}
                    text='This is some sample text to show as an info message.'
                    textClose='Close'
                    type='info' />
            );
        } else {
            return (
                <p>
                    The MessageBar was closed. <a href='javascript:void(0)' onClick={this._toggleMessageBar}>Show Again</a>
                </p>
            );
        }
    }
}

Description Text

Use the description property to include additional descriptive text in the message bar.

<MessageBar
    description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus massa magna, viverra in varius quis, convallis venenatis risus. Ut in neque ligula. Mauris quis faucibus lacus, sit amet egestas lorem.'
    text='This is some sample text to show as a success message.'
    type='success' />

Links can be included within the content for either text or description. They will be styled as shown in the example.

const messageText = 'This is some sample text to show as a success message.';
const descriptionText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus massa magna, viverra in varius quis, convallis venenatis risus. Ut in neque ligula. Mauris quis faucibus lacus, sit amet egestas lorem.';

<MessageBar
    text={<span>{messageText} <a href='#'>Demo Link</a></span>}
    type='warning' />
<MessageBar
    description={<span>{descriptionText} <a href='#'>Demo Link</a></span>}
    text={messageText}
    type='error' />

Expandable

See MessageBarExpandable.

Usage

Properties

Property Type Default Description
className String   Custom classes to be added to the outer <div> tag.
description Node   Additional descriptive text to be shown below the message text.
text Node   Message to be shown.
textClose String   Localized assistive text for the close toggle button. Required when onCloseClicked is passed.
type String 'info' Message bar type (state). Options are 'success', 'info', 'warning', 'error'.

Callbacks

Property Parameters Description
onCloseClicked   Called when “X” close button is triggered. When supplied, message bar becomes closable. Remember to pass textClose property when using this.