Button

The primary interactive element. Supports 6 variants and 4 sizes with the signature brutalist dashed-border style.

Import

import { Button } from "poyraz-ui/atoms";

Variants

Six visual variants for different contexts.

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes

Four sizes: sm, default, lg, and icon.

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🔔</Button>

Disabled

Buttons can be disabled to prevent interaction.

<Button disabled>Disabled</Button>
<Button variant="outline" disabled>Disabled Outline</Button>

As Child

Use asChild to render as a different element (e.g. a link).

Go to Docs

<Button asChild>
  <a href="/docs">Go to Docs</a>
</Button>