A banner (MessageBar) displays errors, warnings, or important information about an open app or file. For example, if a file failed to upload an error message bar should appear.
For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.
MessageBar(...)
MessageBarButton(...)JSX.Element
The actions you want to show on the other side.
string
A description of the message bar for the benefit of screen readers.
string
Additional CSS class(es) to apply to the MessageBar.
IRefObject<IMessageBar>
Optional callback to access the IMessageBar interface. Use this instead of ref for accessing the public methods and properties of the component.
string
Aria label on dismiss button if onDismiss is defined.
IIconProps
Custom icon prop to replace the dismiss icon. If unset, default will be the Fabric Clear icon.
boolean
Determines if the message bar is multi lined. If false, and the text overflows over buttons or to another line, it is clipped.
IIconProps
Custom icon prop to replace the message bar icon. If unset, default will be the icon set by messageBarType.
MessageBarType
The type of MessageBar to render.
(ev?: React.MouseEvent<HTMLElement | BaseButton | Button>) => any
Whether the message bar has a dismiss button and its callback. If null, we don't show a dismiss button.
string
Aria label on overflow button if truncated is defined.
IStyleFunctionOrObject<IMessageBarStyleProps, IMessageBarStyles>
Call to provide customized styling that will layer on top of the variant rules.
ITheme
Theme (provided through customization.)
boolean
Determines if the message bar text is truncated. If true, a button will render to toggle between a single line view and multiline view. This prop is for single line message bars with no buttons only in a limited space scenario.
A message bar is most commonly found near the top of an app, underneath the app's main command bar. For example, the Microsoft Office message bar is positioned beneath the Ribbon, but above the document canvas.
Multiple message bars can appear at a time, but a given scenario or related set of scenarios should aim to only show one message bar at a time. Message bars are rarely shown in direct response to an action; rather, they should be shown when there’s something a person should know about the overall app or document.
Use the icons options to indicate the message type: the Info icon for information messages; ShieldAlert icon for security-related messages; the Warning icon for non-blocking errors; ErrorBadge icon for critical errors; the Blocked icon for blocking messages; and the Completed icon for success messages.
Message bars should include:
Limit titles to 50 characters (including spaces) to leave room for text expansion when translated. People should be able to scan the title to determine the purpose of the message. Capitalize only the first word of the title and any proper nouns.
Describe the information or error state concisely, ideally in a single sentence. Limit the message to fewer than 512 characters (including spaces) to leave room for text expansion when translated. Include end punctuation for complete sentences.
Offer one to two action buttons to help people solve any errors they're receiving. Limit button text to fewer than 50 charactesr (including spaces) to leave room for translation. Action buttons can have any callback attached to them and should provide people with options to address the notification and dismiss the message bar.
library(shiny.fluent)
if (interactive()) {
shinyApp(
ui = MessageBar("Message"),
server = function(input, output) {}
)
}