DaisyUI Badge

Buttons
About
Badges are used to inform the user of the status of specific data.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds DaisyUI Badge to your project and fits it to your theme.
Code

How DaisyUI Badge is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { BadgeDaisyUI } from "@/components/ui/daisy-ui-badge";

export default function DemoOne() {
  return <div className="flex flex-col gap-4">
    <h2 className="text-xl">Badge</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI>Badge</BadgeDaisyUI >
    </div>
    
    <h2 className="text-xl">Badge sizes</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" size="xs">Xsmall</BadgeDaisyUI>
      <BadgeDaisyUI as="div" size="sm">Small</BadgeDaisyUI>
      <BadgeDaisyUI as="div">Medium</BadgeDaisyUI>
      <BadgeDaisyUI as="div" size="lg">Large</BadgeDaisyUI>
      <BadgeDaisyUI as="div" size="xl">Xlarge</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with colors</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" color="primary">Primary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="secondary">Secondary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="accent">Accent</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="neutral">Neutral</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="info">Info</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="success">Success</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="warning">Warning</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="error">Error</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with soft style</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" variant="soft" color="primary">Primary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="secondary">Secondary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="accent">Accent</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="info">Info</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="success">Success</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="warning">Warning</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="error">Error</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with outline style</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" variant="outline" color="primary">Primary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="secondary">Secondary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="accent">Accent</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="info">Info</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="success">Success</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="warning">Warning</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="error">Error</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with dash style</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" variant="dash" color="primary">Primary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="secondary">Secondary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="accent">Accent</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="info">Info</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="success">Success</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="warning">Warning</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="error">Error</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">neutral badge with outline or dash style</h2>
    These badges use dark text, only use them on light backgrounds
    <div className="flex gap-2">
      <div className="bg-white p-6">
        <BadgeDaisyUI as="div" color="neutral" variant="outline">Outline</BadgeDaisyUI>
        <BadgeDaisyUI as="div" color="neutral" variant="dash">Dash</BadgeDaisyUI>
      </div>
    </div>

    <h2 className="text-xl">Badge ghost</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" variant="ghost">ghost</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Empty badge</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" color="primary" size="xl"></BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="primary" size="md"></BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="primary" size="sm"></BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="primary" size="xs"></BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with icon</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" color="info">
        <svg className="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" strokeLinejoin="miter" strokeLinecap="butt"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeLinecap="square" stroke-miterlimit="10" strokeWidth="2"></circle><path d="m12,17v-5.5c0-.276-.224-.5-.5-.5h-1.5" fill="none" stroke="currentColor" strokeLinecap="square" stroke-miterlimit="10" strokeWidth="2"></path><circle cx="12" cy="7.25" r="1.25" fill="currentColor" strokeWidth="2"></circle></g></svg>
        Info
      </BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="success">
        <svg className="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" strokeLinejoin="miter" strokeLinecap="butt"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeLinecap="square" stroke-miterlimit="10" strokeWidth="2"></circle><polyline points="7 13 10 16 17 8" fill="none" stroke="currentColor" strokeLinecap="square" stroke-miterlimit="10" strokeWidth="2"></polyline></g></svg>
        Success
      </BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="warning">
        <svg className="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><g fill="currentColor"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"></path><line x1="9" y1="6.5" x2="9" y2="10" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-stroke="none" stroke="none"></path></g></svg>
        Warning
      </BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="error">
        <svg className="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor"><rect x="1.972" y="11" width="20.056" height="2" transform="translate(-4.971 12) rotate(-45)" fill="currentColor" strokeWidth={0}></rect><path d="m12,23c-6.065,0-11-4.935-11-11S5.935,1,12,1s11,4.935,11,11-4.935,11-11,11Zm0-20C7.038,3,3,7.037,3,12s4.038,9,9,9,9-4.037,9-9S16.962,3,12,3Z" strokeWidth={0} fill="currentColor"></path></g></svg>
        Error
      </BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge in a text</h2>
    <div className="flex flex-col gap-2">
      <h1 className="text-xl font-semibold">
        Heading 1 <BadgeDaisyUI size="xl">Badge</BadgeDaisyUI >
      </h1>

      <h2 className="text-lg font-semibold">
        Heading 2 <BadgeDaisyUI  size="lg">Badge</BadgeDaisyUI >
      </h2>

      <h3 className="text-base font-semibold">
        Heading 3 <BadgeDaisyUI  size="md">Badge</BadgeDaisyUI >
      </h3>

      <h4 className="text-sm font-semibold">
        Heading 4 <BadgeDaisyUI  size="sm">Badge</BadgeDaisyUI >
      </h4>

      <h5 className="text-xs font-semibold">
        Heading 5 <BadgeDaisyUI  size="xs">Badge</BadgeDaisyUI >
      </h5>

      <p className="text-xs">
        Paragraph <BadgeDaisyUI  size="xs">Badge</BadgeDaisyUI >
      </p>
    </div>

    <h2 className="text-xl">Badge in a button</h2>
    <div className="flex gap-2">
      <button className="btn">
        Inbox <BadgeDaisyUI as="div" size="sm">+99</BadgeDaisyUI>
      </button>

      <button className="btn">
        Inbox <BadgeDaisyUI as="div" size="sm" color="secondary">+99</BadgeDaisyUI>
      </button>
    </div>
  </div>;
}