Pill Tags

Default Pill Tags

Use the .tag class, followed by.tag-pill with .tag-defaultclass within element to create default pill tag.

59

Primary Pill Tags

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

43

Success Pill Tags

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

25

Danger Pill Tags

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

78

Info Pill Tags

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

57

Warning Pill Tags

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

68

Custom Blue Grey Color Pill Tags

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

63

Pill Tags With Glow effect

Default Pill Tags

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

59

Primary Pill Tags

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

41

Success Pill Tags

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

25

Danger Pill Tags

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

78

Info Pill Tags

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

57

Warning Pill Tags

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

68

Custom Blue Grey Color Pill Tags

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

63

Square Pill Tags

For square pill tags, use .tag-square class with .tag class.

Default Square Pill

15

Square Primary Pill

21

Square Success Pill

36

Pill Tags with Icons

Default Icon Pill

Primary Icon Pill

Success Icon Pill

Square Danger Icon Pill

Square Info Icon pill tag

Square Warning Icon Label

Pill Tags with Dropdown

Pill Tags as Notification

Use .tag-up to set pill tag to higher than other text. So that it can work with notifications also.

Default Icon Pill

4

Primary Icon Pill

1

Success Icon Pill

6

Square Danger Icon Pill

2

Square Info Icon pill tag

5

Square Warning Icon Label

3

Theme Customizer


Customize & Preview in Real Time

Layout Options


Navigation Color Options
Solid

Gradient

Solid

Gradient


Menu Color Options