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

MessageBarExpandable

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 MessageBarExpandable from '@concur/nui-widgets/lib/MessageBar/MessageBarExpandable';

The MessageBarExpandable component is a specialized version of a MessageBar that provides a method for showing or hiding additional content.

Examples

Basic

<MessageBarExpandable
    text='This is some sample text to show as an info message.'
    textCollapse='Collapse'
    textExpand='Expand'
    type='info'>
    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. Nunc rutrum dui
    mi, in porta sem vulputate vel. In hendrerit finibus
    tellus, in tempor lacus. Suspendisse eget purus commodo
    lacus ultricies fermentum. Nam vestibulum auctor auctor.
    Phasellus feugiat lobortis neque, at lacinia lorem
    mattis sagittis. Mauris felis mi, tempus at sapien et,
    gravida mattis massa. Sed maximus aliquam erat.
    Suspendisse potenti. Praesent ultricies sagittis enim,
    vel laoreet ante finibus a. Nulla aliquet tincidunt
    metus sit amet efficitur. In a lectus eget tellus
    rhoncus eleifend. Pellentesque non nunc neque.
</MessageBarExpandable>
<MessageBarExpandable
    text={<span>This is some sample text to show as an error message. <a href='#'>Demo Link</a></span>}
    textCollapse='Collapse'
    textExpand='Expand'
    type='error'>
    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. Nunc rutrum dui
    mi, in porta sem vulputate vel. In hendrerit finibus
    tellus, in tempor lacus. Suspendisse eget purus commodo
    lacus ultricies fermentum. Nam vestibulum auctor auctor.
    Phasellus feugiat lobortis neque, at lacinia lorem
    mattis sagittis. Mauris felis mi, tempus at sapien et,
    gravida mattis massa. Sed maximus aliquam erat.
    Suspendisse potenti. Praesent ultricies sagittis enim,
    vel laoreet ante finibus a. Nulla aliquet tincidunt
    metus sit amet efficitur. In a lectus eget tellus
    rhoncus eleifend. Pellentesque non nunc neque.
</MessageBarExpandable>

Usage

Properties

Property Type Default Description
textCollapse String Required Localized assistive text for the toggle button when expanded.
textExpand String Required Localized assistive text for the toggle button when collapsed.
children Node   Collection of React components to be placed inside the expandable body of the message bar.
className String   Custom classes to be added to the outer <div> tag.
isExpanded Boolean false Controls whether message bar is expanded or collapsed.
text Node   Message to be shown.
type String 'info' Message bar type (state). Options are 'success', 'info', 'warning', 'error'.

Callbacks

Property Parameters Description
onExpandToggled isExpanded Called when message bar is toggled between expanded and collapsed.