Button

import { Button } from "@/components/ui/button"
 
export function ButtonDemo() {
	return <Button>Button</Button>
}

import { Button } from "@/components/ui/button"
 
export function ButtonSizes() {
	return (
		<div className="flex flex-row items-center gap-2">
			<Button size="sm">Small</Button>
			<Button size="md">Medium</Button>
			<Button size="lg">Large</Button>
		</div>
	)
}

import { PencilIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
 
export function ButtonIcon() {
	return (
		<Button size="icon" variant="outline">
			<PencilIcon />
		</Button>
	)
}

import { Button } from "@/components/ui/button"
 
export function ButtonSecondary() {
	return <Button variant="secondary">Secondary</Button>
}

import { Button } from "@/components/ui/button"
 
export function ButtonOutline() {
	return <Button variant="outline">Outline</Button>
}

import { Button } from "@/components/ui/button"
 
export function ButtonGhost() {
	return <Button variant="ghost">Ghost</Button>
}

import { Button } from "@/components/ui/button"
 
export function ButtonLink() {
	return <Button variant="link">Link</Button>
}

import { Button } from "@/components/ui/button"
 
export function ButtonDestructive() {
	return <Button variant="destructive">Destructive</Button>
}

import { Check } from "lucide-react"
 
import { Button } from "@/components/ui/button"
 
export function ButtonSuccess() {
	return (
		<Button variant="success">
			<Check className="mr-2 size-4" />
			Success
		</Button>
	)
}

import { Loader2Icon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
 
export function ButtonLoading() {
	return (
		<Button className="gap-2" disabled>
			<div className="animate-spin">
				<Loader2Icon size={16} />
			</div>
			Loading
		</Button>
	)
}

import { Button } from "@/components/ui/button"
 
export function ButtonRetro() {
	return <Button variant="retro">Retro</Button>
}

"use client"
 
import * as React from "react"
import { Mail } from "lucide-react"
 
import { DataButton } from "@/components/ui/data-button"
 
export function ButtonDataDemo() {
	const [isLoading, setIsLoading] = React.useState(false)
	const [isSuccess, setIsSuccess] = React.useState(false)
 
	const handleClick = async () => {
		setIsLoading(true)
		// Simulate an async operation
		await new Promise((resolve) => setTimeout(resolve, 2000))
		setIsLoading(false)
		setIsSuccess(true)
		// Reset after a delay
		await new Promise((resolve) => setTimeout(resolve, 1500))
		setIsSuccess(false)
	}
 
	return (
		<div className="flex flex-col items-center min-w-lg gap-4">
			<DataButton
				onClick={handleClick}
				isLoading={isLoading}
				isSuccess={isSuccess}
			>
				<Mail className="mr-2 size-4" />
				{isLoading ? "Sending..." : isSuccess ? "Sent!" : "Send Email"}
			</DataButton>
 
			<p className="text-sm text-muted-foreground">
				Click the button to see the loading and success states.
			</p>
		</div>
	)
}