Types
Banner visual variants. Info is default.
Info Banner
This is an example banner message in info style.
Success Banner
This is an example banner message in success style.
Warning Banner
This is an example banner message in warning style.
Critical Banner
This is an example banner message in critical style.
Intelligence Banner
This is an example banner message in intelligence style.
Brand Banner
This is an example banner message in brand style.
Positions
Position controls how the banner will style its borders for the position required
This is an example banner message in top position.
This is an example banner message in bottom position.
This is an example banner message in island position.
Loading
This is an example banner message with loading true.
A Footer sub-component is added for wrapping the actions section.
For the actions we can use the Button and the Checkbox sub-components.
Primary Action Only
This is an example banner message primary action.
Primary and Secondary Actions
This is an example banner message primary and secondary actions
Primary Action and Checkbox
This is an example banner message primary action and checkbox
If isOneLine is set to true, the banner will try to fit all the content in a single line, and will center the icon
This is an example banner message primary action
This is an example banner message primary and secondary actions
This is an example banner message primary action and checkbox
Icons can be added to the buttons as iconBefore and iconAfter props.
Primary and Secondary Actions - Icons
This is an example banner message primary and secondary actions
Buttons can be setup with a disabled state
Primary and Secondary Actions - Disabled
This is an example banner message primary and secondary actions
Links
Links can be added to the banner. Can be using the Link or the LinkButton sub-components. Both can have the link-out icon.
Link URL
This is an example banner message with a link URL.Link URL
Link Action with Icon
This is an example banner message with a link action and icon.
Close
Close must be either a function to handle the close action.
Close Button
This is an example banner message for a closable banner.