DEVELOPMENT

Banner

For the best experience, please use this page on a laptop or desktop screen.

Banner is a component to render alert notifications. They are composed of banner items describing errors as per the usecase.

Examples

Basic Banner

Banner Header
  1. Error 1
  2. Error 2
  3. Error 3
  4. Error 4
  5. Error 5
  6. Error 6

Banners with different intents

Error Banner Component

This is Error Banner Component

Warning Banner Component
Success Banner Component
Info Banner Component

Banners with different list types

Numeric List Banner Component
  1. Error 1
  2. Error 2
  3. Error 3
Bullet List Banner Component
  • Error 1
  • Error 2
  • Error 3
No list Banner Component

This is Error Banner Component

The list type of the banner items (i.e numeric or bullets) can be handled by providing $as prop. Whenever $as is set to ul or ol, the role of BannerItemContainer will automatically be set to list. To provide custom role to BannerItemContainer, pass role prop to Banner component.

Fixed Height Banner

Banner Header
  1. Error 1
  2. Error 2
  3. Error 3
  4. Error 4
  5. Error 5
  6. Error 6
  7. Error 7
  8. Error 8
  9. Error 9
  10. Error 10

To fix the height of error list container, user needs to provide overrides to BannerItemContainer or Root.

Custom Title Component

This is a custom title Component
  1. Error 1
  2. Error 2
  3. Error 3
  4. Error 4
  5. Error 5
  6. Error 6

Title property of Banner accepts ReactNode. Hence, a custom title component can also be passed to the title prop of banner.

Hyperspace form with banner

Upload image

Closeable Banner

Banner Header
  • Error 1
  • Error 2
  • Error 3
  • Error 4
  • Error 5
  • Error 6

    • Don't unmount banner on the basis of visible prop. Instead let Banner handle the state, or else animation won't work

    Banner with Content and Buttons
  • Error 1
  • Error 2
  • Error 3
  • Error 4
  • Error 5
  • Error 6
    • Closeable Banner with Buttons

    We can add buttons to the banner header by passing them as children to the titleEndEnhancer prop.

    Usage of buttons should be restricted to:

    1. Size: xxs
    2. Variants: primary and secondary

    API

    NameTypeDefaultDescription
    $as
    'ol' | 'ul' | 'div'
    		divDefines the numeric/bullet/none style for bannerItem list
    children
    react node
    		Banner items
    className
    string
    		Classes to apply on Banner Root
    closeable
    boolean
    		falseshould banner be a closeable banner (user would need to control the visiblity using visible prop)
    collapsible
    boolean
    		trueAdds show/hide button to the banner.
    intent
    'error' | 'warning' | 'success' | 'info'
    		errorDefines the intent of the banner.
    maxItemContainerHeight
    string
    		Sets max height of the items container list.
    overrides
    custom
    		Lets you customize all aspects of the component.
    title
    react node
    		Defines the title of the banner.
    titleEndEnhancer
    react node
    		To add Buttons to end of title (use only xxs size buttons)
    visible
    boolean
    		trueTo control visibility for closeable icon with the state update function given as onClose

    BannerItem props

    NameTypeDefaultDescription
    children
    react node
    		Banner items content
    className
    string
    		Classes to apply on Banner Root
    overrides
    custom
    		Lets you customize all aspects of the component.

    You can check the implementation of the component for more details.

    You can import this module like so:

    import {Banner} from 'spaceweb/banner'

    It exports the following components or utility functions:

    • Banner
    • BannerItem
    • StyledBanner
    • StyledBannerItem
    • StyledTitle