Button

"use client";
 
import { Button } from "@/registry/default/buttons/base";
import { PlusIcon } from "lucide-react";
import { useState } from "react";
 
export function BaseButtonDemo() {
	const [count, setCount] = useState(0);
 
	return (
		<Button.Root onClick={() => setCount(count + 1)}>
			<Button.Icon render={<PlusIcon />} />
			Count: {count}
		</Button.Root>
	);
}

import { Button } from "@/registry/default/buttons/base";
 
export function BaseButtonVariants() {
	return (
		<div className="flex gap-4">
			<Button.Root variant="filled">Filled</Button.Root>
			<Button.Root variant="stroke">Stroke</Button.Root>
			<Button.Root variant="lighter">Lighter</Button.Root>
			<Button.Root variant="ghost">Ghost</Button.Root>
		</div>
	);
}

import { Button } from "@/registry/default/buttons/base";
 
export function BaseButtonColors() {
	return (
		<div className="flex gap-4">
			<Button.Root color="primary">Primary</Button.Root>
			<Button.Root color="default">Default</Button.Root>
			<Button.Root color="success">Success</Button.Root>
			<Button.Root color="warning">Warning</Button.Root>
			<Button.Root color="error">Error</Button.Root>
		</div>
	);
}

import { Button } from "@/registry/default/buttons/base";
 
export function BaseButtonSizes() {
	return (
		<div className="flex gap-4">
			<Button.Root size="sm">Small</Button.Root>
			<Button.Root size="md">Medium</Button.Root>
			<Button.Root size="lg">Large</Button.Root>
		</div>
	);
}

import { Button } from "@/registry/default/buttons/base";
import { PlusIcon } from "lucide-react";
 
export function BaseButtonIcons() {
	return (
		<Button.Root>
			<Button.Icon render={<PlusIcon />} />
			Primary
			<Button.Icon render={<PlusIcon />} />
		</Button.Root>
	);
}

import { Button } from "@/registry/default/buttons/base";
import Link from "next/link";
 
export function BaseButtonComposition() {
	return <Button.Root render={<Link href="/" />}>I'm a Link</Button.Root>;
}