Badges

Headings


<h1>
    Example heading
    <span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
        New
    </span>
</h1>
<h2>
    Example heading
    <span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
        New
    </span>
</h2>
<h3>
    Example heading
    <span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
        New
    </span>
</h3>
<h4>
    Example heading
    <span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
        New
    </span>
</h4>
<h5>
    Example heading
    <span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
        New
    </span>
</h5>
<h6>
    Example heading
    <span class="bg-primary-500 text-white rounded-md py-[.35em] px-[.65em] inline-block font-normal">
        New
    </span>
</h6>

Example heading New

Pill Badges


<span class="inline-block px-[15px] py-[3px] text-white border border-primary-500 bg-primary-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Primary
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-secondary-500 bg-secondary-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Secondary
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-success-500 bg-success-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Success
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-danger-500 bg-danger-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Danger
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-warning-500 bg-warning-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Warning
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-info-500 bg-info-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Info
</span>
<span class="inline-block px-[15px] py-[3px] text-dark border border-gray-50 bg-gray-50 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Light
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-dark bg-dark text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Dark
</span>

Primary Secondary Success Danger Warning Info Light Dark

Outline Pill Badges


<span class="inline-block px-[15px] py-[3px] text-primary-500 border border-primary-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Primary
</span>
<span class="inline-block px-[15px] py-[3px] text-secondary-500 border border-secondary-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Secondary
</span>
<span class="inline-block px-[15px] py-[3px] text-success-500 border border-success-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Success
</span>
<span class="inline-block px-[15px] py-[3px] text-danger-500 border border-danger-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Danger
</span>
<span class="inline-block px-[15px] py-[3px] text-warning-500 border border-warning-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Warning
</span>
<span class="inline-block px-[15px] py-[3px] text-info-500 border border-info-500 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Info
</span>
<span class="inline-block px-[15px] py-[3px] border border-gray-100 text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Light
</span>
<span class="inline-block px-[15px] py-[3px] text-dark border border-dark text-xs rounded-[100px] ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Dark
</span>

Primary Secondary Success Danger Warning Info Light Dark

Outline Badges


<span class="inline-block px-[15px] py-[3px] text-primary-500 border border-primary-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Primary
</span>
<span class="inline-block px-[15px] py-[3px] text-secondary-500 border border-secondary-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Secondary
</span>
<span class="inline-block px-[15px] py-[3px] text-success-500 border border-success-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Success
</span>
<span class="inline-block px-[15px] py-[3px] text-danger-500 border border-danger-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Danger
</span>
<span class="inline-block px-[15px] py-[3px] text-warning-500 border border-warning-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Warning
</span>
<span class="inline-block px-[15px] py-[3px] text-info-500 border border-info-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Info
</span>
<span class="inline-block px-[15px] py-[3px] border border-gray-100 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Light
</span>
<span class="inline-block px-[15px] py-[3px] text-dark border border-dark text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Dark
</span>

Primary Secondary Success Danger Warning Info Light Dark

Background Colors


<span class="inline-block px-[15px] py-[3px] text-white border border-primary-500 bg-primary-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Primary
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-secondary-500 bg-secondary-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Secondary
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-success-500 bg-success-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Success
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-danger-500 bg-danger-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Danger
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-warning-500 bg-warning-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Warning
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-info-500 bg-info-500 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Info
</span>
<span class="inline-block px-[15px] py-[3px] text-dark border border-gray-50 bg-gray-50 text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Light
</span>
<span class="inline-block px-[15px] py-[3px] text-white border border-dark bg-dark text-xs rounded-md ltr:mr-[10px] rtl:ml-[10px] mb-[15px]">
    Dark
</span>

Primary Secondary Success Danger Warning Info Light Dark