Badges

Default Badges

The default form of solid color badges.

Primary Gray Emerald Red Blue Yellow Sky Cyan Purple Dark Light
Default Rounded Badges

Use utility classes .rounded-full.

Primary Gray Emerald Red Blue Yellow Sky Cyan Purple Dark Light
Outline Badges

Use utility classes .border .border-{color}.

Primary Gray Emerald Red Blue Yellow Sky Cyan Purple Dark Light
Outline rounded Badges

Use utility classes .border .border-{color} .rounded-full.

Primary Gray Emerald Red Blue Yellow Sky Cyan Purple Dark Light
Soft Badges

Use utility classes .bg-{color}/20 .text-{color}.

Primary Gray Emerald Red Blue Yellow Sky Cyan Purple Dark Light
Outline rounded Badges

Use utility classes .bg-{color}/20 .text-{color} .rounded-full.

Primary Gray Emerald Red Blue Yellow Sky Cyan Purple Dark Light