DaisyUI Button

Buttons
About
Buttons allow the user to take actions or make choices.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds DaisyUI Button to your project and fits it to your theme.
Code

How DaisyUI Button is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
// Este é um arquivo com uma demonstração do seu componente
// É o que os usuários verão na pré-visualização
// Crie novos arquivos neste diretório para adicionar mais demonstrações
import { ButtonDaisyUI } from "@/components/ui/daisy-ui-button";

// SOMENTE A EXPORTAÇÃO PADRÃO SERÁ TRATADA COMO DEMONSTRAÇÃO
export default function DemoOne() {
  return <div className="flex flex-col gap-4 item-center justify-center">
    <h2 className="text-xl">Button</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI>Default</ButtonDaisyUI>     
    </div>

    <h2 className="text-xl">Button sizes</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI size="xs">Xsmall</ButtonDaisyUI>
      <ButtonDaisyUI size="sm">Small</ButtonDaisyUI>
      <ButtonDaisyUI>Medium</ButtonDaisyUI>
      <ButtonDaisyUI size="lg">Large</ButtonDaisyUI>
      <ButtonDaisyUI size="xl">Xlarge</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Responsive button</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI size="xl" className="sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl">Responsive</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Buttons colors</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI color="neutral">Neutral</ButtonDaisyUI>
      <ButtonDaisyUI color="primary">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Soft buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI variant="soft">Default</ButtonDaisyUI>
      <ButtonDaisyUI color="primary" variant="soft">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary" variant="soft">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent" variant="soft">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info" variant="soft">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success" variant="soft">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning" variant="soft">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error" variant="soft">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Outline buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI variant="outline">Default</ButtonDaisyUI>
      <ButtonDaisyUI color="primary" variant="outline">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary" variant="outline">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent" variant="outline">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info" variant="outline">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success" variant="outline">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning" variant="outline">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error" variant="outline">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Dash buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI variant="dash">Default</ButtonDaisyUI>
      <ButtonDaisyUI color="primary" variant="dash">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary" variant="dash">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent" variant="dash">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info" variant="dash">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success" variant="dash">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning" variant="dash">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error" variant="dash">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">neutral button with outline or dash style</h2>
    <div className="flex flex-row bg-white gap-4">
      <ButtonDaisyUI color="neutral" variant="outline">Outline</ButtonDaisyUI>
      <ButtonDaisyUI color="neutral" variant="dash">Dash</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Active buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI color="neutral" behavior="active">Neutral</ButtonDaisyUI>
      <ButtonDaisyUI color="primary" behavior="active">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary" behavior="active">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent" behavior="active">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info" behavior="active">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success" behavior="active">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning" behavior="active">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error" behavior="active">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Buttons ghost and button link</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI variant="ghost">Ghost</ButtonDaisyUI>
      <ButtonDaisyUI variant="link">Link</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Wide button</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI shape="wide">Wide</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Buttons with any HTML tags</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI as="a" role="button">Link</ButtonDaisyUI>
      <ButtonDaisyUI type="submit">Button</ButtonDaisyUI>
      <ButtonDaisyUI as="input" type="button" value="Input"/>
      <ButtonDaisyUI as="input" type="submit" value="Submit"/>
      <ButtonDaisyUI as="input" type="radio" aria-label="Radio"/>
      <ButtonDaisyUI as="input" type="checkbox" aria-label="Checkbox"/>
      <ButtonDaisyUI as="input" type="reset" value="Reset"/>
    </div>

    <h2 className="text-xl">Disabled buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI disabled="disabled">
       Disabled using attribute
      </ButtonDaisyUI>
      <ButtonDaisyUI behavior="disabled">
        Disabled using class name
      </ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Square button and circle button</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI shape="square">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="size-[1.2em]"><path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
      </ButtonDaisyUI>
      <ButtonDaisyUI shape="circle">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="size-[1.2em]"><path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
      </ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Button with Icon</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="size-[1.2em]"><path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
        Like
      </ButtonDaisyUI>
      <ButtonDaisyUI>
        Like
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="size-[1.2em]"><path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
      </ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Button block</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI shape="block">block</ButtonDaisyUI>
    </div>
  </div>;
}