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

PropertiesInstructionsTypeDefaultVersion
borderedToggle if show border, only affects in non-fullscreen modebooleanfalse1.0
classNameClassnamestring--
closeIconCustom close icon,no icon if passed nullReactNode-1.0
descriptionDescription textsReactNode-1.0
fullModeToggle if banner is full screenbooleantrue1.0
iconCustom icon, no icon if passed nullReactNode-1.0
onCloseCallback function when close bannerfunction--
styleStyleobject--
titleTitleReactNode-1.0
typeType of banner, one of info, success, danger, warningstringinfo-

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 the Enter key or the Space 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

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED