Badge

Sources #

• Github
• Storybook
• Zeroheight

PrestaShop UIKit #

Original bootstrap component used in the PrestaShop UIKit:

1<span class="badge badge-secondary">
2  Badge
3</span>

PUIK #

Basic Use #

For any badge component that you use, replace the structure above with the following structure:

1<div class="puik-badge puik-badge--neutral">
2  Badge
3</div>

Variants #

The following badge variants are available:

• neutral
• success
• warning
• info
• danger

To use any of these variants, add the puik-badge--${variant} class to the badge:

1<div class="puik-badge puik-badge--${variant}">
2  Badge
3</div>