KitlenoKitlenov2.0.0

Feedback / Badge

Badge

Badge components are used to highlight labels, categories, or statuses in a compact form. Commonly used to display counts, tags, or contextual metadata in user interfaces.

Badge

Filled badges with colored backgrounds. Use them to highlight labels, tags, or status indicators in a compact pill shape.

Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
RegularBadge.jsx
export default function RegularBadge() {
  return (
    <div className="flex flex-row flex-wrap gap-4 justify-center">
      <div className="flex justify-center items-center">
        <span className="bg-[#ffebee] py-[2px] px-2 rounded-2xl text-[#d32f2f] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#fce4ec] py-[2px] px-2 rounded-2xl text-[#c2185b] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#f3e5f5] py-[2px] px-2 rounded-2xl text-[#7b1fa2] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#e3f2fd] py-[2px] px-2 rounded-2xl text-[#1976d2] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#e8f5e9] py-[2px] px-2 rounded-2xl text-[#388e3c] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#fff3e0] py-[2px] px-2 rounded-2xl text-[#f57c00] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#efebe9] py-[2px] px-2 rounded-2xl text-[#5d4037] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#eeeeee] py-[2px] px-2 rounded-2xl text-[#616161] text-sm">Badge</span>
      </div>
    </div>
  )
}

Badge with Border

Filled badges with a solid 2px border matching the fill color. Adds visual weight and definition compared to a plain filled badge.

Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
BadgeWithBorder.jsx
export default function BadgeWithBorder() {
  return (
    <div className="flex flex-row flex-wrap gap-4 justify-center">
      <div className="flex justify-center items-center">
        <span className="bg-[#ffebee] py-[2px] px-2 rounded-2xl border-2 border-[#ef9a9a] text-[#d32f2f] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#fce4ec] py-[2px] px-2 rounded-2xl border-2 border-[#f8bbd0] text-[#c2185b] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#f3e5f5] py-[2px] px-2 rounded-2xl border-2 border-[#ce93d8] text-[#7b1fa2] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#e3f2fd] py-[2px] px-2 rounded-2xl border-2 border-[#90caf9] text-[#1976d2] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#e8f5e9] py-[2px] px-2 rounded-2xl border-2 border-[#a5d6a7] text-[#388e3c] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#fff3e0] py-[2px] px-2 rounded-2xl border-2 border-[#ffcc80] text-[#f57c00] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#efebe9] py-[2px] px-2 rounded-2xl border-2 border-[#bcaaa4] text-[#5d4037] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#eeeeee] py-[2px] px-2 rounded-2xl border-2 border-[#bdbdbd] text-[#616161] text-sm">Badge</span>
      </div>
    </div>
  )
}

Border with Dashed Outline

Badges with a dashed outline style. A lighter, more subtle alternative to solid borders — useful for draft or pending states.

Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
BadgeWithDashedBorder.jsx
export default function BadgeWithDashedBorder() {
  return (
    <div className="flex flex-row flex-wrap gap-4 justify-center">
      <div className="flex justify-center items-center">
        <span className="bg-[#ffebee] py-[2px] px-2 rounded-2xl outline-[#ef9a9a] outline-dashed text-[#d32f2f] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#fce4ec] py-[2px] px-2 rounded-2xl outline-[#f48fb1] outline-dashed text-[#c2185b] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#f3e5f5] py-[2px] px-2 rounded-2xl outline-[#ce93d8] outline-dashed text-[#7b1fa2] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#e3f2fd] py-[2px] px-2 rounded-2xl outline-[#90caf9] outline-dashed text-[#1976d2] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#e8f5e9] py-[2px] px-2 rounded-2xl outline-[#a5d6a7] outline-dashed text-[#388e3c] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#fff3e0] py-[2px] px-2 rounded-2xl outline-[#ffcc80] outline-dashed text-[#f57c00] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#efebe9] py-[2px] px-2 rounded-2xl outline-[#bcaaa4] outline-dashed text-[#5d4037] text-sm">Badge</span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#eeeeee] py-[2px] px-2 rounded-2xl outline-[#bdbdbd] outline-dashed text-[#616161] text-sm">Badge</span>
      </div>
    </div>
  )
}

Badge with Doubled Outline

Badges with a double-line outline border. A decorative style that gives badges a more structured, high-contrast appearance.

Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
BadgeWithDoubledOutline.jsx
export default function BadgeWithDoubledOutline() {
  return (
    <div className="flex flex-row flex-wrap gap-4 justify-center">
      <div className="flex justify-center items-center">
        <span className="bg-[#ffebee] py-[2px] px-2 rounded-2xl outline-[#e57373] outline-double outline-2 text-[#d32f2f] text-sm">
          Badge
        </span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#fce4ec] py-[2px] px-2 rounded-2xl outline-[#f06292] outline-double outline-2 text-[#c2185b] text-sm">
          Badge
        </span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#f3e5f5] py-[2px] px-2 rounded-2xl outline-[#ba68c8] outline-double outline-2 text-[#7b1fa2] text-sm">
          Badge
        </span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#e3f2fd] py-[2px] px-2 rounded-2xl outline-[#64b5f6] outline-double outline-2 text-[#1976d2] text-sm">
          Badge
        </span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#e8f5e9] py-[2px] px-2 rounded-2xl outline-[#81c784] outline-double outline-2 text-[#388e3c] text-sm">
          Badge
        </span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#fff3e0] py-[2px] px-2 rounded-2xl outline-[#ffb74d] outline-double outline-2 text-[#f57c00] text-sm">
          Badge
        </span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#efebe9] py-[2px] px-2 rounded-2xl outline-[#a1887f] outline-double outline-2 text-[#5d4037] text-sm">
          Badge
        </span>
      </div>
      <div className="flex justify-center items-center">
        <span className="bg-[#eeeeee] py-[2px] px-2 rounded-2xl outline-[#9e9e9e] outline-double outline-2 text-[#616161] text-sm">
          Badge
        </span>
      </div>
    </div>
  )
}