Pills
Default
Default
Primary
Secondary
Tertiary
Accent
<div class="rounded-full py-1 px-4 bg-gray-400 text-xs inline-block text-gray-700 font-bold leading-normal uppercase mr-2">
Default
</div>
<div class="rounded-full py-1 px-4 bg-primary-500 text-xs inline-block text-white font-bold leading-normal uppercase mr-2">
Primary
</div>
<div class="rounded-full py-1 px-4 bg-secondary-500 text-xs inline-block text-white font-bold leading-normal uppercase mr-2">
Secondary
</div>
<div class="rounded-full py-1 px-4 bg-tertiary-500 text-xs inline-block text-white font-bold leading-normal uppercase mr-2">
Tertiary
</div>
<div class="rounded-full py-1 px-4 bg-orange-400 text-xs inline-block text-white font-bold leading-normal uppercase mr-2">
Accent
</div>
Outlined
Default
Primary
Secondary
Tertiary
Accent
<div class="rounded-full py-1 px-4 bg-transparent border-2 border-gray-400 text-xs inline-block text-gray-700 font-bold leading-normal uppercase mr-2">
Default
</div>
<div class="rounded-full py-1 px-4 bg-transparent border-2 border-primary-500 text-xs inline-block text-primary-500 font-bold leading-normal uppercase mr-2">
Primary
</div>
<div class="rounded-full py-1 px-4 bg-transparent border-2 border-secondary-500 text-xs inline-block text-secondary-500 font-bold leading-normal uppercase mr-2">
Secondary
</div>
<div class="rounded-full py-1 px-4 bg-transparent border-2 border-tertiary-500 text-xs inline-block text-tertiary-500 font-bold leading-normal uppercase mr-2">
Tertiary
</div>
<div class="rounded-full py-1 px-4 bg-transparent border-2 border-orange-500 text-xs inline-block text-orange-500 font-bold leading-normal uppercase mr-2">
Accent
</div>