Button
Customizable buttons with multiple variants, sizes, and interactive states.
"use client"
import { Button, buttonStyles } from "@/components/ui/preskok-ui/button"
function toTitleCase(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
export function ButtonPreskokDemo() {
const allIntents = Object.keys(buttonStyles.variants.intent) as Array<
keyof typeof buttonStyles.variants.intent
>
return (
<div className="flex flex-wrap items-center gap-2">
{allIntents.map((intent) => (
<Button key={intent} intent={intent}>
{toTitleCase(intent)}
</Button>
))}
</div>
)
}
Installation
CLI
Manual
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add button
Usage
import { Button } from "@/registry/preskok/ui/preskok-ui/button"
export function ButtonDemo() {
return (
<Button intent="primary" size="md">
Click me
</Button>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
intent | "primary" | "secondary" | "outline" | "ghost" | "link" | "plain" | "primary" | Visual style variant |
size | "xs" | "sm" | "md" | "lg" | "sq-xs" | "sq-sm" | "sq-md" | "sq-lg" | "md" | Button size |
isCircle | boolean | false | Circular button shape |
className | string | - | Additional CSS classes |
ref | React.Ref<HTMLButtonElement> | - | Button element ref |
All standard HTML button props are also supported.
Examples
Intent Variants
<div className="flex gap-2">
<Button intent="primary">Primary</Button>
<Button intent="secondary">Secondary</Button>
<Button intent="outline">Outline</Button>
<Button intent="ghost">Ghost</Button>
<Button intent="link">Link</Button>
<Button intent="plain">Plain</Button>
</div>Sizes
<div className="flex items-center gap-2">
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</div>Square Buttons
<div className="flex items-center gap-2">
<Button size="sq-xs" intent="outline">
<IconPlus />
</Button>
<Button size="sq-sm" intent="outline">
<IconPlus />
</Button>
<Button size="sq-md" intent="outline">
<IconPlus />
</Button>
<Button size="sq-lg" intent="outline">
<IconPlus />
</Button>
</div>Circular Buttons
<div className="flex items-center gap-2">
<Button isCircle size="sm">
<IconHeart />
</Button>
<Button isCircle size="md" intent="secondary">
<IconStar />
</Button>
<Button isCircle size="lg" intent="outline">
<IconShare />
</Button>
</div>With Icons
<div className="flex gap-2">
<Button intent="primary">
<IconDownload />
Download
</Button>
<Button intent="outline">
Save
<IconSave />
</Button>
<Button intent="ghost">
<IconRefresh />
</Button>
</div>Loading State
<Button disabled>
<IconSpinner className="animate-spin" />
Loading...
</Button>As Child
<Button asChild>
<a href="/download">Download</a>
</Button>Features
- Multiple variants - Six different visual styles
- Flexible sizing - Regular and square size options
- Icon support - Easy integration with icons
- Loading states - Built-in disabled and loading styles
- Accessibility - Proper focus management and ARIA support
- Polymorphic - Can render as different elements with asChild
- Responsive - Adapts to different screen sizes