<MessageBar /> component is used to alert the user with
positive messages, settable via the
intent property. If no intent is set, it will fall back to
inform by default.
Customizing the action buttons
MessageBar allows you to pass your own custom actions in place of the standard dismiss button. There are two such props, that are flexible in their use and output. In addition, there are two more props for tying into action clicks:
primaryAction: string or ReactElement
onPrimaryClick: () => void
secondaryAction: string or ReactElement
onSecondaryClick: () => void
If you don't want the MessageBar to be clearable, you can hide all action buttons with the
Custom string labels
MessageBar allows you to pass your own custom actions in place of the standard dismiss button. It accepts two different props:
secondaryButton which will both accept a custom JSX element.
Rendering custom components
This is not the recommended happy path for using MessageBar, but it is available if you run into an edge case that is not supported by customizing the string label and click callbacks. Just keep in mind that if you decide to render custom components you will be responsible for allowing the MessageBar to be cleared.
Controlled Component Pattern
To control MessageBar renderin externally, use
onPrimaryAction in conjunction with the
visible boolean prop. This can be useful if you wish to provide an Undo or other complex workflows.