Web | Info Banner

Info banners come in various styles to indicate informations, success, warnings or errors

Storybook failed to load.

Expandable

They can be configured to display further information to the user in the form of an expandable panel.

Storybook failed to load.

Dismissible

Info banners can be configured to include a close icon so that the user can dismiss them.

Note that if info banners are being added or removed dynamically (like in the example below), you should render a BpkAriaLive container describing the updates taking place. By doing this, assistive technologies will know to inform the user when changes are made. By default, only additions to the container will be read out, so you don't need to worry about removing entries again.

Storybook failed to load.

With enter animation

Info banners can be configured to animate when first added to the DOM.

Storybook failed to load.

Backpack info banner component.

Installation

Check the main Readme for a complete installation guide.

Usage

Default


                                                
                                                import BpkInfoBanner, { ALERT_TYPES } from '@skyscanner/backpack-web/bpk-component-info-banner';
                                                
                                                export default () => (
                                                  <BpkInfoBanner
                                                    message="Successful alert with more information."
                                                    type={ALERT_TYPES.SUCCESS}
                                                  />
                                                );

Dismissable


                                                
                                                import { Component } from 'react';
                                                import { ALERT_TYPES, BpkInfoBannerDismissable } from '@skyscanner/backpack-web/bpk-component-info-banner';
                                                
                                                class DismissableBpkInfoBanner extends Component {
                                                  constructor() {
                                                    super();
                                                
                                                
                                                    this.state = {
                                                      show: true,
                                                    };
                                                  }
                                                
                                                  setDismissed = () => {
                                                    this.setState({
                                                      show: false,
                                                    });
                                                  }
                                                
                                                  render() {
                                                    return (
                                                      <BpkInfoBannerDismissable
                                                        message="Successful banner with dismiss option."
                                                        type={ALERT_TYPES.SUCCESS}
                                                        onDismiss={this.setDismissed}
                                                        show={this.state.show}
                                                        dismissButtonLabel="Dismiss"
                                                      />
                                                    );
                                                  }
                                                }
                                                
                                                export default () => (
                                                  <DismissableBpkInfoBanner />
                                                );

withBannerAlertState(BpkInfoBanner)


                                                
                                                import { Component } from 'react';
                                                import { ALERT_TYPES, withBannerAlertState, BpkInfoBannerDismissable, BpkInfoBannerExpandable } from '@skyscanner/backpack-web/bpk-component-info-banner';
                                                
                                                const InfoBannerDismissableState = withBannerAlertState(BpkInfoBannerDismissable);
                                                const InfoBannerExpandableState = withBannerAlertState(BpkInfoBannerExpandable);
                                                
                                                <InfoBannerDismissableState
                                                  dismissButtonLabel="Dismiss"
                                                  message="Successful banner with dismiss option."
                                                  type={ALERT_TYPES.SUCCESS}
                                                />
                                                
                                                <InfoBannerDismissableState
                                                  dismissButtonLabel="Dismiss"
                                                  message="Successful banner that will disappear after 5 seconds."
                                                  hideAfter={5}
                                                  type={ALERT_TYPES.SUCCESS}
                                                />
                                                
                                                <InfoBannerExpandableState
                                                  message="Successful banner with expandable option."
                                                  type={ALERT_TYPES.SUCCESS}
                                                  toggleButtonLabel="View more"
                                                >
                                                  Lorem ipsum dolor sit amet.
                                                </InfoBannerExpandableState>

Props

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.