Info Banner

A way to highlight important information for travellers.

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

Expandable

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

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.

Open in Storybook

With enter animation

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

Open in Storybook

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

Open in Storybook