Components

Button

A versatile button component with chalk-styled theming, multiple variants, and sizes. Supports icons, disabled states, and polymorphic rendering via asChild.

Preview

Installation

npx blackboard-ui@latest add button

Usage

import { Button } from "@/components/ui/button";

export default function Example() {
  return <Button>Click me</Button>;
}

Examples

Default

<Button>Get Started</Button>

Outline

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

Size

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

With Icon

Place icons before or after the label. SVG icons inside the button are automatically sized to 16px.

<Button>
  <Mail /> Login with Email
</Button>
<Button variant="secondary">
  <Download /> Download
</Button>
<Button variant="outline">
  Learn More <ArrowRight />
</Button>

Disabled

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

As Link

Use the asChild prop to render the button as a different element (e.g., a Next.js Link):

import Link from "next/link";

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

API Reference

Button

Prop	Type	Default
variant	"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"	"default"
size	"default" \| "sm" \| "lg" \| "icon"	"default"
asChild	boolean	false
className	string	—

Also accepts all standard HTMLButtonElement attributes (onClick, disabled, type, etc.).