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.
There are five supported types of message boxes: 'confirm'
, 'success'
, 'info'
(default), 'warning'
and 'error'
. Use the type
property to set the type.
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.
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' . |
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. |