Components
Loading preview...
A versatile button component from Interfaces DS with six visual variants and six size combinations per variant.
npx shadcn@latest add https://21st.dev/r/jshguo/interfaces-button"use client"
import { Plus } from "lucide-react"
import { Button } from "@/components/ui/interfaces-button"
const sizes = [
{ label: "Default · Sm", size: "sm" as const },
{ label: "Default · Default", size: "default" as const },
{ label: "Default · Lg", size: "lg" as const },
{ label: "Default · Icon Sm", size: "icon-sm" as const, icon: true },
{ label: "Default · Icon", size: "icon" as const, icon: true },
{ label: "Default · Icon Lg", size: "icon-lg" as const, icon: true },
]
export default function ButtonDefaultDemo() {
return (
<div className="flex w-full min-h-screen items-center justify-center overflow-hidden bg-background p-8">
<div className="grid w-full max-w-5xl gap-4 sm:grid-cols-2 lg:grid-cols-3">
{sizes.map((item) => (
<div
key={item.label}
className="flex min-h-36 flex-col rounded-xl border bg-card p-4 shadow-sm"
>
<p className="text-xs font-medium text-muted-foreground">{item.label}</p>
<div className="flex flex-1 items-center justify-center pt-3">
<Button size={item.size} aria-label={item.icon ? item.label.toLowerCase() : undefined}>
{item.icon ? <Plus className="size-4" /> : "Button"}
</Button>
</div>
</div>
))}
</div>
</div>
)
}