Feedback · Banner
Banner
The Banner component is usually used to identify the status or notification of the full page. It is usually resident and requires the user to close it initiatively.
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
role
of 'alert'. - The close icon has a
aria-label
of 'Close'.
Keyboard and Focus
- The close button of the Banner can be focused with the
Tab
key. After the button is focused, hit theEnter
key or theSpace
key 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