Badges

Use our custom badge styles to add a label compontent on your website.

Colors

Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge

View example's code

<span class="badge !bg-[rgba(63,120,224)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(250,183,88)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(247,139,119)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(226,98,107)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge !bg-[rgba(209,107,134)] !opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(160,124,197)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(116,126,209)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(63,120,224)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(84,168,199)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(69,196,160)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(124,183,152)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(230,104,179)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(94,185,240)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(96,93,186)] opacity-100 !rounded-[50rem]">Badge</span>
<span class="badge  bg-[#21262c] opacity-100  !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(148,153,163)] opacity-100 text-white !rounded-[50rem]">Badge</span>

<span class="badge bg-[rgba(255,255,255)] opacity-100 text-[#343f52] !rounded-[50rem]">Badge</span>
  
<span class="badge !bg-[#e0e9fa] text-[#3f78e0]  !rounded-[50rem]">Badge</span>
<span class="badge !bg-[#fef3e4] text-[#fab758] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#f78b77] text-[#f78b77] !rounded-[50rem]">Badge</span>
<span class="badge !bg-[#fae6e7] text-[#e2626b] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#f8e7ec] text-[#d16b86] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#f0eaf6] text-[#a07cc5] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e9eaf8] text-[#747ed1] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e0e9fa] text-[#3f78e0] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e4f1f6] text-[#54a8c7] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e1f6f0] text-[#45c4a0] !rounded-[50rem]">Badge</span>
<span class="badge !bg-[#eaf3ef] text-[#7cb798] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#fbe7f3] text-[#e668b3] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e5f4fd] text-[#5eb9f0] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e6e5f4] text-[#605dba] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#dcddde] text-[#343f52] !rounded-[50rem]">Badge</span>
<span class="badge bg-[rgba(164,174,198,0.2)] text-[#343f52] !rounded-[50rem]">Badge</span>

Gradients

Badge Badge Badge Badge Badge Badge Badge

View example's code

<span class="badge gradient-1 !rounded-[50rem]">Badge</span>
<span class="badge gradient-2 !rounded-[50rem]">Badge</span>
<span class="badge gradient-3 !rounded-[50rem]">Badge</span>
<span class="badge gradient-4 !rounded-[50rem]">Badge</span>
<span class="badge gradient-5 !rounded-[50rem]">Badge</span>
<span class="badge gradient-6 !rounded-[50rem]">Badge</span>
<span class="badge gradient-7 !rounded-[50rem]">Badge</span>

Shapes

Square Rounded Pill

View example's code

<span class="badge !bg-[rgba(63,120,224)] opacity-100 !rounded-none">Square</span>
<span class="badge !bg-[rgba(63,120,224)] opacity-100 rounded">Rounded</span>
<span class="badge !bg-[rgba(63,120,224)] opacity-100 !rounded-[50rem]">Pill</span>

Sizes

Default Large

View example's code

<span class="badge !bg-[rgba(63,120,224)] opacity-100 !rounded-[50rem]">Default</span>
<span class="badge badge-lg !bg-[rgba(63,120,224)] opacity-100 !rounded-[50rem]">Large</span>

Project Pages

Single Projects

Usage

Styleguide

Elements

Badges

Colors

Gradients

Shapes

Sizes

Think unique and be creative. Make a difference with Sandbox.