How to use bpk-component-badge - 6 common examples
To help you get started, we’ve selected a few bpk-component-badge examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Skyscanner / backpack / packages / bpk-docs / src / pages / WebBadgePage / BadgePage.js View on Github 
,
Pears
,
],
},
{
id: 'destructive',
title: 'Destructive',
blurb: [
The destructive badge is a red color as shown below.
,
],
examples: [
Apples
,
Bananas
,
Strawberries
,
Pears
,
],
},
{
id: 'light',
title: 'Light',,
Pears
,
],
},
{
id: 'inverse',
title: 'Inverse',
blurb: [The inverse badge is white as shown below.],
dark: true,
examples: [
Apples
,
Bananas
,
Strawberries
,
Pears
,
],
},
{
id: 'outline',
title: 'Outline',
blurb: [
The outline badge has a somewhat transparent background as shown below.},
{
id: 'light',
title: 'Light',
blurb: [
The light badge is a gray color as shown below.,
],
dark: true,
examples: [
Apples
,
Bananas
,
Strawberries
,
Pears
,
],
},
{
id: 'inverse',
title: 'Inverse',
blurb: [The inverse badge is white as shown below.],
dark: true,
examples: [
Apples
,Pears
,
],
},
{
id: 'outline',
title: 'Outline',
blurb: [
The outline badge has a somewhat transparent background as shown below.
,
],
dark: true,
examples: [
Apples
,
Bananas
,
Strawberries
,
Pears
,
],
},
{
id: 'with-icons',
title: 'With icons',Strawberries
,
Pears,
],
},
{
id: 'success',
title: 'Success',
blurb: [
The success badge is a green color as shown below.,
],
examples: [
Apples
,
Bananas
,
Strawberries
,
Pears
,
],
},
{
id: 'destructive',
title: 'Destructive',
blurb: [
The destructive badge is a red color as shown below.],
},
{
id: 'with-icons',
title: 'With icons',
blurb: [
When badges contain icons, the icons are resized to fit and have some
margin applied. The badge's height also increases slightly.
,
],
examples: [
Flights
,
+ Multiple
,
],
},
];
const BadgePage = ({ ...rest }) => (
);
