MessageBar

Interface of MessageBar
🏗 Coming Soon

The <MessageBar /> component is used to alert the user with warn, critical, inform, or positive messages, settable via the intent property. If no intent is set, it will fall back to inform by default.

Inform
Inform (default)
Warning
Warning
Success
Positive
Error
Critical

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

Non-clearable MessageBar

If you don't want the MessageBar to be clearable, you can hide all action buttons with the noActions prop.

Inform
I can't be closed

Custom string labels

MessageBar allows you to pass your own custom actions in place of the standard dismiss button. It accepts two different props: primaryButton and secondaryButton which will both accept a custom JSX element.

Inform
Render some custom action labels!

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.

Inform
Render some custom action components!

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.

Warning
I can be closed and reopened