Badges

Default Badges

Use the badge class to show a default badge.

PrimarySecondarySuccessDangerWarningInfoLightDark
Rounded Badges

Use the .rounded-pill to create a soft badge more rounded.

PrimarySecondarySuccessDangerWarningInfoLightDark
Soft Badges

Use the badge-soft- class to create a softer badge.

PrimarySecondarySuccessDangerWarningInfoLightDark
Soft Rounded Badges

Use the rounded-pill badge-soft- to create a soft badge more rounded

PrimarySecondarySuccessDangerWarningInfoLightDark
Outline Badges

Use the badge-outline- to create a badge with the outline.

PrimarySecondarySuccessDangerWarningInfoLightDark
Outline Rounded Badges

Use the rounded-pill badge-outline- class to create a outline pill badge.

PrimarySecondarySuccessDangerWarningInfoLightDark
Soft Border Badges

Use the badge-border and badge-soft- with below mentioned modifier classes to make badges with border & soft backgorund.

PrimarySecondarySuccessDangerWarningInfoLightDark
Soft Border Rounded Badges

Use the badge-border and badge-soft- with below mentioned modifier classes to make badges with border & soft backgorund.

PrimarySecondarySuccessDangerWarningInfoLightDark
Gradient Badges
PrimarySecondarySuccessDangerWarningInfoorangepurple
Gradient Pill Badges
PrimarySecondarySuccessDangerWarningInfoorangepurple
Badge Usage
Buttons With Badges
Headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New