Demos
How to import
Basic Usage
Types
The
type prop supports one of: default(default),danger,warning, success.Use in Container
You could set
fullMode={false} to use style for non-fullscreen mode。
Also, use bordered for bordered style.Customized Content
Use
children to create customized content.API Reference
| Properties | Instructions | Type | Default | Version |
|---|---|---|---|---|
| bordered | Toggle if show border, only affects in non-fullscreen mode | boolean | false | 1.0 |
| className | Classname | string | - | - |
| closeIcon | Custom close icon，no icon if passed null | ReactNode | - | 1.0 |
| description | Description texts | ReactNode | - | 1.0 |
| fullMode | Toggle if banner is full screen | boolean | true | 1.0 |
| icon | Custom icon, no icon if passed null | ReactNode | - | 1.0 |
| onClose | Callback function when close banner | function | - | - |
| style | Style | object | - | - |
| title | Title | ReactNode | - | 1.0 |
| type | Type of banner, one of info, success, danger, warning | string | info | - |
Accessibility
ARIA
- The component has a
roleof 'alert'. - The close icon has a
aria-labelof 'Close'.
Keyboard and Focus
- The close button of the Banner can be focused with the
Tabkey. After the button is focused, hit theEnterkey or theSpacekey to close the banner.
Content Guidelines
- Full screen Banner
- Try to keep the content displayed completely on one line
- Use correct punctuation, commas within sentences and periods between sentences
- Non-fullscreen Banner
- title
- Instructions in condensed language
- Try to avoid using commas, periods and other punctuation marks in the title, and support the use of question marks at the end when there are and only interrogative sentences
- text
- On the premise of complete information transmission, try to compress the text to 1-2 sentences
- A detailed description or explanation of the title, rather than a repetition of the title
- Use correct punctuation, commas within sentences and periods between sentences
- title
