Components
CardButton
A card-shaped interactive button — rests at shadow-base, lifts to shadow-elevated on hover.
Installation
- $npx litefy@latest add card-button
- $pnpm dlx litefy@latest add card-button
- $yarn dlx litefy@latest add card-button
- $bun --bun litefy@latest add card-button
Usage
CardButton is the interactive counterpart of Card — the same card surface as a real button, resting at shadow-base and lifting to shadow-elevated on hover.
import { CardButton } from "@/ui";
export default function CardButtonBasicDemo() {
return (
<div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
<CardButton className="p-5">
<div className="text-muted-foreground text-xs uppercase tracking-wider">
Revenue
</div>
<div className="mt-2 text-2xl font-semibold">$12,480</div>
<div className="text-muted-foreground mt-1 text-xs">
+12.4% from last week
</div>
</CardButton>
<CardButton className="p-5">
<div className="text-muted-foreground text-xs uppercase tracking-wider">
Active users
</div>
<div className="mt-2 text-2xl font-semibold">3,219</div>
<div className="text-muted-foreground mt-1 text-xs">
+5.1% from last week
</div>
</CardButton>
</div>
);
}
Variants
outline is the default and is shown in Basic Usage; primary and danger tint the whole surface for strong emphasis, and text is flat at rest — no border, no shadow, only a background tint on hover — for lightweight card lists.
import { CardButton } from "@/ui";
export default function CardButtonVariantsDemo() {
const variants = [
{ variant: "primary", title: "Upgrade", description: "Unlock the pro plan" },
{ variant: "danger", title: "Delete", description: "Remove this workspace" },
{ variant: "text", title: "Details", description: "View the full report" },
] as const;
return (
<div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-3">
{variants.map(({ variant, title, description }) => (
<CardButton key={variant} variant={variant} className="p-4">
<div className="text-sm font-semibold">{title}</div>
<div className="text-muted-foreground mt-1 text-xs">{description}</div>
</CardButton>
))}
</div>
);
}
API Reference
CardButton
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "danger" | "outline" | "text" | "outline" | Visual weight, mirrors Button |
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"button"> | - | Supports all native button props |