WunderUI

Button

Component

Button previewPreview
About

The main action trigger of the WunderUI design system: 11 variants, 2 shapes, 5 sizes. Built on Base UI, WCAG AA contrast, light and dark theme. Free, MIT.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Button to your project and fits it to your theme.

Code

How Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Button } from "@/components/ui/button"
import { Plus, ArrowRight, Trash2 } from "lucide-react"

export default function ButtonDemo() {
  return (
    <div className="flex flex-col gap-6 p-8">
      <div className="flex flex-wrap items-center gap-3">
        <Button variant="primary"><Plus /> Add item</Button>
        <Button variant="plain">Plain</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="tint">Tint</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="link">Link</Button>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Button variant="gradient">Get All-Access <ArrowRight /></Button>
        <Button variant="brand">Brand</Button>
        <Button variant="dark">Dark</Button>
        <Button variant="light">Light</Button>
        <Button variant="destructive"><Trash2 /> Delete</Button>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">Large</Button>
        <Button size="xl">Extra large</Button>
        <Button size="2xl">2XL</Button>
        <Button shape="pill">Pill</Button>
        <Button disabled>Disabled</Button>
      </div>
    </div>
  )
}

Dependencies

More by WunderUI

View all
  • Converge Spinner

    Converge Spinner