Copy page

Form

Button

A flexible button component with multiple variants and sizes for different use cases.

Import

Code
import { Button } from "zudoku/ui/Button";

Variants

Default

Default Button

Code
<Button variant="default">Default Button</Button>

Destructive

Delete

Code
<Button variant="destructive">Delete</Button>

Outline

Outline Button

Code
<Button variant="outline">Outline Button</Button>

Secondary

Secondary

Code
<Button variant="secondary">Secondary</Button>

Ghost

Ghost Button

Code
<Button variant="ghost">Ghost Button</Button>

Link

Link Button

Code
<Button variant="link">Link Button</Button>

Sizes

Default Size

Default Size

Code
<Button size="default">Default Size</Button>

Small

Small Button

Code
<Button size="sm">Small Button</Button>

Large

Large Button

Code
<Button size="lg">Large Button</Button>

Extra Large

Extra Large

Code
<Button size="xl">Extra Large</Button>

Icon

Code
<Button size="icon">
  <PopcornIcon size={16} />
</Button>

As Child

Use the asChild prop to render the button as a different element while maintaining button styling:

Code
<Button asChild>
  <a href="/link">Link as Button</a>
</Button>

Custom Styling

The Button component accepts all standard button HTML attributes and can be customized with additional className:

Code
<Button className="w-full" variant="outline">
  Full Width Button
</Button>