Badges

Default Badges

Use the Badge tag to set a default badge.

Primary Secondary Success Info Warning Danger Dark Light

Soft Badges

Use the bg-*-subtle text-* class with the below-mentioned variation to create a softer badge.

Primary Secondary Success Info Warning Danger Dark Light

Outline Badges

Use the border, border-* text-* class with the below-mentioned variation to create a badge with the outline.

Primary Secondary Success Info Warning Danger Dark Light

Rounded Pill Badges

Use the rounded-pill class to make badges more rounded with a larger border-radius.

Primary Secondary Success Info Warning Danger Dark Light

Rounded Pill Badges with soft effect

Use the rounded-pill bg-*-subtle text-* class with the below-mentioned variation to create a badge more rounded with a soft background.

Primary Secondary Success Info Warning Danger Dark Light

Soft Border Badges

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

Primary Secondary Success Danger Warning Info Dark Light

Outline Pill Badges

Use the rounded-pill border, border-* text-* class with the below-mentioned variation to create a outline Pill badge.

Primary Secondary Success Info Warning Danger Dark Light

Label Badges

Use the badge-label class to create a badge with the label.

Primary Secondary Success Danger Warning Info Dark Light

Gradient Badges

Use the badge-gradient-* class to create a gradient styled badge.

Primary Secondary Success Danger Warning Info Dark

Button Position Badges

Use the below utilities to modify a badge and position it in the corner of a link or button.

Badges With Button

Badges can be used as part of buttons to provide a counter.

Badges with Heading

Example of the badge used in the HTML Heading.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
2024 © Velzon.
Design & Develop by Themesbrand