components
Banner (code)
Use banners to alert users about important information.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| accessibilityLabelCloseButton | String | 'Close' | - | The A11Y label set in the close button |
| appearance | 'error''info''success''warning' | - | - | Controls the Banner’s background & text. |
| children | Node | - | - | The body of the banner |
| closeHidden | Boolean | false | - | Hide the close button |
| onClose | Function | - | - | The close event is triggered |
| show | Boolean | - | - | Show or hide the Banner |
System Props
alignSelf, flex, flexBasis, flexGrow, flexShrink, order
m, mb, ml, mr, mt, mx, my
float
position, bottom, left, right, top, zIndex
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
Show
default: false
Visibility of the banner is controlled by the show prop, and clicking the close button will call the passed in onClose function. This enables you to programmatically show and hide the banner.
Appearance
default: info
Banners should be used sparingly to communicate cleary the severity of the issue or situation. The severity can be indicated by using a different appearance.
CloseHidden
default: false
If you don't need a close button, you can simply hide it with the closeHidden prop.