Pill Badges

Secondary Pill Badges

Use the .badge class, followed by.badge-pill with .badge-secondaryclass within element to create default pill badge.

59

Primary Pill Badges

Use the .badge class, followed by.badge-pill with .badge-primaryclass within element to create primary pill badge.

43

Success Pill Badges

Use the .badge class, followed by.badge-pill with .badge-successclass within element to create success pill badge.

25

Danger Pill Badges

Use the .badge class, followed by .badge-pill with .badge-dangerclass within element to create danger pill badge.

78

Info Pill Badges

Use the .badge class, followed by .badge-pill with .badge-infoclass within element to create info pill badge.

57

Warning Pill Badges

Use the .badge class, followed by .badge-pill with .badge-warningclass within element to create warning pill badge.

68

Custom Blue Grey Color Pill Badges

Use the .badge class, followed by.bg-blue-greyclass within element to create blue grey label.

63

Pill Badges With Glow effect

Secondary Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

59

Primary Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

41

Success Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

25

Danger Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

78

Info Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

57

Warning Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

68

Custom Blue Grey Color Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

63

Square Pill Badges

For square pill badges, use .badge-square class with .badge class.

Secondary Square Pill

15

Square Primary Pill

21

Square Success Pill

36

Pill Badges with Icons

Secondary Icon Pill

Primary Icon Pill

Success Icon Pill

Square Danger Icon Pill

Square Info Icon pill badge

Square Warning Icon Label

Pill Badges with Dropdown

Square Danger Pill with Dropdown

Square Info Pill with Dropdown

Square Warning Pill with Dropdown

Bordered Pill Badges

Primary Pill Badges

Use the .badge class, followed by.badge-border with .badge-primaryclass within element to create primary pill badge.

43

Success Pill Badges

Use the .badge class, followed by.badge-border with .badge-successclass within element to create success pill badge.

25

Danger Pill Badges

Use the .badge class, followed by .badge-border with .badge-dangerclass within element to create danger pill badge.

78

Info Pill Badges

Use the .badge class, followed by .badge-border with .badge-infoclass within element to create info pill badge.

57

Warning Pill Badges

Use the .badge class, followed by .badge-border with .badge-warningclass within element to create warning pill badge.

68

Custom Brown Color Pill Badges

Use the .badge class, followed by .badge-border with .bg-blueclass within element to create blue pill badge.

34

Pill Badges With Glow effect

Primary Pill Badges

Use the .badge class, followed by .badge-border with .badge-glowclass within element to create glow styled pill badge.

41

Success Pill Badges

Use the .badge class, followed by .badge-border with .badge-glowclass within element to create glow styled pill badge.

25

Danger Pill Badges

Use the .badge class, followed by .badge-border with .badge-glowclass within element to create glow styled pill badge.

78

Info Pill Badges

Use the .badge class, followed by .badge-border with .badge-glowclass within element to create glow styled pill badge.

57

Warning Pill Badges

Use the .badge class, followed by .badge-border with .badge-glowclass within element to create glow styled pill badge.

68

Custom Brown Color Pill Badges

Use the .badge class, followed by .badge-border with .badge-glowclass within element to create glow styled pill badge.

34

Square Pill

For square pill badges, use .badge-square class with .badge class.

Danger Square Pill

15

Square Primary Pill

21

Square Success Pill

36

Bordered Pill Badges with Icons

Pink Icon Pill

Primary Icon Pill

Success Icon Pill

Square Danger Icon Pill

Square Info Icon pill badge

Square Warning Icon Label

Bordered Pill Badges with Dropdown