Floating notification

The floating notification informs the user that an action has been taken. It can optionally include an icon and/or call-to-action (CTA) which may allow the user to view or undo the action.

After 8 seconds, these examples disappear. Refresh the page to see them again.

Default

Storybook failed to load.

Call-to-Action (CTA) Example

Storybook failed to load.

Icon Example

Storybook failed to load.

CTA & Icon Example

Storybook failed to load.

bpk-component-floating-notification

Installation

Check the main Readme for a complete installation guide.

Usage

import BpkFloatingNotification from '@skyscanner/backpack-web/bpk-component-floating-notification';
import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart';

export default () => (
  <BpkFloatingNotification
    ctaText="View"
    icon={BpkIconHeart}
    onClick={() => {}}
    text="Killer Combo saved to New York and Miami 🎉"
  />
);

Props

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

Props

Storybook failed to load.