Hover Expand Button

"use client";
 
import { PlusIcon } from "lucide-react";
 
import { HoverExpandButton } from "@/registry/default/buttons/hover-expand-button";
 
export function HoverExpandButtonDemo() {
	return (
		<HoverExpandButton.Root>
			<HoverExpandButton.Icon render={<PlusIcon />} />
			<HoverExpandButton.Text>Button</HoverExpandButton.Text>
		</HoverExpandButton.Root>
	);
}

"use client";
 
import { PlusIcon } from "lucide-react";
 
import { HoverExpandButton } from "@/registry/default/buttons/hover-expand-button";
 
export function HoverExpandButtonVariants() {
	return (
		<div className="flex gap-4">
			<HoverExpandButton.Root variant="filled">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
			<HoverExpandButton.Root variant="stroke">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
			<HoverExpandButton.Root variant="lighter">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
			<HoverExpandButton.Root variant="ghost">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
		</div>
	);
}

"use client";
 
import { PlusIcon } from "lucide-react";
 
import { HoverExpandButton } from "@/registry/default/buttons/hover-expand-button";
 
export function HoverExpandButtonVariants() {
	return (
		<div className="flex gap-4">
			<HoverExpandButton.Root color="primary">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
			<HoverExpandButton.Root color="default">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
			<HoverExpandButton.Root color="success">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
			<HoverExpandButton.Root color="warning">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
			<HoverExpandButton.Root color="error">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
		</div>
	);
}

"use client";
 
import { PlusIcon } from "lucide-react";
 
import { HoverExpandButton } from "@/registry/default/buttons/hover-expand-button";
 
export function HoverExpandButtonSizes() {
	return (
		<div className="flex gap-4">
			<HoverExpandButton.Root size="sm">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
			<HoverExpandButton.Root size="md">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
			<HoverExpandButton.Root size="lg">
				<HoverExpandButton.Icon render={<PlusIcon />} />
				<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			</HoverExpandButton.Root>
		</div>
	);
}

"use client";
 
import { PlusIcon, SettingsIcon } from "lucide-react";
 
import { HoverExpandButton } from "@/registry/default/buttons/hover-expand-button";
 
export function HoverExpandButtonDoubleSided() {
	return (
		<HoverExpandButton.Root>
			<HoverExpandButton.Icon render={<PlusIcon />} />
			<HoverExpandButton.Text>Button</HoverExpandButton.Text>
			<HoverExpandButton.Icon className="ml-1" render={<SettingsIcon />} />
		</HoverExpandButton.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>;
}