Default Pill Tags
Use the .tag
class, followed by.tag-pill
with .tag-default
class within element to create default pill tag.
Primary Pill Tags
Use the .tag
class, followed by.tag-pill
with .tag-primary
class within element to create primary pill tag.
Success Pill Tags
Use the .tag
class, followed by.tag-pill
with .tag-success
class within element to create success pill tag.
Danger Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-danger
class within element to create danger pill tag.
Info Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-info
class within element to create info pill tag.
Warning Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-warning
class within element to create warning pill tag.
Custom Blue Grey Color Pill Tags
Use the .tag
class, followed by.bg-blue-grey
class within element to create blue grey label.
Pill Tags With Glow effect
Default Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-glow
class within element to create glow styled pill tag.
Primary Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-glow
class within element to create glow styled pill tag.
Success Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-glow
class within element to create glow styled pill tag.
Danger Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-glow
class within element to create glow styled pill tag.
Info Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-glow
class within element to create glow styled pill tag.
Warning Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-glow
class within element to create glow styled pill tag.
Custom Blue Grey Color Pill Tags
Use the .tag
class, followed by .tag-pill
with .tag-glow
class within element to create glow styled pill tag.
Square Pill Tags
For square pill tags, use .tag-square
class with .tag
class.
Default Square Pill
Square Primary Pill
Square Success Pill
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
Default Pill with Dropdown
Primary Pill with Dropdown
Success Pill with Dropdown
Square Danger Pill with Dropdown
Square Info Pill with Dropdown
Square Warning Pill 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.