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.