Banner alert

Banner alerts provide inline feedback about an operation or task.

Default

Banner alerts come in various styles to indicate success, warning or error, or some neutral information.

Storybook failed to load.

With custom icon

Banner alerts can be configured to show any icon.

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

Banner alerts can be configured to include a close icon so that the user can dismiss them.

Note that if banner-alerts 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

Banner alerts can be configured to animate when first added to the DOM.

Storybook failed to load.

bpk-component-banner-alert

Backpack banner alert component.

👻 This component has been deprecated, and usages should be replaced with bpk-component-info-banner

Installation

Check the main Readme for a complete installation guide.

Usage

Default


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

Dismissable


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

withBannerAlertState(BpkBannerAlert)


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

Props

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

Props

Storybook failed to load.