Badge

Badges are static components that show helpful details or attributes.

Default (Normal)

The default behaviour for a badge is to sit next to other objects with text aligned to the baseline.

Storybook failed to load.

Warning

Storybook failed to load.

Success

Storybook failed to load.

Critical

Storybook failed to load.

Strong

Storybook failed to load.

Brand

Storybook failed to load.

Inverse

Storybook failed to load.

Outline

Storybook failed to load.

Docked

A badge can also be configured to have a top right, or top left modifier to pin it to the corner of its parent.

Storybook failed to load.

bpk-component-badge

Backpack badge component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkBadge, { BADGE_TYPES } from '@skyscanner/backpack-web/bpk-component-badge';
                                                
                                                export default () => (
                                                  <BpkBadge
                                                    type={BADGE_TYPES.warning}
                                                  >
                                                    My Badge
                                                  </BpkBadge>
                                                );

Props

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

Props

Storybook failed to load.